@empathyco/x-components 6.0.0-alpha.57 → 6.0.0-alpha.58

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.
@@ -1,23 +1,20 @@
1
1
 
2
- .x-underline {
3
- -webkit-text-decoration-line: underline;
4
- text-decoration-line: underline;
2
+ .x-uppercase {
3
+ text-transform: uppercase;
5
4
  }
6
5
 
7
- .x-overline {
8
- -webkit-text-decoration-line: overline;
9
- text-decoration-line: overline;
6
+ .x-lowercase {
7
+ text-transform: lowercase;
10
8
  }
11
9
 
12
- .x-line-through {
13
- -webkit-text-decoration-line: line-through;
14
- text-decoration-line: line-through;
10
+ .x-capitalize {
11
+ text-transform: capitalize;
15
12
  }
16
13
 
17
- .x-no-underline {
18
- -webkit-text-decoration-line: none;
19
- text-decoration-line: none;
14
+ .x-normal-case {
15
+ text-transform: none;
20
16
  }
17
+
21
18
  .x-static {
22
19
  position: static !important;
23
20
  }
@@ -37,6 +34,25 @@
37
34
  .x-sticky {
38
35
  position: sticky !important;
39
36
  }
37
+ .x-underline {
38
+ -webkit-text-decoration-line: underline;
39
+ text-decoration-line: underline;
40
+ }
41
+
42
+ .x-overline {
43
+ -webkit-text-decoration-line: overline;
44
+ text-decoration-line: overline;
45
+ }
46
+
47
+ .x-line-through {
48
+ -webkit-text-decoration-line: line-through;
49
+ text-decoration-line: line-through;
50
+ }
51
+
52
+ .x-no-underline {
53
+ -webkit-text-decoration-line: none;
54
+ text-decoration-line: none;
55
+ }
40
56
  .x-padding--00 {
41
57
  padding: 0 !important;
42
58
  }
@@ -940,21 +956,6 @@
940
956
  [dir="rtl"] .x-margin--left-20 {
941
957
  margin-right: var(--x-size-base-20) !important;
942
958
  }
943
- .x-uppercase {
944
- text-transform: uppercase;
945
- }
946
-
947
- .x-lowercase {
948
- text-transform: lowercase;
949
- }
950
-
951
- .x-capitalize {
952
- text-transform: capitalize;
953
- }
954
-
955
- .x-normal-case {
956
- text-transform: none;
957
- }
958
959
  .x-line-height--none {
959
960
  line-height: 1 !important;
960
961
  }
@@ -1012,15 +1013,6 @@
1012
1013
  -webkit-box-orient: vertical !important;
1013
1014
  -webkit-line-clamp: 6 !important;
1014
1015
  }
1015
- .x-font-weight--light {
1016
- font-weight: var(--x-number-font-weight-base-light) !important;
1017
- }
1018
- .x-font-weight--regular {
1019
- font-weight: var(--x-number-font-weight-base-regular) !important;
1020
- }
1021
- .x-font-weight--bold {
1022
- font-weight: var(--x-number-font-weight-base-bold) !important;
1023
- }
1024
1016
  .x-font-size--01 {
1025
1017
  font-size: var(--x-size-base-01) !important;
1026
1018
  line-height: 1.5;
@@ -1101,6 +1093,15 @@
1101
1093
  font-size: var(--x-size-base-20) !important;
1102
1094
  line-height: 1.5;
1103
1095
  }
1096
+ .x-font-weight--light {
1097
+ font-weight: var(--x-number-font-weight-base-light) !important;
1098
+ }
1099
+ .x-font-weight--regular {
1100
+ font-weight: var(--x-number-font-weight-base-regular) !important;
1101
+ }
1102
+ .x-font-weight--bold {
1103
+ font-weight: var(--x-number-font-weight-base-bold) !important;
1104
+ }
1104
1105
  .x-font-color--lead {
1105
1106
  color: var(--x-color-base-lead) !important;
1106
1107
  }
@@ -1230,244 +1231,43 @@
1230
1231
  .x-fill--transparent {
1231
1232
  fill: var(--x-color-base-transparent) !important;
1232
1233
  }
1233
- /* Material Elevations extracted from:
1234
- https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1235
- */
1236
- :root {
1237
- /* Shadow none */
1238
- --x-string-box-shadow-00: none;
1239
- /* Shadow 1dp */
1240
- --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
1241
- 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1242
- /* Shadow 2dp */
1243
- --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
1244
- 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1245
- /* Shadow 3dp */
1246
- --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
1247
- 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1248
- /* Shadow 4dp */
1249
- --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
1250
- 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1251
- /* Shadow 6dp */
1252
- --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
1253
- 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1254
- /* Shadow 8dp */
1255
- --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
1256
- 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1257
- /* Shadow 9dp */
1258
- --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
1259
- 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1260
- /* Shadow 12dp */
1261
- --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
1262
- 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1263
- /* Shadow 16dp */
1264
- --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
1265
- 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1266
- /* Shadow 24dp */
1267
- --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
1268
- 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1269
- /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1270
- /* Shadow 1dp */
1271
- --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1272
- 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1273
- /* Shadow 2dp */
1274
- --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1275
- 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1276
- /* Shadow 3dp */
1277
- --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1278
- 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1279
- /* Shadow 4dp */
1280
- --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1281
- 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1282
- /* Shadow 6dp */
1283
- --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1284
- 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1285
- /* Shadow 8dp */
1286
- --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1287
- 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1288
- /* Shadow 9dp */
1289
- --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1290
- 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1291
- /* Shadow 12dp */
1292
- --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1293
- 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1294
- /* Shadow 16dp */
1295
- --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1296
- 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1297
- /* Shadow 24dp */
1298
- --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1299
- 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1300
- }
1301
- /* Material Elevations extracted from:
1302
- https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1303
- */
1304
- :root {
1305
- /* Shadow none */
1306
- --x-string-box-shadow-00: none;
1307
- /* Shadow 1dp */
1308
- --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
1309
- 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1310
- /* Shadow 2dp */
1311
- --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
1312
- 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1313
- /* Shadow 3dp */
1314
- --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
1315
- 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1316
- /* Shadow 4dp */
1317
- --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
1318
- 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1319
- /* Shadow 6dp */
1320
- --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
1321
- 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1322
- /* Shadow 8dp */
1323
- --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
1324
- 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1325
- /* Shadow 9dp */
1326
- --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
1327
- 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1328
- /* Shadow 12dp */
1329
- --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
1330
- 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1331
- /* Shadow 16dp */
1332
- --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
1333
- 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1334
- /* Shadow 24dp */
1335
- --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
1336
- 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1337
- /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1338
- /* Shadow 1dp */
1339
- --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1340
- 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1341
- /* Shadow 2dp */
1342
- --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1343
- 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1344
- /* Shadow 3dp */
1345
- --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1346
- 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1347
- /* Shadow 4dp */
1348
- --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1349
- 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1350
- /* Shadow 6dp */
1351
- --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1352
- 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1353
- /* Shadow 8dp */
1354
- --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1355
- 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1356
- /* Shadow 9dp */
1357
- --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1358
- 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1359
- /* Shadow 12dp */
1360
- --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1361
- 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1362
- /* Shadow 16dp */
1363
- --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1364
- 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1365
- /* Shadow 24dp */
1366
- --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1367
- 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1234
+ *[class*=x-border-width--] {
1235
+ border-width: 0;
1368
1236
  }
1369
1237
 
1370
- .x-shadow--none {
1371
- box-shadow: none !important;
1238
+ .x-border-width--00 {
1239
+ border-width: 0px !important;
1240
+ border-style: solid !important;
1372
1241
  }
1373
-
1374
- .x-shadow--01 {
1375
- box-shadow: var(--x-string-box-shadow-01) !important;
1242
+ .x-border-width--top-00 {
1243
+ border-top-width: 0px !important;
1244
+ border-style: solid !important;
1376
1245
  }
1377
- .x-shadow--bottom-01 {
1378
- box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1246
+ .x-border-width--bottom-00 {
1247
+ border-bottom-width: 0px !important;
1248
+ border-style: solid !important;
1379
1249
  }
1380
- .x-shadow--02 {
1381
- box-shadow: var(--x-string-box-shadow-02) !important;
1250
+ [dir="ltr"] .x-border-width--right-00 {
1251
+ border-right-width: 0px !important;
1382
1252
  }
1383
- .x-shadow--bottom-02 {
1384
- box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1253
+ [dir="rtl"] .x-border-width--right-00 {
1254
+ border-left-width: 0px !important;
1385
1255
  }
1386
- .x-shadow--03 {
1387
- box-shadow: var(--x-string-box-shadow-03) !important;
1256
+ .x-border-width--right-00 {
1257
+ border-style: solid !important;
1388
1258
  }
1389
- .x-shadow--bottom-03 {
1390
- box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1259
+ [dir="ltr"] .x-border-width--left-00 {
1260
+ border-left-width: 0px !important;
1391
1261
  }
1392
- .x-shadow--04 {
1393
- box-shadow: var(--x-string-box-shadow-04) !important;
1262
+ [dir="rtl"] .x-border-width--left-00 {
1263
+ border-right-width: 0px !important;
1394
1264
  }
1395
- .x-shadow--bottom-04 {
1396
- box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1265
+ .x-border-width--left-00 {
1266
+ border-style: solid !important;
1397
1267
  }
1398
- .x-shadow--05 {
1399
- box-shadow: var(--x-string-box-shadow-05) !important;
1400
- }
1401
- .x-shadow--bottom-05 {
1402
- box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1403
- }
1404
- .x-shadow--06 {
1405
- box-shadow: var(--x-string-box-shadow-06) !important;
1406
- }
1407
- .x-shadow--bottom-06 {
1408
- box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1409
- }
1410
- .x-shadow--07 {
1411
- box-shadow: var(--x-string-box-shadow-07) !important;
1412
- }
1413
- .x-shadow--bottom-07 {
1414
- box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1415
- }
1416
- .x-shadow--08 {
1417
- box-shadow: var(--x-string-box-shadow-08) !important;
1418
- }
1419
- .x-shadow--bottom-08 {
1420
- box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1421
- }
1422
- .x-shadow--09 {
1423
- box-shadow: var(--x-string-box-shadow-09) !important;
1424
- }
1425
- .x-shadow--bottom-09 {
1426
- box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1427
- }
1428
- .x-shadow--10 {
1429
- box-shadow: var(--x-string-box-shadow-10) !important;
1430
- }
1431
- .x-shadow--bottom-10 {
1432
- box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1433
- }
1434
- *[class*=x-border-width--] {
1435
- border-width: 0;
1436
- }
1437
-
1438
- .x-border-width--00 {
1439
- border-width: 0px !important;
1440
- border-style: solid !important;
1441
- }
1442
- .x-border-width--top-00 {
1443
- border-top-width: 0px !important;
1444
- border-style: solid !important;
1445
- }
1446
- .x-border-width--bottom-00 {
1447
- border-bottom-width: 0px !important;
1448
- border-style: solid !important;
1449
- }
1450
- [dir="ltr"] .x-border-width--right-00 {
1451
- border-right-width: 0px !important;
1452
- }
1453
- [dir="rtl"] .x-border-width--right-00 {
1454
- border-left-width: 0px !important;
1455
- }
1456
- .x-border-width--right-00 {
1457
- border-style: solid !important;
1458
- }
1459
- [dir="ltr"] .x-border-width--left-00 {
1460
- border-left-width: 0px !important;
1461
- }
1462
- [dir="rtl"] .x-border-width--left-00 {
1463
- border-right-width: 0px !important;
1464
- }
1465
- .x-border-width--left-00 {
1466
- border-style: solid !important;
1467
- }
1468
- .x-border-width--01 {
1469
- border-width: 1px !important;
1470
- border-style: solid !important;
1268
+ .x-border-width--01 {
1269
+ border-width: 1px !important;
1270
+ border-style: solid !important;
1471
1271
  }
1472
1272
  .x-border-width--top-01 {
1473
1273
  border-top-width: 1px !important;
@@ -1765,6 +1565,250 @@
1765
1565
  .x-border-width--left-10 {
1766
1566
  border-style: solid !important;
1767
1567
  }
1568
+ /* Material Elevations extracted from:
1569
+ https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1570
+ */
1571
+ :root {
1572
+ /* Shadow none */
1573
+ --x-string-box-shadow-00: none;
1574
+ /* Shadow 1dp */
1575
+ --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
1576
+ 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1577
+ /* Shadow 2dp */
1578
+ --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
1579
+ 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1580
+ /* Shadow 3dp */
1581
+ --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
1582
+ 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1583
+ /* Shadow 4dp */
1584
+ --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
1585
+ 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1586
+ /* Shadow 6dp */
1587
+ --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
1588
+ 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1589
+ /* Shadow 8dp */
1590
+ --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
1591
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1592
+ /* Shadow 9dp */
1593
+ --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
1594
+ 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1595
+ /* Shadow 12dp */
1596
+ --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
1597
+ 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1598
+ /* Shadow 16dp */
1599
+ --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
1600
+ 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1601
+ /* Shadow 24dp */
1602
+ --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
1603
+ 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1604
+ /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1605
+ /* Shadow 1dp */
1606
+ --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1607
+ 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1608
+ /* Shadow 2dp */
1609
+ --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1610
+ 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1611
+ /* Shadow 3dp */
1612
+ --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1613
+ 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1614
+ /* Shadow 4dp */
1615
+ --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1616
+ 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1617
+ /* Shadow 6dp */
1618
+ --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1619
+ 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1620
+ /* Shadow 8dp */
1621
+ --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1622
+ 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1623
+ /* Shadow 9dp */
1624
+ --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1625
+ 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1626
+ /* Shadow 12dp */
1627
+ --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1628
+ 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1629
+ /* Shadow 16dp */
1630
+ --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1631
+ 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1632
+ /* Shadow 24dp */
1633
+ --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1634
+ 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1635
+ }
1636
+
1637
+ .x-shadow--none {
1638
+ box-shadow: none !important;
1639
+ }
1640
+
1641
+ .x-shadow--01 {
1642
+ box-shadow: var(--x-string-box-shadow-01) !important;
1643
+ }
1644
+ .x-shadow--bottom-01 {
1645
+ box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1646
+ }
1647
+ .x-shadow--02 {
1648
+ box-shadow: var(--x-string-box-shadow-02) !important;
1649
+ }
1650
+ .x-shadow--bottom-02 {
1651
+ box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1652
+ }
1653
+ .x-shadow--03 {
1654
+ box-shadow: var(--x-string-box-shadow-03) !important;
1655
+ }
1656
+ .x-shadow--bottom-03 {
1657
+ box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1658
+ }
1659
+ .x-shadow--04 {
1660
+ box-shadow: var(--x-string-box-shadow-04) !important;
1661
+ }
1662
+ .x-shadow--bottom-04 {
1663
+ box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1664
+ }
1665
+ .x-shadow--05 {
1666
+ box-shadow: var(--x-string-box-shadow-05) !important;
1667
+ }
1668
+ .x-shadow--bottom-05 {
1669
+ box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1670
+ }
1671
+ .x-shadow--06 {
1672
+ box-shadow: var(--x-string-box-shadow-06) !important;
1673
+ }
1674
+ .x-shadow--bottom-06 {
1675
+ box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1676
+ }
1677
+ .x-shadow--07 {
1678
+ box-shadow: var(--x-string-box-shadow-07) !important;
1679
+ }
1680
+ .x-shadow--bottom-07 {
1681
+ box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1682
+ }
1683
+ .x-shadow--08 {
1684
+ box-shadow: var(--x-string-box-shadow-08) !important;
1685
+ }
1686
+ .x-shadow--bottom-08 {
1687
+ box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1688
+ }
1689
+ .x-shadow--09 {
1690
+ box-shadow: var(--x-string-box-shadow-09) !important;
1691
+ }
1692
+ .x-shadow--bottom-09 {
1693
+ box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1694
+ }
1695
+ .x-shadow--10 {
1696
+ box-shadow: var(--x-string-box-shadow-10) !important;
1697
+ }
1698
+ .x-shadow--bottom-10 {
1699
+ box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1700
+ }
1701
+ /* Material Elevations extracted from:
1702
+ https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1703
+ */
1704
+ :root {
1705
+ /* Shadow none */
1706
+ --x-string-box-shadow-00: none;
1707
+ /* Shadow 1dp */
1708
+ --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
1709
+ 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1710
+ /* Shadow 2dp */
1711
+ --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
1712
+ 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1713
+ /* Shadow 3dp */
1714
+ --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
1715
+ 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1716
+ /* Shadow 4dp */
1717
+ --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
1718
+ 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1719
+ /* Shadow 6dp */
1720
+ --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
1721
+ 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1722
+ /* Shadow 8dp */
1723
+ --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
1724
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1725
+ /* Shadow 9dp */
1726
+ --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
1727
+ 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1728
+ /* Shadow 12dp */
1729
+ --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
1730
+ 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1731
+ /* Shadow 16dp */
1732
+ --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
1733
+ 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1734
+ /* Shadow 24dp */
1735
+ --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
1736
+ 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1737
+ /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1738
+ /* Shadow 1dp */
1739
+ --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1740
+ 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1741
+ /* Shadow 2dp */
1742
+ --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1743
+ 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1744
+ /* Shadow 3dp */
1745
+ --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1746
+ 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1747
+ /* Shadow 4dp */
1748
+ --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1749
+ 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1750
+ /* Shadow 6dp */
1751
+ --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1752
+ 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1753
+ /* Shadow 8dp */
1754
+ --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1755
+ 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1756
+ /* Shadow 9dp */
1757
+ --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1758
+ 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1759
+ /* Shadow 12dp */
1760
+ --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1761
+ 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1762
+ /* Shadow 16dp */
1763
+ --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1764
+ 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1765
+ /* Shadow 24dp */
1766
+ --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1767
+ 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1768
+ }
1769
+ .x-border-color--lead {
1770
+ border-color: var(--x-color-base-lead) !important;
1771
+ }
1772
+
1773
+ .x-border-color--auxiliary {
1774
+ border-color: var(--x-color-base-auxiliary) !important;
1775
+ }
1776
+
1777
+ .x-border-color--neutral-10 {
1778
+ border-color: var(--x-color-base-neutral-10) !important;
1779
+ }
1780
+
1781
+ .x-border-color--neutral-35 {
1782
+ border-color: var(--x-color-base-neutral-35) !important;
1783
+ }
1784
+
1785
+ .x-border-color--neutral-70 {
1786
+ border-color: var(--x-color-base-neutral-70) !important;
1787
+ }
1788
+
1789
+ .x-border-color--neutral-95 {
1790
+ border-color: var(--x-color-base-neutral-95) !important;
1791
+ }
1792
+
1793
+ .x-border-color--neutral-100 {
1794
+ border-color: var(--x-color-base-neutral-100) !important;
1795
+ }
1796
+
1797
+ .x-border-color--accent {
1798
+ border-color: var(--x-color-base-accent) !important;
1799
+ }
1800
+
1801
+ .x-border-color--enable {
1802
+ border-color: var(--x-color-base-enable) !important;
1803
+ }
1804
+
1805
+ .x-border-color--disable {
1806
+ border-color: var(--x-color-base-disable) !important;
1807
+ }
1808
+
1809
+ .x-border-color--transparent {
1810
+ border-color: var(--x-color-base-transparent) !important;
1811
+ }
1768
1812
  .x-border-radius--00 {
1769
1813
  border-radius: 0 !important;
1770
1814
  }
@@ -3290,74 +3334,34 @@
3290
3334
  }
3291
3335
 
3292
3336
  .x-background--neutral-70 {
3293
- background-color: var(--x-color-base-neutral-70) !important;
3294
- }
3295
-
3296
- .x-background--neutral-95 {
3297
- background-color: var(--x-color-base-neutral-95) !important;
3298
- }
3299
-
3300
- .x-background--neutral-100 {
3301
- background-color: var(--x-color-base-neutral-100) !important;
3302
- }
3303
-
3304
- .x-background--accent {
3305
- background-color: var(--x-color-base-accent) !important;
3306
- }
3307
-
3308
- .x-background--enable {
3309
- background-color: var(--x-color-base-enable) !important;
3310
- }
3311
-
3312
- .x-background--disable {
3313
- background-color: var(--x-color-base-disable) !important;
3314
- }
3315
-
3316
- .x-background--transparent {
3317
- background-color: var(--x-color-base-transparent) !important;
3318
- }
3319
- .x-border-color--lead {
3320
- border-color: var(--x-color-base-lead) !important;
3321
- }
3322
-
3323
- .x-border-color--auxiliary {
3324
- border-color: var(--x-color-base-auxiliary) !important;
3325
- }
3326
-
3327
- .x-border-color--neutral-10 {
3328
- border-color: var(--x-color-base-neutral-10) !important;
3329
- }
3330
-
3331
- .x-border-color--neutral-35 {
3332
- border-color: var(--x-color-base-neutral-35) !important;
3333
- }
3334
-
3335
- .x-border-color--neutral-70 {
3336
- border-color: var(--x-color-base-neutral-70) !important;
3337
+ background-color: var(--x-color-base-neutral-70) !important;
3337
3338
  }
3338
3339
 
3339
- .x-border-color--neutral-95 {
3340
- border-color: var(--x-color-base-neutral-95) !important;
3340
+ .x-background--neutral-95 {
3341
+ background-color: var(--x-color-base-neutral-95) !important;
3341
3342
  }
3342
3343
 
3343
- .x-border-color--neutral-100 {
3344
- border-color: var(--x-color-base-neutral-100) !important;
3344
+ .x-background--neutral-100 {
3345
+ background-color: var(--x-color-base-neutral-100) !important;
3345
3346
  }
3346
3347
 
3347
- .x-border-color--accent {
3348
- border-color: var(--x-color-base-accent) !important;
3348
+ .x-background--accent {
3349
+ background-color: var(--x-color-base-accent) !important;
3349
3350
  }
3350
3351
 
3351
- .x-border-color--enable {
3352
- border-color: var(--x-color-base-enable) !important;
3352
+ .x-background--enable {
3353
+ background-color: var(--x-color-base-enable) !important;
3353
3354
  }
3354
3355
 
3355
- .x-border-color--disable {
3356
- border-color: var(--x-color-base-disable) !important;
3356
+ .x-background--disable {
3357
+ background-color: var(--x-color-base-disable) !important;
3357
3358
  }
3358
3359
 
3359
- .x-border-color--transparent {
3360
- border-color: var(--x-color-base-transparent) !important;
3360
+ .x-background--transparent {
3361
+ background-color: var(--x-color-base-transparent) !important;
3362
+ }
3363
+ :root {
3364
+ --x-color-text-secondary: var(--x-color-base-neutral-35);
3361
3365
  }
3362
3366
  .x-text--stroke.x-text {
3363
3367
  --x-string-text-decoration: line-through;
@@ -3374,9 +3378,6 @@
3374
3378
  .x-text--stroke.x-small {
3375
3379
  --x-string-text-decoration-small: line-through;
3376
3380
  }
3377
- :root {
3378
- --x-color-text-secondary: var(--x-color-base-neutral-35);
3379
- }
3380
3381
  .x-text--secondary {
3381
3382
  --x-color-text-default: var(--x-color-text-secondary);
3382
3383
  }
@@ -3671,6 +3672,13 @@
3671
3672
  --x-number-font-weight-tag-default-selected
3672
3673
  );
3673
3674
  }
3675
+ :root {
3676
+ --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3677
+ --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3678
+ --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3679
+ --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3680
+ --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3681
+ }
3674
3682
  :root {
3675
3683
  --x-color-background-tag-default: var(--x-color-base-neutral-100);
3676
3684
  --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -3899,13 +3907,6 @@
3899
3907
  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3900
3908
  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3901
3909
  }
3902
- :root {
3903
- --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3904
- --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3905
- --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3906
- --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3907
- --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3908
- }
3909
3910
 
3910
3911
  .x-tag--card.x-tag,
3911
3912
  .x-tag--card .x-tag {
@@ -3932,237 +3933,31 @@
3932
3933
  --x-size-border-width-suggestion-group-default: 0;
3933
3934
  --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
3934
3935
  --x-size-border-width-right-suggestion-group-default: var(
3935
- --x-size-border-width-suggestion-default
3936
- );
3937
- --x-size-border-width-bottom-suggestion-group-default: var(
3938
- --x-size-border-width-suggestion-default
3939
- );
3940
- --x-size-border-width-left-suggestion-group-default: var(
3941
- --x-size-border-width-suggestion-default
3942
- );
3943
- --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
3944
- --x-size-border-radius-top-left-suggestion-group-default: var(
3945
- --x-size-border-radius-suggestion-default
3946
- );
3947
- --x-size-border-radius-top-right-suggestion-group-default: var(
3948
- --x-size-border-radius-suggestion-default
3949
- );
3950
- --x-size-border-radius-bottom-right-suggestion-group-default: var(
3951
- --x-size-border-radius-suggestion-default
3952
- );
3953
- --x-size-border-radius-bottom-left-suggestion-group-default: var(
3954
- --x-size-border-radius-suggestion-default
3955
- );
3956
- --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
3957
- --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
3958
- --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
3959
- --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
3960
- }
3961
- :root {
3962
- --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3963
- --x-color-text-suggestion-group-matching-part-default: var(
3964
- --x-color-text-suggestion-matching-part-default
3965
- );
3966
- --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
3967
- --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
3968
- --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
3969
- --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
3970
- --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
3971
- --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
3972
- --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
3973
- --x-size-border-width-suggestion-group-default: 0;
3974
- --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
3975
- --x-size-border-width-right-suggestion-group-default: var(
3976
- --x-size-border-width-suggestion-default
3977
- );
3978
- --x-size-border-width-bottom-suggestion-group-default: var(
3979
- --x-size-border-width-suggestion-default
3980
- );
3981
- --x-size-border-width-left-suggestion-group-default: var(
3982
- --x-size-border-width-suggestion-default
3983
- );
3984
- --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
3985
- --x-size-border-radius-top-left-suggestion-group-default: var(
3986
- --x-size-border-radius-suggestion-default
3987
- );
3988
- --x-size-border-radius-top-right-suggestion-group-default: var(
3989
- --x-size-border-radius-suggestion-default
3990
- );
3991
- --x-size-border-radius-bottom-right-suggestion-group-default: var(
3992
- --x-size-border-radius-suggestion-default
3993
- );
3994
- --x-size-border-radius-bottom-left-suggestion-group-default: var(
3995
- --x-size-border-radius-suggestion-default
3996
- );
3997
- --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
3998
- --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
3999
- --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
4000
- --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
4001
- }
4002
-
4003
- [dir="ltr"] .x-suggestion-group {
4004
- padding-left: var(--x-size-padding-left-suggestion-group-default);
4005
- }
4006
-
4007
- [dir="rtl"] .x-suggestion-group {
4008
- padding-right: var(--x-size-padding-left-suggestion-group-default);
4009
- }
4010
-
4011
- [dir="ltr"] .x-suggestion-group {
4012
- padding-right: var(--x-size-padding-right-suggestion-group-default);
4013
- }
4014
-
4015
- [dir="rtl"] .x-suggestion-group {
4016
- padding-left: var(--x-size-padding-right-suggestion-group-default);
4017
- }
4018
-
4019
- [dir="ltr"] .x-suggestion-group {
4020
- border-left-width: var(--x-size-border-width-left-suggestion-group-default);
4021
- }
4022
-
4023
- [dir="rtl"] .x-suggestion-group {
4024
- border-right-width: var(--x-size-border-width-left-suggestion-group-default);
4025
- }
4026
-
4027
- [dir="ltr"] .x-suggestion-group {
4028
- border-right-width: var(--x-size-border-width-right-suggestion-group-default);
4029
- }
4030
-
4031
- [dir="rtl"] .x-suggestion-group {
4032
- border-left-width: var(--x-size-border-width-right-suggestion-group-default);
4033
- }
4034
-
4035
- .x-suggestion-group {
4036
- display: flex;
4037
- flex-flow: row nowrap;
4038
- box-sizing: border-box;
4039
- background-color: var(--x-color-background-suggestion-group-default);
4040
- color: var(--x-color-text-suggestion-group-default);
4041
- border-color: var(--x-color-border-suggestion-group-default);
4042
- font-family: var(--x-font-family-suggestion-group-default);
4043
- font-size: var(--x-size-font-suggestion-group-default);
4044
- line-height: var(--x-size-line-height-suggestion-group-default);
4045
- font-weight: var(--x-number-font-weight-suggestion-group-default);
4046
- cursor: pointer;
4047
- padding-top: var(--x-size-padding-top-suggestion-group-default);
4048
- padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
4049
- gap: var(--x-size-gap-suggestion-group-default);
4050
- border-style: solid;
4051
- border-top-width: var(--x-size-border-width-top-suggestion-group-default);
4052
- border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
4053
- border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
4054
- }
4055
- @media not all and (min-resolution: 0.001dpcm) {
4056
- .x-suggestion-group {
4057
- gap: 0;
4058
- }
4059
- .x-suggestion-group > *:not(:last-child) {
4060
- margin-right: var(--x-size-gap-suggestion-group-default);
4061
- }
4062
- }
4063
- .x-suggestion-group .x-suggestion {
4064
- padding: 0;
4065
- flex: 1 1 auto;
4066
- border: none;
4067
- }
4068
- .x-suggestion-group .x-button {
4069
- --x-color-background-button-default: transparent;
4070
- --x-color-border-button-default: transparent;
4071
- --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
4072
- --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
4073
- --x-size-padding-right-button-default: 0;
4074
- --x-size-padding-left-button-default: 0;
4075
- border: none;
4076
- }
4077
- :root {
4078
- --x-string-align-items-suggestion-default: center;
4079
- --x-color-text-suggestion-default: var(--x-color-text-default);
4080
- --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
4081
- --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
4082
- --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
4083
- --x-color-background-suggestion-default: transparent;
4084
- --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
4085
- --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
4086
- --x-color-text-suggestion-matching-part-default-curated: var(
4087
- --x-color-text-suggestion-matching-part-default
4088
- );
4089
- --x-color-text-suggestion-default-matching-curated: var(
4090
- --x-color-text-suggestion-default-matching
4091
- );
4092
- --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
4093
- --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
4094
- --x-size-padding-top-suggestion-default: var(--x-size-base-01);
4095
- --x-size-padding-right-suggestion-default: 0;
4096
- --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
4097
- --x-size-padding-left-suggestion-default: 0;
4098
- --x-size-gap-suggestion-default: var(--x-size-base-03);
4099
- --x-size-border-width-suggestion-default: 0;
4100
- --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
4101
- --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
4102
- --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
4103
- --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
4104
- --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
4105
- --x-size-border-radius-top-left-suggestion-default: var(
4106
- --x-size-border-radius-suggestion-default
4107
- );
4108
- --x-size-border-radius-top-right-suggestion-default: var(
4109
- --x-size-border-radius-suggestion-default
4110
- );
4111
- --x-size-border-radius-bottom-right-suggestion-default: var(
4112
- --x-size-border-radius-suggestion-default
4113
- );
4114
- --x-size-border-radius-bottom-left-suggestion-default: var(
4115
- --x-size-border-radius-suggestion-default
4116
- );
4117
- --x-font-family-suggestion-default: var(--x-font-family-text);
4118
- --x-size-font-suggestion-default: var(--x-size-font-text);
4119
- --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
4120
- --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
4121
- --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
4122
- --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
4123
- --x-size-line-height-suggestion-matching-part-default: var(
4124
- --x-size-line-height-suggestion-default
4125
- );
4126
- --x-number-font-weight-suggestion-matching-part-default: var(
4127
- --x-number-font-weight-suggestion-default
4128
- );
4129
- --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
4130
- --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
4131
- --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
4132
- --x-number-font-weight-suggestion-default-matching: var(
4133
- --x-number-font-weight-suggestion-default
4134
- );
4135
- --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
4136
- --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
4137
- --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
4138
- --x-number-font-weight-suggestion-filter-default: var(--x-number-font-weight-suggestion-default);
4139
- --x-text-transform-suggestion-filter-default: none;
4140
- --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
4141
- --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
4142
- --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
4143
- --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
4144
- --x-font-family-suggestion-matching-part-default-curated: var(
4145
- --x-font-family-suggestion-matching-part-default
3936
+ --x-size-border-width-suggestion-default
4146
3937
  );
4147
- --x-size-font-suggestion-matching-part-default-curated: var(
4148
- --x-size-font-suggestion-matching-part-default
3938
+ --x-size-border-width-bottom-suggestion-group-default: var(
3939
+ --x-size-border-width-suggestion-default
4149
3940
  );
4150
- --x-size-line-height-suggestion-matching-part-default-curated: var(
4151
- --x-size-line-height-suggestion-matching-part-default
3941
+ --x-size-border-width-left-suggestion-group-default: var(
3942
+ --x-size-border-width-suggestion-default
4152
3943
  );
4153
- --x-number-font-weight-suggestion-matching-part-default-curated: var(
4154
- --x-number-font-weight-suggestion-matching-part-default
3944
+ --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
3945
+ --x-size-border-radius-top-left-suggestion-group-default: var(
3946
+ --x-size-border-radius-suggestion-default
4155
3947
  );
4156
- --x-font-family-suggestion-default-matching-curated: var(
4157
- --x-font-family-suggestion-default-matching
3948
+ --x-size-border-radius-top-right-suggestion-group-default: var(
3949
+ --x-size-border-radius-suggestion-default
4158
3950
  );
4159
- --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
4160
- --x-size-line-height-suggestion-default-matching-curated: var(
4161
- --x-size-line-height-suggestion-default-matching
3951
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(
3952
+ --x-size-border-radius-suggestion-default
4162
3953
  );
4163
- --x-number-font-weight-suggestion-default-matching-curated: var(
4164
- --x-number-font-weight-suggestion-default-matching
3954
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(
3955
+ --x-size-border-radius-suggestion-default
4165
3956
  );
3957
+ --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
3958
+ --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
3959
+ --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
3960
+ --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
4166
3961
  }
4167
3962
  :root {
4168
3963
  --x-string-align-items-suggestion-default: center;
@@ -4499,6 +4294,122 @@
4499
4294
  --x-size-padding-row-05: var(--x-size-base-05);
4500
4295
  --x-size-padding-row-06: var(--x-size-base-06);
4501
4296
  }
4297
+ :root {
4298
+ --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
4299
+ --x-color-text-suggestion-group-matching-part-default: var(
4300
+ --x-color-text-suggestion-matching-part-default
4301
+ );
4302
+ --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
4303
+ --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
4304
+ --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
4305
+ --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
4306
+ --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
4307
+ --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
4308
+ --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
4309
+ --x-size-border-width-suggestion-group-default: 0;
4310
+ --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
4311
+ --x-size-border-width-right-suggestion-group-default: var(
4312
+ --x-size-border-width-suggestion-default
4313
+ );
4314
+ --x-size-border-width-bottom-suggestion-group-default: var(
4315
+ --x-size-border-width-suggestion-default
4316
+ );
4317
+ --x-size-border-width-left-suggestion-group-default: var(
4318
+ --x-size-border-width-suggestion-default
4319
+ );
4320
+ --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
4321
+ --x-size-border-radius-top-left-suggestion-group-default: var(
4322
+ --x-size-border-radius-suggestion-default
4323
+ );
4324
+ --x-size-border-radius-top-right-suggestion-group-default: var(
4325
+ --x-size-border-radius-suggestion-default
4326
+ );
4327
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(
4328
+ --x-size-border-radius-suggestion-default
4329
+ );
4330
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(
4331
+ --x-size-border-radius-suggestion-default
4332
+ );
4333
+ --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
4334
+ --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
4335
+ --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
4336
+ --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
4337
+ }
4338
+
4339
+ [dir="ltr"] .x-suggestion-group {
4340
+ padding-left: var(--x-size-padding-left-suggestion-group-default);
4341
+ }
4342
+
4343
+ [dir="rtl"] .x-suggestion-group {
4344
+ padding-right: var(--x-size-padding-left-suggestion-group-default);
4345
+ }
4346
+
4347
+ [dir="ltr"] .x-suggestion-group {
4348
+ padding-right: var(--x-size-padding-right-suggestion-group-default);
4349
+ }
4350
+
4351
+ [dir="rtl"] .x-suggestion-group {
4352
+ padding-left: var(--x-size-padding-right-suggestion-group-default);
4353
+ }
4354
+
4355
+ [dir="ltr"] .x-suggestion-group {
4356
+ border-left-width: var(--x-size-border-width-left-suggestion-group-default);
4357
+ }
4358
+
4359
+ [dir="rtl"] .x-suggestion-group {
4360
+ border-right-width: var(--x-size-border-width-left-suggestion-group-default);
4361
+ }
4362
+
4363
+ [dir="ltr"] .x-suggestion-group {
4364
+ border-right-width: var(--x-size-border-width-right-suggestion-group-default);
4365
+ }
4366
+
4367
+ [dir="rtl"] .x-suggestion-group {
4368
+ border-left-width: var(--x-size-border-width-right-suggestion-group-default);
4369
+ }
4370
+
4371
+ .x-suggestion-group {
4372
+ display: flex;
4373
+ flex-flow: row nowrap;
4374
+ box-sizing: border-box;
4375
+ background-color: var(--x-color-background-suggestion-group-default);
4376
+ color: var(--x-color-text-suggestion-group-default);
4377
+ border-color: var(--x-color-border-suggestion-group-default);
4378
+ font-family: var(--x-font-family-suggestion-group-default);
4379
+ font-size: var(--x-size-font-suggestion-group-default);
4380
+ line-height: var(--x-size-line-height-suggestion-group-default);
4381
+ font-weight: var(--x-number-font-weight-suggestion-group-default);
4382
+ cursor: pointer;
4383
+ padding-top: var(--x-size-padding-top-suggestion-group-default);
4384
+ padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
4385
+ gap: var(--x-size-gap-suggestion-group-default);
4386
+ border-style: solid;
4387
+ border-top-width: var(--x-size-border-width-top-suggestion-group-default);
4388
+ border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
4389
+ border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
4390
+ }
4391
+ @media not all and (min-resolution: 0.001dpcm) {
4392
+ .x-suggestion-group {
4393
+ gap: 0;
4394
+ }
4395
+ .x-suggestion-group > *:not(:last-child) {
4396
+ margin-right: var(--x-size-gap-suggestion-group-default);
4397
+ }
4398
+ }
4399
+ .x-suggestion-group .x-suggestion {
4400
+ padding: 0;
4401
+ flex: 1 1 auto;
4402
+ border: none;
4403
+ }
4404
+ .x-suggestion-group .x-button {
4405
+ --x-color-background-button-default: transparent;
4406
+ --x-color-border-button-default: transparent;
4407
+ --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
4408
+ --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
4409
+ --x-size-padding-right-button-default: 0;
4410
+ --x-size-padding-left-button-default: 0;
4411
+ border: none;
4412
+ }
4502
4413
  /* @deprecated */
4503
4414
  :root {
4504
4415
  --x-size-padding-row-02: var(--x-size-base-02);
@@ -4550,28 +4461,6 @@
4550
4461
  --x-size-gap-row-19: var(--x-size-base-19);
4551
4462
  --x-size-gap-row-20: var(--x-size-base-20);
4552
4463
  }
4553
- :root {
4554
- --x-size-gap-row-01: var(--x-size-base-01);
4555
- --x-size-gap-row-02: var(--x-size-base-02);
4556
- --x-size-gap-row-03: var(--x-size-base-03);
4557
- --x-size-gap-row-04: var(--x-size-base-04);
4558
- --x-size-gap-row-05: var(--x-size-base-05);
4559
- --x-size-gap-row-06: var(--x-size-base-06);
4560
- --x-size-gap-row-07: var(--x-size-base-07);
4561
- --x-size-gap-row-08: var(--x-size-base-08);
4562
- --x-size-gap-row-09: var(--x-size-base-09);
4563
- --x-size-gap-row-10: var(--x-size-base-10);
4564
- --x-size-gap-row-11: var(--x-size-base-11);
4565
- --x-size-gap-row-12: var(--x-size-base-12);
4566
- --x-size-gap-row-13: var(--x-size-base-13);
4567
- --x-size-gap-row-14: var(--x-size-base-14);
4568
- --x-size-gap-row-15: var(--x-size-base-15);
4569
- --x-size-gap-row-16: var(--x-size-base-16);
4570
- --x-size-gap-row-17: var(--x-size-base-17);
4571
- --x-size-gap-row-18: var(--x-size-base-18);
4572
- --x-size-gap-row-19: var(--x-size-base-19);
4573
- --x-size-gap-row-20: var(--x-size-base-20);
4574
- }
4575
4464
 
4576
4465
  .x-row--gap-01 {
4577
4466
  --x-size-gap-row: var(--x-size-gap-row-01);
@@ -4652,6 +4541,28 @@
4652
4541
  .x-row--gap-20 {
4653
4542
  --x-size-gap-row: var(--x-size-gap-row-20);
4654
4543
  }
4544
+ :root {
4545
+ --x-size-gap-row-01: var(--x-size-base-01);
4546
+ --x-size-gap-row-02: var(--x-size-base-02);
4547
+ --x-size-gap-row-03: var(--x-size-base-03);
4548
+ --x-size-gap-row-04: var(--x-size-base-04);
4549
+ --x-size-gap-row-05: var(--x-size-base-05);
4550
+ --x-size-gap-row-06: var(--x-size-base-06);
4551
+ --x-size-gap-row-07: var(--x-size-base-07);
4552
+ --x-size-gap-row-08: var(--x-size-base-08);
4553
+ --x-size-gap-row-09: var(--x-size-base-09);
4554
+ --x-size-gap-row-10: var(--x-size-base-10);
4555
+ --x-size-gap-row-11: var(--x-size-base-11);
4556
+ --x-size-gap-row-12: var(--x-size-base-12);
4557
+ --x-size-gap-row-13: var(--x-size-base-13);
4558
+ --x-size-gap-row-14: var(--x-size-base-14);
4559
+ --x-size-gap-row-15: var(--x-size-base-15);
4560
+ --x-size-gap-row-16: var(--x-size-base-16);
4561
+ --x-size-gap-row-17: var(--x-size-base-17);
4562
+ --x-size-gap-row-18: var(--x-size-base-18);
4563
+ --x-size-gap-row-19: var(--x-size-base-19);
4564
+ --x-size-gap-row-20: var(--x-size-base-20);
4565
+ }
4655
4566
  :root {
4656
4567
  --x-size-gap-row: 0;
4657
4568
  --x-size-padding-row: 0;
@@ -5334,79 +5245,34 @@
5334
5245
  }
5335
5246
  .x-option-list__item:last-child {
5336
5247
  --x-size-border-width-option-list-item-default: 0;
5337
- --x-size-border-width-top-option-list-item-default: 0;
5338
- --x-size-border-width-right-option-list-item-default: 0;
5339
- --x-size-border-width-bottom-option-list-item-default: 0;
5340
- --x-size-border-width-left-option-list-item-default: 0;
5341
- }
5342
- .x-option-list__item .x-button {
5343
- --x-color-background-button-default: var(--x-color-background-option-list-button-default);
5344
- --x-color-border-button-default: var(--x-color-border-option-list-button-default);
5345
- --x-color-text-button-default: var(--x-color-text-option-list-button-default);
5346
- min-height: auto;
5347
- --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
5348
- --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
5349
- --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
5350
- --x-size-padding-bottom-button-default: var(
5351
- --x-size-padding-bottom-option-list-button-default
5352
- );
5353
- --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
5354
- --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
5355
- --x-size-font-button-default: var(--x-size-font-option-list-button-default);
5356
- }
5357
- .x-option-list__item .x-button:hover {
5358
- --x-color-background-button-default: var(
5359
- --x-color-background-option-list-button-default-hover
5360
- );
5361
- --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
5362
- --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
5363
- -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5364
- text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5365
- }
5366
- :root {
5367
- --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5368
- --x-color-text-option-list-button-bottom-selected-hover: var(
5369
- --x-color-text-option-list-button-bottom-selected
5370
- );
5371
- --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
5372
- --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
5373
- --x-color-border-option-list-item-bottom: transparent;
5374
- --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5375
- --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5376
- --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5377
- --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5378
- --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
5379
- --x-color-border-top-option-list-item-bottom-selected: var(
5380
- --x-color-border-option-list-item-bottom
5381
- );
5382
- --x-color-border-right-option-list-item-bottom-selected: var(
5383
- --x-color-border-option-list-item-bottom
5384
- );
5385
- --x-color-border-bottom-option-list-item-bottom-selected: var(
5386
- --x-color-border-option-list-item-bottom-selected
5387
- );
5388
- --x-color-border-left-option-list-item-bottom-selected: var(
5389
- --x-color-border-option-list-item-bottom
5390
- );
5391
- --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
5392
- --x-size-border-width-top-option-list-item-bottom: 0;
5393
- --x-size-border-width-right-option-list-item-bottom: 0;
5394
- --x-size-border-width-bottom-option-list-item-bottom: var(
5395
- --x-size-border-width-option-list-item-bottom
5396
- );
5397
- --x-size-border-width-left-option-list-item-bottom: 0;
5398
- --x-size-border-width-top-option-list-item-bottom-selected: 0;
5399
- --x-size-border-width-right-option-list-item-bottom-selected: 0;
5400
- --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5401
- --x-size-border-width-option-list-item-bottom
5248
+ --x-size-border-width-top-option-list-item-default: 0;
5249
+ --x-size-border-width-right-option-list-item-default: 0;
5250
+ --x-size-border-width-bottom-option-list-item-default: 0;
5251
+ --x-size-border-width-left-option-list-item-default: 0;
5252
+ }
5253
+ .x-option-list__item .x-button {
5254
+ --x-color-background-button-default: var(--x-color-background-option-list-button-default);
5255
+ --x-color-border-button-default: var(--x-color-border-option-list-button-default);
5256
+ --x-color-text-button-default: var(--x-color-text-option-list-button-default);
5257
+ min-height: auto;
5258
+ --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
5259
+ --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
5260
+ --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
5261
+ --x-size-padding-bottom-button-default: var(
5262
+ --x-size-padding-bottom-option-list-button-default
5402
5263
  );
5403
- --x-size-border-width-left-option-list-item-bottom-selected: 0;
5404
- --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5405
- --x-font-decoration-option-list-button-bottom-hover: none;
5406
- --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5407
- --x-number-font-weight-option-list-button-bottom-selected: var(
5408
- --x-number-font-weight-base-regular
5264
+ --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
5265
+ --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
5266
+ --x-size-font-button-default: var(--x-size-font-option-list-button-default);
5267
+ }
5268
+ .x-option-list__item .x-button:hover {
5269
+ --x-color-background-button-default: var(
5270
+ --x-color-background-option-list-button-default-hover
5409
5271
  );
5272
+ --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
5273
+ --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
5274
+ -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5275
+ text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5410
5276
  }
5411
5277
  :root {
5412
5278
  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
@@ -5539,10 +5405,64 @@
5539
5405
  --x-size-border-width-bottom-option-list-item-default: inherit;
5540
5406
  --x-size-border-width-left-option-list-item-default: inherit;
5541
5407
  }
5408
+ :root {
5409
+ --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5410
+ --x-color-text-option-list-button-bottom-selected-hover: var(
5411
+ --x-color-text-option-list-button-bottom-selected
5412
+ );
5413
+ --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
5414
+ --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
5415
+ --x-color-border-option-list-item-bottom: transparent;
5416
+ --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5417
+ --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5418
+ --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5419
+ --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5420
+ --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
5421
+ --x-color-border-top-option-list-item-bottom-selected: var(
5422
+ --x-color-border-option-list-item-bottom
5423
+ );
5424
+ --x-color-border-right-option-list-item-bottom-selected: var(
5425
+ --x-color-border-option-list-item-bottom
5426
+ );
5427
+ --x-color-border-bottom-option-list-item-bottom-selected: var(
5428
+ --x-color-border-option-list-item-bottom-selected
5429
+ );
5430
+ --x-color-border-left-option-list-item-bottom-selected: var(
5431
+ --x-color-border-option-list-item-bottom
5432
+ );
5433
+ --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
5434
+ --x-size-border-width-top-option-list-item-bottom: 0;
5435
+ --x-size-border-width-right-option-list-item-bottom: 0;
5436
+ --x-size-border-width-bottom-option-list-item-bottom: var(
5437
+ --x-size-border-width-option-list-item-bottom
5438
+ );
5439
+ --x-size-border-width-left-option-list-item-bottom: 0;
5440
+ --x-size-border-width-top-option-list-item-bottom-selected: 0;
5441
+ --x-size-border-width-right-option-list-item-bottom-selected: 0;
5442
+ --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5443
+ --x-size-border-width-option-list-item-bottom
5444
+ );
5445
+ --x-size-border-width-left-option-list-item-bottom-selected: 0;
5446
+ --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5447
+ --x-font-decoration-option-list-button-bottom-hover: none;
5448
+ --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5449
+ --x-number-font-weight-option-list-button-bottom-selected: var(
5450
+ --x-number-font-weight-base-regular
5451
+ );
5452
+ }
5453
+ :root {
5454
+ --x-modal-overlay-color: rgb(0, 0, 0);
5455
+ --x-modal-overlay-opacity: 0.7;
5456
+ }
5542
5457
  :root {
5543
5458
  --x-modal-overlay-color: rgb(0, 0, 0);
5544
5459
  --x-modal-overlay-opacity: 0.7;
5545
5460
  }
5461
+
5462
+ .x-modal__overlay {
5463
+ background-color: var(--x-modal-overlay-color) !important;
5464
+ opacity: var(--x-modal-overlay-opacity) !important;
5465
+ }
5546
5466
  :root {
5547
5467
  --x-string-justify-message-default: center;
5548
5468
  --x-size-gap-message-default: var(--x-size-base-03);
@@ -5564,15 +5484,6 @@
5564
5484
  --x-size-font-message-default: var(--x-size-font-title3);
5565
5485
  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5566
5486
  }
5567
- :root {
5568
- --x-modal-overlay-color: rgb(0, 0, 0);
5569
- --x-modal-overlay-opacity: 0.7;
5570
- }
5571
-
5572
- .x-modal__overlay {
5573
- background-color: var(--x-modal-overlay-color) !important;
5574
- opacity: var(--x-modal-overlay-opacity) !important;
5575
- }
5576
5487
  :root {
5577
5488
  --x-string-justify-message-default: center;
5578
5489
  --x-size-gap-message-default: var(--x-size-base-03);
@@ -6022,28 +5933,6 @@
6022
5933
  --x-size-gap-list-19: var(--x-size-base-19);
6023
5934
  --x-size-gap-list-20: var(--x-size-base-20);
6024
5935
  }
6025
- :root {
6026
- --x-size-gap-list-01: var(--x-size-base-01);
6027
- --x-size-gap-list-02: var(--x-size-base-02);
6028
- --x-size-gap-list-03: var(--x-size-base-03);
6029
- --x-size-gap-list-04: var(--x-size-base-04);
6030
- --x-size-gap-list-05: var(--x-size-base-05);
6031
- --x-size-gap-list-06: var(--x-size-base-06);
6032
- --x-size-gap-list-07: var(--x-size-base-07);
6033
- --x-size-gap-list-08: var(--x-size-base-08);
6034
- --x-size-gap-list-09: var(--x-size-base-09);
6035
- --x-size-gap-list-10: var(--x-size-base-10);
6036
- --x-size-gap-list-11: var(--x-size-base-11);
6037
- --x-size-gap-list-12: var(--x-size-base-12);
6038
- --x-size-gap-list-13: var(--x-size-base-13);
6039
- --x-size-gap-list-14: var(--x-size-base-14);
6040
- --x-size-gap-list-15: var(--x-size-base-15);
6041
- --x-size-gap-list-16: var(--x-size-base-16);
6042
- --x-size-gap-list-17: var(--x-size-base-17);
6043
- --x-size-gap-list-18: var(--x-size-base-18);
6044
- --x-size-gap-list-19: var(--x-size-base-19);
6045
- --x-size-gap-list-20: var(--x-size-base-20);
6046
- }
6047
5936
 
6048
5937
  .x-list--gap-01.x-list {
6049
5938
  gap: var(--x-size-gap-list-01);
@@ -6544,6 +6433,28 @@
6544
6433
  margin-bottom: var(--x-size-gap-list-20);
6545
6434
  }
6546
6435
  }
6436
+ :root {
6437
+ --x-size-gap-list-01: var(--x-size-base-01);
6438
+ --x-size-gap-list-02: var(--x-size-base-02);
6439
+ --x-size-gap-list-03: var(--x-size-base-03);
6440
+ --x-size-gap-list-04: var(--x-size-base-04);
6441
+ --x-size-gap-list-05: var(--x-size-base-05);
6442
+ --x-size-gap-list-06: var(--x-size-base-06);
6443
+ --x-size-gap-list-07: var(--x-size-base-07);
6444
+ --x-size-gap-list-08: var(--x-size-base-08);
6445
+ --x-size-gap-list-09: var(--x-size-base-09);
6446
+ --x-size-gap-list-10: var(--x-size-base-10);
6447
+ --x-size-gap-list-11: var(--x-size-base-11);
6448
+ --x-size-gap-list-12: var(--x-size-base-12);
6449
+ --x-size-gap-list-13: var(--x-size-base-13);
6450
+ --x-size-gap-list-14: var(--x-size-base-14);
6451
+ --x-size-gap-list-15: var(--x-size-base-15);
6452
+ --x-size-gap-list-16: var(--x-size-base-16);
6453
+ --x-size-gap-list-17: var(--x-size-base-17);
6454
+ --x-size-gap-list-18: var(--x-size-base-18);
6455
+ --x-size-gap-list-19: var(--x-size-base-19);
6456
+ --x-size-gap-list-20: var(--x-size-base-20);
6457
+ }
6547
6458
  :root {
6548
6459
  --x-string-flow-list: column nowrap;
6549
6460
  --x-size-padding-list: 0;
@@ -6834,6 +6745,49 @@
6834
6745
  );
6835
6746
  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6836
6747
  }
6748
+ :root {
6749
+ --x-color-background-input-group-default: var(--x-color-background-input-default);
6750
+ --x-color-border-input-group-default: var(--x-color-border-input-default);
6751
+ --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
6752
+ --x-color-text-input-group-default: var(--x-color-text-input-default);
6753
+ --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
6754
+ --x-size-height-input-group-default: var(--x-size-height-input-default);
6755
+ --x-size-gap-input-group-default: var(--x-size-base-03);
6756
+ --x-size-padding-left-input-group-default: var(--x-size-base-06);
6757
+ --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
6758
+ --x-size-padding-input-group-default-action: var(--x-size-base-03);
6759
+ --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
6760
+ --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
6761
+ --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
6762
+ --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
6763
+ --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
6764
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
6765
+ --x-size-border-radius-top-left-input-group-default: var(
6766
+ --x-size-border-radius-input-group-default
6767
+ );
6768
+ --x-size-border-radius-top-right-input-group-default: var(
6769
+ --x-size-border-radius-input-group-default
6770
+ );
6771
+ --x-size-border-radius-bottom-right-input-group-default: var(
6772
+ --x-size-border-radius-input-group-default
6773
+ );
6774
+ --x-size-border-radius-bottom-left-input-group-default: var(
6775
+ --x-size-border-radius-input-group-default
6776
+ );
6777
+ --x-font-family-input-group-default: var(--x-font-family-input-default);
6778
+ --x-size-font-input-group-default: var(--x-size-font-input-default);
6779
+ --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
6780
+ --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
6781
+ --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
6782
+ --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
6783
+ --x-size-line-height-input-group-placeholder-default: var(
6784
+ --x-size-line-height-input-group-default
6785
+ );
6786
+ --x-number-font-weight-input-group-placeholder-default: var(
6787
+ --x-number-font-weight-input-group-default
6788
+ );
6789
+ --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6790
+ }
6837
6791
 
6838
6792
  [dir="ltr"] .x-input-group {
6839
6793
  border-right-width: var(--x-size-border-width-right-input-group-default);
@@ -6968,49 +6922,6 @@
6968
6922
  [dir="rtl"] .x-input-group > .x-input-group__action:last-child {
6969
6923
  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
6970
6924
  }
6971
- :root {
6972
- --x-color-background-input-group-default: var(--x-color-background-input-default);
6973
- --x-color-border-input-group-default: var(--x-color-border-input-default);
6974
- --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
6975
- --x-color-text-input-group-default: var(--x-color-text-input-default);
6976
- --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
6977
- --x-size-height-input-group-default: var(--x-size-height-input-default);
6978
- --x-size-gap-input-group-default: var(--x-size-base-03);
6979
- --x-size-padding-left-input-group-default: var(--x-size-base-06);
6980
- --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
6981
- --x-size-padding-input-group-default-action: var(--x-size-base-03);
6982
- --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
6983
- --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
6984
- --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
6985
- --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
6986
- --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
6987
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
6988
- --x-size-border-radius-top-left-input-group-default: var(
6989
- --x-size-border-radius-input-group-default
6990
- );
6991
- --x-size-border-radius-top-right-input-group-default: var(
6992
- --x-size-border-radius-input-group-default
6993
- );
6994
- --x-size-border-radius-bottom-right-input-group-default: var(
6995
- --x-size-border-radius-input-group-default
6996
- );
6997
- --x-size-border-radius-bottom-left-input-group-default: var(
6998
- --x-size-border-radius-input-group-default
6999
- );
7000
- --x-font-family-input-group-default: var(--x-font-family-input-default);
7001
- --x-size-font-input-group-default: var(--x-size-font-input-default);
7002
- --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
7003
- --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
7004
- --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
7005
- --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
7006
- --x-size-line-height-input-group-placeholder-default: var(
7007
- --x-size-line-height-input-group-default
7008
- );
7009
- --x-number-font-weight-input-group-placeholder-default: var(
7010
- --x-number-font-weight-input-group-default
7011
- );
7012
- --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
7013
- }
7014
6925
  :root {
7015
6926
  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7016
6927
  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
@@ -7139,34 +7050,6 @@
7139
7050
  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7140
7051
  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7141
7052
  }
7142
- :root {
7143
- --x-color-background-input-default: var(--x-color-base-neutral-100);
7144
- --x-color-border-input-default: var(--x-color-base-neutral-70);
7145
- --x-color-border-input-default-focus: var(--x-color-base-lead);
7146
- --x-color-text-input-default: var(--x-color-text-default);
7147
- --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7148
- --x-size-border-width-input-default: var(--x-size-border-width-base);
7149
- --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7150
- --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7151
- --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7152
- --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7153
- --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7154
- --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7155
- --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7156
- --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7157
- --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7158
- --x-size-height-input-default: var(--x-size-base-07);
7159
- --x-size-padding-right-input-default: var(--x-size-base-04);
7160
- --x-size-padding-left-input-default: var(--x-size-base-04);
7161
- --x-font-family-input-default: var(--x-font-family-text);
7162
- --x-size-font-input-default: var(--x-size-font-text);
7163
- --x-size-line-height-input-default: var(--x-size-line-height-text);
7164
- --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7165
- --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7166
- --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7167
- --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7168
- --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7169
- }
7170
7053
 
7171
7054
  [dir="ltr"] .x-input {
7172
7055
  padding-left: var(--x-size-padding-left-input-default);
@@ -7254,6 +7137,34 @@
7254
7137
  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7255
7138
  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7256
7139
  }
7140
+ :root {
7141
+ --x-color-background-input-default: var(--x-color-base-neutral-100);
7142
+ --x-color-border-input-default: var(--x-color-base-neutral-70);
7143
+ --x-color-border-input-default-focus: var(--x-color-base-lead);
7144
+ --x-color-text-input-default: var(--x-color-text-default);
7145
+ --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7146
+ --x-size-border-width-input-default: var(--x-size-border-width-base);
7147
+ --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7148
+ --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7149
+ --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7150
+ --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7151
+ --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7152
+ --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7153
+ --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7154
+ --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7155
+ --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7156
+ --x-size-height-input-default: var(--x-size-base-07);
7157
+ --x-size-padding-right-input-default: var(--x-size-base-04);
7158
+ --x-size-padding-left-input-default: var(--x-size-base-04);
7159
+ --x-font-family-input-default: var(--x-font-family-text);
7160
+ --x-size-font-input-default: var(--x-size-font-text);
7161
+ --x-size-line-height-input-default: var(--x-size-line-height-text);
7162
+ --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7163
+ --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7164
+ --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7165
+ --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7166
+ --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7167
+ }
7257
7168
  :root {
7258
7169
  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7259
7170
  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
@@ -7291,15 +7202,19 @@
7291
7202
  --x-size-width-icon-s: var(--x-size-base-03);
7292
7203
  --x-size-height-icon-s: var(--x-size-base-03);
7293
7204
  }
7294
- :root {
7295
- --x-size-width-icon-s: var(--x-size-base-03);
7296
- --x-size-height-icon-s: var(--x-size-base-03);
7297
- }
7298
7205
 
7299
7206
  .x-icon--s {
7300
7207
  --x-size-width-icon-default: var(--x-size-width-icon-s);
7301
7208
  --x-size-height-icon-default: var(--x-size-height-icon-s);
7302
7209
  }
7210
+ :root {
7211
+ --x-size-width-icon-s: var(--x-size-base-03);
7212
+ --x-size-height-icon-s: var(--x-size-base-03);
7213
+ }
7214
+ :root {
7215
+ --x-size-width-icon-m: var(--x-size-base-05);
7216
+ --x-size-height-icon-m: var(--x-size-base-05);
7217
+ }
7303
7218
  :root {
7304
7219
  --x-size-width-icon-m: var(--x-size-base-05);
7305
7220
  --x-size-height-icon-m: var(--x-size-base-05);
@@ -7309,10 +7224,6 @@
7309
7224
  --x-size-width-icon-default: var(--x-size-width-icon-m);
7310
7225
  --x-size-height-icon-default: var(--x-size-height-icon-m);
7311
7226
  }
7312
- :root {
7313
- --x-size-width-icon-m: var(--x-size-base-05);
7314
- --x-size-height-icon-m: var(--x-size-base-05);
7315
- }
7316
7227
  :root {
7317
7228
  --x-size-width-icon-l: var(--x-size-base-06);
7318
7229
  --x-size-height-icon-l: var(--x-size-base-06);
@@ -7335,6 +7246,12 @@
7335
7246
  --x-string-stroke-linejoin-icon-default: mitter;
7336
7247
  --x-size-stroke-width-icon-default: 1px;
7337
7248
  }
7249
+ .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7250
+ .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7251
+ .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7252
+ .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7253
+ margin-left: auto;
7254
+ }
7338
7255
  :root {
7339
7256
  --x-color-stroke-icon-default: currentColor;
7340
7257
  --x-color-fill-icon-default: none;
@@ -7370,11 +7287,6 @@
7370
7287
  --x-size-gap-grid: var(--x-size-base-03);
7371
7288
  --x-size-min-width-grid-item: 150px;
7372
7289
  }
7373
- :root {
7374
- --x-size-padding-grid: 0;
7375
- --x-size-gap-grid: var(--x-size-base-03);
7376
- --x-size-min-width-grid-item: 150px;
7377
- }
7378
7290
 
7379
7291
  .x-grid-list {
7380
7292
  margin: 0;
@@ -7396,12 +7308,6 @@
7396
7308
  .x-grid-list--cols-auto .x-grid-list__item {
7397
7309
  min-width: var(--x-size-min-width-grid-item);
7398
7310
  }
7399
- .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7400
- .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7401
- .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7402
- .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7403
- margin-left: auto;
7404
- }
7405
7311
  :root {
7406
7312
  --x-size-margin-filter-children: 0;
7407
7313
  --x-size-padding-top-filter-children: 0;
@@ -7409,6 +7315,11 @@
7409
7315
  --x-size-padding-bottom-filter-children: 0;
7410
7316
  --x-size-padding-left-filter-children: var(--x-size-base-05);
7411
7317
  }
7318
+ :root {
7319
+ --x-size-padding-grid: 0;
7320
+ --x-size-gap-grid: var(--x-size-base-03);
7321
+ --x-size-min-width-grid-item: 150px;
7322
+ }
7412
7323
  :root {
7413
7324
  --x-size-margin-filter-children: 0;
7414
7325
  --x-size-padding-top-filter-children: 0;
@@ -7635,6 +7546,14 @@
7635
7546
  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7636
7547
  --x-size-border-width-left-facet-header-line: 0;
7637
7548
  }
7549
+ :root {
7550
+ --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
7551
+ --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
7552
+ --x-size-border-width-top-facet-header-line: 0;
7553
+ --x-size-border-width-right-facet-header-line: 0;
7554
+ --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7555
+ --x-size-border-width-left-facet-header-line: 0;
7556
+ }
7638
7557
 
7639
7558
  .x-facet--line.x-facet,
7640
7559
  .x-facet--line .x-facet {
@@ -7823,6 +7742,18 @@
7823
7742
  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7824
7743
  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7825
7744
  }
7745
+ :root {
7746
+ --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
7747
+ --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
7748
+ --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
7749
+ --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
7750
+ --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
7751
+ --x-size-padding-facet-header-card: var(--x-size-base-03);
7752
+ --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
7753
+ --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
7754
+ --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7755
+ --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7756
+ }
7826
7757
 
7827
7758
  .x-facet--card.x-facet,
7828
7759
  .x-facet--card .x-facet {
@@ -7837,18 +7768,6 @@
7837
7768
  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-card);
7838
7769
  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-card);
7839
7770
  }
7840
- :root {
7841
- --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
7842
- --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
7843
- --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
7844
- --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
7845
- --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
7846
- --x-size-padding-facet-header-card: var(--x-size-base-03);
7847
- --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
7848
- --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
7849
- --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7850
- --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7851
- }
7852
7771
  :root {
7853
7772
  --x-size-width-dropdown-xl: 282px;
7854
7773
  }
@@ -8100,6 +8019,19 @@
8100
8019
  --x-string-overflow-dropdown-toggle-default: hidden;
8101
8020
  --x-string-overflow-dropdown-list-default: hidden;
8102
8021
  }
8022
+ :root {
8023
+ --x-size-gap-dropdown-card: var(--x-size-base-03);
8024
+ --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8025
+ --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8026
+ --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8027
+ --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8028
+ --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8029
+ --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8030
+ --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8031
+ --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8032
+ --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8033
+ --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8034
+ }
8103
8035
  :root {
8104
8036
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8105
8037
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8355,19 +8287,6 @@
8355
8287
  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8356
8288
  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8357
8289
  }
8358
- :root {
8359
- --x-size-gap-dropdown-card: var(--x-size-base-03);
8360
- --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8361
- --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8362
- --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8363
- --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8364
- --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8365
- --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8366
- --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8367
- --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8368
- --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8369
- --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8370
- }
8371
8290
 
8372
8291
  .x-dropdown--card {
8373
8292
  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
@@ -8467,16 +8386,6 @@
8467
8386
  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8468
8387
  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8469
8388
  }
8470
- :root {
8471
- --x-color-background-button-primary: var(--x-color-background-button-default);
8472
- --x-color-border-button-primary: var(--x-color-border-button-default);
8473
- --x-color-text-button-primary: var(--x-color-text-button-default);
8474
- --x-size-border-width-button-primary: var(--x-size-border-width-base);
8475
- --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
8476
- --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
8477
- --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8478
- --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8479
- }
8480
8389
  :root {
8481
8390
  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8482
8391
  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
@@ -8512,6 +8421,16 @@
8512
8421
  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8513
8422
  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8514
8423
  }
8424
+ :root {
8425
+ --x-color-background-button-primary: var(--x-color-background-button-default);
8426
+ --x-color-border-button-primary: var(--x-color-border-button-default);
8427
+ --x-color-text-button-primary: var(--x-color-text-button-default);
8428
+ --x-size-border-width-button-primary: var(--x-size-border-width-base);
8429
+ --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
8430
+ --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
8431
+ --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8432
+ --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8433
+ }
8515
8434
 
8516
8435
  .x-button--primary.x-button,
8517
8436
  .x-button--primary .x-button {
@@ -8694,16 +8613,6 @@
8694
8613
  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8695
8614
  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8696
8615
  }
8697
- :root {
8698
- --x-color-background-badge-default: var(--x-color-base-neutral-10);
8699
- --x-color-text-badge-default: var(--x-color-base-neutral-100);
8700
- --x-color-border-badge-default: var(--x-color-base-neutral-10);
8701
- --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8702
- --x-size-border-width-badge-default: 0;
8703
- --x-size-width-badge-default: 1.5em;
8704
- --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8705
- --x-size-font-badge-default: var(--x-size-font-base-xs);
8706
- }
8707
8616
  :root {
8708
8617
  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8709
8618
  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
@@ -8736,6 +8645,16 @@
8736
8645
  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8737
8646
  --x-size-font-badge-default: var(--x-size-font-base-xs);
8738
8647
  }
8648
+ :root {
8649
+ --x-color-background-badge-default: var(--x-color-base-neutral-10);
8650
+ --x-color-text-badge-default: var(--x-color-base-neutral-100);
8651
+ --x-color-border-badge-default: var(--x-color-base-neutral-10);
8652
+ --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8653
+ --x-size-border-width-badge-default: 0;
8654
+ --x-size-width-badge-default: 1.5em;
8655
+ --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8656
+ --x-size-font-badge-default: var(--x-size-font-base-xs);
8657
+ }
8739
8658
 
8740
8659
  [dir="ltr"] .x-badge {
8741
8660
  right: calc(var(--x-size-width-badge-default) / 4);
@@ -8818,10 +8737,92 @@
8818
8737
  --x-size-border-width-base: 1px;
8819
8738
  }
8820
8739
  :root {
8821
- --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
8822
- --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
8823
- --x-size-border-width-top-facet-header-line: 0;
8824
- --x-size-border-width-right-facet-header-line: 0;
8825
- --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
8826
- --x-size-border-width-left-facet-header-line: 0;
8827
- }
8740
+ --x-string-align-items-suggestion-default: center;
8741
+ --x-color-text-suggestion-default: var(--x-color-text-default);
8742
+ --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
8743
+ --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
8744
+ --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
8745
+ --x-color-background-suggestion-default: transparent;
8746
+ --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
8747
+ --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
8748
+ --x-color-text-suggestion-matching-part-default-curated: var(
8749
+ --x-color-text-suggestion-matching-part-default
8750
+ );
8751
+ --x-color-text-suggestion-default-matching-curated: var(
8752
+ --x-color-text-suggestion-default-matching
8753
+ );
8754
+ --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
8755
+ --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
8756
+ --x-size-padding-top-suggestion-default: var(--x-size-base-01);
8757
+ --x-size-padding-right-suggestion-default: 0;
8758
+ --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
8759
+ --x-size-padding-left-suggestion-default: 0;
8760
+ --x-size-gap-suggestion-default: var(--x-size-base-03);
8761
+ --x-size-border-width-suggestion-default: 0;
8762
+ --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
8763
+ --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
8764
+ --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
8765
+ --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
8766
+ --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
8767
+ --x-size-border-radius-top-left-suggestion-default: var(
8768
+ --x-size-border-radius-suggestion-default
8769
+ );
8770
+ --x-size-border-radius-top-right-suggestion-default: var(
8771
+ --x-size-border-radius-suggestion-default
8772
+ );
8773
+ --x-size-border-radius-bottom-right-suggestion-default: var(
8774
+ --x-size-border-radius-suggestion-default
8775
+ );
8776
+ --x-size-border-radius-bottom-left-suggestion-default: var(
8777
+ --x-size-border-radius-suggestion-default
8778
+ );
8779
+ --x-font-family-suggestion-default: var(--x-font-family-text);
8780
+ --x-size-font-suggestion-default: var(--x-size-font-text);
8781
+ --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
8782
+ --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
8783
+ --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
8784
+ --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
8785
+ --x-size-line-height-suggestion-matching-part-default: var(
8786
+ --x-size-line-height-suggestion-default
8787
+ );
8788
+ --x-number-font-weight-suggestion-matching-part-default: var(
8789
+ --x-number-font-weight-suggestion-default
8790
+ );
8791
+ --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
8792
+ --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
8793
+ --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
8794
+ --x-number-font-weight-suggestion-default-matching: var(
8795
+ --x-number-font-weight-suggestion-default
8796
+ );
8797
+ --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
8798
+ --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
8799
+ --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
8800
+ --x-number-font-weight-suggestion-filter-default: var(--x-number-font-weight-suggestion-default);
8801
+ --x-text-transform-suggestion-filter-default: none;
8802
+ --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
8803
+ --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
8804
+ --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
8805
+ --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
8806
+ --x-font-family-suggestion-matching-part-default-curated: var(
8807
+ --x-font-family-suggestion-matching-part-default
8808
+ );
8809
+ --x-size-font-suggestion-matching-part-default-curated: var(
8810
+ --x-size-font-suggestion-matching-part-default
8811
+ );
8812
+ --x-size-line-height-suggestion-matching-part-default-curated: var(
8813
+ --x-size-line-height-suggestion-matching-part-default
8814
+ );
8815
+ --x-number-font-weight-suggestion-matching-part-default-curated: var(
8816
+ --x-number-font-weight-suggestion-matching-part-default
8817
+ );
8818
+ --x-font-family-suggestion-default-matching-curated: var(
8819
+ --x-font-family-suggestion-default-matching
8820
+ );
8821
+ --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
8822
+ --x-size-line-height-suggestion-default-matching-curated: var(
8823
+ --x-size-line-height-suggestion-default-matching
8824
+ );
8825
+ --x-number-font-weight-suggestion-default-matching-curated: var(
8826
+ --x-number-font-weight-suggestion-default-matching
8827
+ );
8828
+ }