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

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.
@@ -14,7 +14,25 @@
14
14
  .x-normal-case {
15
15
  text-transform: none;
16
16
  }
17
+ .x-underline {
18
+ -webkit-text-decoration-line: underline;
19
+ text-decoration-line: underline;
20
+ }
21
+
22
+ .x-overline {
23
+ -webkit-text-decoration-line: overline;
24
+ text-decoration-line: overline;
25
+ }
26
+
27
+ .x-line-through {
28
+ -webkit-text-decoration-line: line-through;
29
+ text-decoration-line: line-through;
30
+ }
17
31
 
32
+ .x-no-underline {
33
+ -webkit-text-decoration-line: none;
34
+ text-decoration-line: none;
35
+ }
18
36
  .x-static {
19
37
  position: static !important;
20
38
  }
@@ -34,25 +52,7 @@
34
52
  .x-sticky {
35
53
  position: sticky !important;
36
54
  }
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
55
 
52
- .x-no-underline {
53
- -webkit-text-decoration-line: none;
54
- text-decoration-line: none;
55
- }
56
56
  .x-padding--00 {
57
57
  padding: 0 !important;
58
58
  }
@@ -1013,6 +1013,15 @@
1013
1013
  -webkit-box-orient: vertical !important;
1014
1014
  -webkit-line-clamp: 6 !important;
1015
1015
  }
1016
+ .x-font-weight--light {
1017
+ font-weight: var(--x-number-font-weight-base-light) !important;
1018
+ }
1019
+ .x-font-weight--regular {
1020
+ font-weight: var(--x-number-font-weight-base-regular) !important;
1021
+ }
1022
+ .x-font-weight--bold {
1023
+ font-weight: var(--x-number-font-weight-base-bold) !important;
1024
+ }
1016
1025
  .x-font-size--01 {
1017
1026
  font-size: var(--x-size-base-01) !important;
1018
1027
  line-height: 1.5;
@@ -1093,15 +1102,6 @@
1093
1102
  font-size: var(--x-size-base-20) !important;
1094
1103
  line-height: 1.5;
1095
1104
  }
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
- }
1105
1105
  .x-font-color--lead {
1106
1106
  color: var(--x-color-base-lead) !important;
1107
1107
  }
@@ -1231,6 +1231,207 @@
1231
1231
  .x-fill--transparent {
1232
1232
  fill: var(--x-color-base-transparent) !important;
1233
1233
  }
1234
+ /* Material Elevations extracted from:
1235
+ https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1236
+ */
1237
+ :root {
1238
+ /* Shadow none */
1239
+ --x-string-box-shadow-00: none;
1240
+ /* Shadow 1dp */
1241
+ --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),
1242
+ 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1243
+ /* Shadow 2dp */
1244
+ --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),
1245
+ 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1246
+ /* Shadow 3dp */
1247
+ --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),
1248
+ 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1249
+ /* Shadow 4dp */
1250
+ --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),
1251
+ 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1252
+ /* Shadow 6dp */
1253
+ --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),
1254
+ 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1255
+ /* Shadow 8dp */
1256
+ --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),
1257
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1258
+ /* Shadow 9dp */
1259
+ --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),
1260
+ 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1261
+ /* Shadow 12dp */
1262
+ --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),
1263
+ 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1264
+ /* Shadow 16dp */
1265
+ --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),
1266
+ 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1267
+ /* Shadow 24dp */
1268
+ --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),
1269
+ 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1270
+ /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1271
+ /* Shadow 1dp */
1272
+ --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1273
+ 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1274
+ /* Shadow 2dp */
1275
+ --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1276
+ 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1277
+ /* Shadow 3dp */
1278
+ --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1279
+ 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1280
+ /* Shadow 4dp */
1281
+ --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1282
+ 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1283
+ /* Shadow 6dp */
1284
+ --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1285
+ 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1286
+ /* Shadow 8dp */
1287
+ --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1288
+ 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1289
+ /* Shadow 9dp */
1290
+ --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1291
+ 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1292
+ /* Shadow 12dp */
1293
+ --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1294
+ 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1295
+ /* Shadow 16dp */
1296
+ --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1297
+ 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1298
+ /* Shadow 24dp */
1299
+ --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1300
+ 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1301
+ }
1302
+ /* Material Elevations extracted from:
1303
+ https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1304
+ */
1305
+ :root {
1306
+ /* Shadow none */
1307
+ --x-string-box-shadow-00: none;
1308
+ /* Shadow 1dp */
1309
+ --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),
1310
+ 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1311
+ /* Shadow 2dp */
1312
+ --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),
1313
+ 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1314
+ /* Shadow 3dp */
1315
+ --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),
1316
+ 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1317
+ /* Shadow 4dp */
1318
+ --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),
1319
+ 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1320
+ /* Shadow 6dp */
1321
+ --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),
1322
+ 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1323
+ /* Shadow 8dp */
1324
+ --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),
1325
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1326
+ /* Shadow 9dp */
1327
+ --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),
1328
+ 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1329
+ /* Shadow 12dp */
1330
+ --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),
1331
+ 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1332
+ /* Shadow 16dp */
1333
+ --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),
1334
+ 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1335
+ /* Shadow 24dp */
1336
+ --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),
1337
+ 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1338
+ /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1339
+ /* Shadow 1dp */
1340
+ --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1341
+ 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1342
+ /* Shadow 2dp */
1343
+ --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1344
+ 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1345
+ /* Shadow 3dp */
1346
+ --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1347
+ 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1348
+ /* Shadow 4dp */
1349
+ --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1350
+ 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1351
+ /* Shadow 6dp */
1352
+ --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1353
+ 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1354
+ /* Shadow 8dp */
1355
+ --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1356
+ 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1357
+ /* Shadow 9dp */
1358
+ --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1359
+ 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1360
+ /* Shadow 12dp */
1361
+ --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1362
+ 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1363
+ /* Shadow 16dp */
1364
+ --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1365
+ 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1366
+ /* Shadow 24dp */
1367
+ --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1368
+ 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1369
+ }
1370
+
1371
+ .x-shadow--none {
1372
+ box-shadow: none !important;
1373
+ }
1374
+
1375
+ .x-shadow--01 {
1376
+ box-shadow: var(--x-string-box-shadow-01) !important;
1377
+ }
1378
+ .x-shadow--bottom-01 {
1379
+ box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1380
+ }
1381
+ .x-shadow--02 {
1382
+ box-shadow: var(--x-string-box-shadow-02) !important;
1383
+ }
1384
+ .x-shadow--bottom-02 {
1385
+ box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1386
+ }
1387
+ .x-shadow--03 {
1388
+ box-shadow: var(--x-string-box-shadow-03) !important;
1389
+ }
1390
+ .x-shadow--bottom-03 {
1391
+ box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1392
+ }
1393
+ .x-shadow--04 {
1394
+ box-shadow: var(--x-string-box-shadow-04) !important;
1395
+ }
1396
+ .x-shadow--bottom-04 {
1397
+ box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1398
+ }
1399
+ .x-shadow--05 {
1400
+ box-shadow: var(--x-string-box-shadow-05) !important;
1401
+ }
1402
+ .x-shadow--bottom-05 {
1403
+ box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1404
+ }
1405
+ .x-shadow--06 {
1406
+ box-shadow: var(--x-string-box-shadow-06) !important;
1407
+ }
1408
+ .x-shadow--bottom-06 {
1409
+ box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1410
+ }
1411
+ .x-shadow--07 {
1412
+ box-shadow: var(--x-string-box-shadow-07) !important;
1413
+ }
1414
+ .x-shadow--bottom-07 {
1415
+ box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1416
+ }
1417
+ .x-shadow--08 {
1418
+ box-shadow: var(--x-string-box-shadow-08) !important;
1419
+ }
1420
+ .x-shadow--bottom-08 {
1421
+ box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1422
+ }
1423
+ .x-shadow--09 {
1424
+ box-shadow: var(--x-string-box-shadow-09) !important;
1425
+ }
1426
+ .x-shadow--bottom-09 {
1427
+ box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1428
+ }
1429
+ .x-shadow--10 {
1430
+ box-shadow: var(--x-string-box-shadow-10) !important;
1431
+ }
1432
+ .x-shadow--bottom-10 {
1433
+ box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1434
+ }
1234
1435
  *[class*=x-border-width--] {
1235
1436
  border-width: 0;
1236
1437
  }
@@ -1565,250 +1766,6 @@
1565
1766
  .x-border-width--left-10 {
1566
1767
  border-style: solid !important;
1567
1768
  }
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
- }
1812
1769
  .x-border-radius--00 {
1813
1770
  border-radius: 0 !important;
1814
1771
  }
@@ -3317,51 +3274,48 @@
3317
3274
  [dir="rtl"] .x-border-radius--bottom-right-20 {
3318
3275
  border-bottom-left-radius: var(--x-size-base-20) !important;
3319
3276
  }
3320
- .x-background--lead {
3321
- background-color: var(--x-color-base-lead) !important;
3277
+ .x-border-color--lead {
3278
+ border-color: var(--x-color-base-lead) !important;
3322
3279
  }
3323
3280
 
3324
- .x-background--auxiliary {
3325
- background-color: var(--x-color-base-auxiliary) !important;
3281
+ .x-border-color--auxiliary {
3282
+ border-color: var(--x-color-base-auxiliary) !important;
3326
3283
  }
3327
3284
 
3328
- .x-background--neutral-10 {
3329
- background-color: var(--x-color-base-neutral-10) !important;
3285
+ .x-border-color--neutral-10 {
3286
+ border-color: var(--x-color-base-neutral-10) !important;
3330
3287
  }
3331
3288
 
3332
- .x-background--neutral-35 {
3333
- background-color: var(--x-color-base-neutral-35) !important;
3289
+ .x-border-color--neutral-35 {
3290
+ border-color: var(--x-color-base-neutral-35) !important;
3334
3291
  }
3335
3292
 
3336
- .x-background--neutral-70 {
3337
- background-color: var(--x-color-base-neutral-70) !important;
3293
+ .x-border-color--neutral-70 {
3294
+ border-color: var(--x-color-base-neutral-70) !important;
3338
3295
  }
3339
3296
 
3340
- .x-background--neutral-95 {
3341
- background-color: var(--x-color-base-neutral-95) !important;
3297
+ .x-border-color--neutral-95 {
3298
+ border-color: var(--x-color-base-neutral-95) !important;
3342
3299
  }
3343
3300
 
3344
- .x-background--neutral-100 {
3345
- background-color: var(--x-color-base-neutral-100) !important;
3301
+ .x-border-color--neutral-100 {
3302
+ border-color: var(--x-color-base-neutral-100) !important;
3346
3303
  }
3347
3304
 
3348
- .x-background--accent {
3349
- background-color: var(--x-color-base-accent) !important;
3305
+ .x-border-color--accent {
3306
+ border-color: var(--x-color-base-accent) !important;
3350
3307
  }
3351
3308
 
3352
- .x-background--enable {
3353
- background-color: var(--x-color-base-enable) !important;
3309
+ .x-border-color--enable {
3310
+ border-color: var(--x-color-base-enable) !important;
3354
3311
  }
3355
3312
 
3356
- .x-background--disable {
3357
- background-color: var(--x-color-base-disable) !important;
3313
+ .x-border-color--disable {
3314
+ border-color: var(--x-color-base-disable) !important;
3358
3315
  }
3359
3316
 
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);
3317
+ .x-border-color--transparent {
3318
+ border-color: var(--x-color-base-transparent) !important;
3365
3319
  }
3366
3320
  .x-text--stroke.x-text {
3367
3321
  --x-string-text-decoration: line-through;
@@ -3378,23 +3332,54 @@
3378
3332
  .x-text--stroke.x-small {
3379
3333
  --x-string-text-decoration-small: line-through;
3380
3334
  }
3381
- .x-text--secondary {
3382
- --x-color-text-default: var(--x-color-text-secondary);
3335
+ .x-background--lead {
3336
+ background-color: var(--x-color-base-lead) !important;
3383
3337
  }
3384
- .x-text--light.x-text {
3385
- --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3338
+
3339
+ .x-background--auxiliary {
3340
+ background-color: var(--x-color-base-auxiliary) !important;
3386
3341
  }
3387
- .x-text--light.x-title1 {
3388
- --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
3342
+
3343
+ .x-background--neutral-10 {
3344
+ background-color: var(--x-color-base-neutral-10) !important;
3389
3345
  }
3390
- .x-text--light.x-title2 {
3391
- --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
3346
+
3347
+ .x-background--neutral-35 {
3348
+ background-color: var(--x-color-base-neutral-35) !important;
3392
3349
  }
3393
- .x-text--light.x-title3 {
3394
- --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
3350
+
3351
+ .x-background--neutral-70 {
3352
+ background-color: var(--x-color-base-neutral-70) !important;
3395
3353
  }
3396
- .x-text--light.x-small {
3397
- --x-number-font-weight-small: var(--x-number-font-weight-base-light);
3354
+
3355
+ .x-background--neutral-95 {
3356
+ background-color: var(--x-color-base-neutral-95) !important;
3357
+ }
3358
+
3359
+ .x-background--neutral-100 {
3360
+ background-color: var(--x-color-base-neutral-100) !important;
3361
+ }
3362
+
3363
+ .x-background--accent {
3364
+ background-color: var(--x-color-base-accent) !important;
3365
+ }
3366
+
3367
+ .x-background--enable {
3368
+ background-color: var(--x-color-base-enable) !important;
3369
+ }
3370
+
3371
+ .x-background--disable {
3372
+ background-color: var(--x-color-base-disable) !important;
3373
+ }
3374
+
3375
+ .x-background--transparent {
3376
+ background-color: var(--x-color-base-transparent) !important;
3377
+ }
3378
+ :root {
3379
+ --x-color-text-secondary: var(--x-color-base-neutral-35);
3380
+ }
3381
+ .x-text--secondary {
3382
+ --x-color-text-default: var(--x-color-text-secondary);
3398
3383
  }
3399
3384
  :root {
3400
3385
  --x-font-family-base: "Montserrat", sans-serif;
@@ -3436,6 +3421,21 @@
3436
3421
  --x-size-line-height-small: var(--x-size-line-height-base-s);
3437
3422
  --x-string-text-decoration-small: none;
3438
3423
  }
3424
+ .x-text--light.x-text {
3425
+ --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3426
+ }
3427
+ .x-text--light.x-title1 {
3428
+ --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
3429
+ }
3430
+ .x-text--light.x-title2 {
3431
+ --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
3432
+ }
3433
+ .x-text--light.x-title3 {
3434
+ --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
3435
+ }
3436
+ .x-text--light.x-small {
3437
+ --x-number-font-weight-small: var(--x-number-font-weight-base-light);
3438
+ }
3439
3439
  :root {
3440
3440
  --x-font-family-base: "Montserrat", sans-serif;
3441
3441
  --x-size-font-base-xs: 12px;
@@ -3672,13 +3672,6 @@
3672
3672
  --x-number-font-weight-tag-default-selected
3673
3673
  );
3674
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
- }
3682
3675
  :root {
3683
3676
  --x-color-background-tag-default: var(--x-color-base-neutral-100);
3684
3677
  --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -3907,6 +3900,54 @@
3907
3900
  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3908
3901
  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3909
3902
  }
3903
+ :root {
3904
+ --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3905
+ --x-color-text-suggestion-group-matching-part-default: var(
3906
+ --x-color-text-suggestion-matching-part-default
3907
+ );
3908
+ --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
3909
+ --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
3910
+ --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
3911
+ --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
3912
+ --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
3913
+ --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
3914
+ --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
3915
+ --x-size-border-width-suggestion-group-default: 0;
3916
+ --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
3917
+ --x-size-border-width-right-suggestion-group-default: var(
3918
+ --x-size-border-width-suggestion-default
3919
+ );
3920
+ --x-size-border-width-bottom-suggestion-group-default: var(
3921
+ --x-size-border-width-suggestion-default
3922
+ );
3923
+ --x-size-border-width-left-suggestion-group-default: var(
3924
+ --x-size-border-width-suggestion-default
3925
+ );
3926
+ --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
3927
+ --x-size-border-radius-top-left-suggestion-group-default: var(
3928
+ --x-size-border-radius-suggestion-default
3929
+ );
3930
+ --x-size-border-radius-top-right-suggestion-group-default: var(
3931
+ --x-size-border-radius-suggestion-default
3932
+ );
3933
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(
3934
+ --x-size-border-radius-suggestion-default
3935
+ );
3936
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(
3937
+ --x-size-border-radius-suggestion-default
3938
+ );
3939
+ --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
3940
+ --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
3941
+ --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
3942
+ --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
3943
+ }
3944
+ :root {
3945
+ --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3946
+ --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3947
+ --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3948
+ --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3949
+ --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3950
+ }
3910
3951
 
3911
3952
  .x-tag--card.x-tag,
3912
3953
  .x-tag--card .x-tag {
@@ -3959,6 +4000,171 @@
3959
4000
  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
3960
4001
  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
3961
4002
  }
4003
+
4004
+ [dir="ltr"] .x-suggestion-group {
4005
+ padding-left: var(--x-size-padding-left-suggestion-group-default);
4006
+ }
4007
+
4008
+ [dir="rtl"] .x-suggestion-group {
4009
+ padding-right: var(--x-size-padding-left-suggestion-group-default);
4010
+ }
4011
+
4012
+ [dir="ltr"] .x-suggestion-group {
4013
+ padding-right: var(--x-size-padding-right-suggestion-group-default);
4014
+ }
4015
+
4016
+ [dir="rtl"] .x-suggestion-group {
4017
+ padding-left: var(--x-size-padding-right-suggestion-group-default);
4018
+ }
4019
+
4020
+ [dir="ltr"] .x-suggestion-group {
4021
+ border-left-width: var(--x-size-border-width-left-suggestion-group-default);
4022
+ }
4023
+
4024
+ [dir="rtl"] .x-suggestion-group {
4025
+ border-right-width: var(--x-size-border-width-left-suggestion-group-default);
4026
+ }
4027
+
4028
+ [dir="ltr"] .x-suggestion-group {
4029
+ border-right-width: var(--x-size-border-width-right-suggestion-group-default);
4030
+ }
4031
+
4032
+ [dir="rtl"] .x-suggestion-group {
4033
+ border-left-width: var(--x-size-border-width-right-suggestion-group-default);
4034
+ }
4035
+
4036
+ .x-suggestion-group {
4037
+ display: flex;
4038
+ flex-flow: row nowrap;
4039
+ box-sizing: border-box;
4040
+ background-color: var(--x-color-background-suggestion-group-default);
4041
+ color: var(--x-color-text-suggestion-group-default);
4042
+ border-color: var(--x-color-border-suggestion-group-default);
4043
+ font-family: var(--x-font-family-suggestion-group-default);
4044
+ font-size: var(--x-size-font-suggestion-group-default);
4045
+ line-height: var(--x-size-line-height-suggestion-group-default);
4046
+ font-weight: var(--x-number-font-weight-suggestion-group-default);
4047
+ cursor: pointer;
4048
+ padding-top: var(--x-size-padding-top-suggestion-group-default);
4049
+ padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
4050
+ gap: var(--x-size-gap-suggestion-group-default);
4051
+ border-style: solid;
4052
+ border-top-width: var(--x-size-border-width-top-suggestion-group-default);
4053
+ border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
4054
+ 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);
4055
+ }
4056
+ @media not all and (min-resolution: 0.001dpcm) {
4057
+ .x-suggestion-group {
4058
+ gap: 0;
4059
+ }
4060
+ .x-suggestion-group > *:not(:last-child) {
4061
+ margin-right: var(--x-size-gap-suggestion-group-default);
4062
+ }
4063
+ }
4064
+ .x-suggestion-group .x-suggestion {
4065
+ padding: 0;
4066
+ flex: 1 1 auto;
4067
+ border: none;
4068
+ }
4069
+ .x-suggestion-group .x-button {
4070
+ --x-color-background-button-default: transparent;
4071
+ --x-color-border-button-default: transparent;
4072
+ --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
4073
+ --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
4074
+ --x-size-padding-right-button-default: 0;
4075
+ --x-size-padding-left-button-default: 0;
4076
+ border: none;
4077
+ }
4078
+ :root {
4079
+ --x-string-align-items-suggestion-default: center;
4080
+ --x-color-text-suggestion-default: var(--x-color-text-default);
4081
+ --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
4082
+ --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
4083
+ --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
4084
+ --x-color-background-suggestion-default: transparent;
4085
+ --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
4086
+ --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
4087
+ --x-color-text-suggestion-matching-part-default-curated: var(
4088
+ --x-color-text-suggestion-matching-part-default
4089
+ );
4090
+ --x-color-text-suggestion-default-matching-curated: var(
4091
+ --x-color-text-suggestion-default-matching
4092
+ );
4093
+ --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
4094
+ --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
4095
+ --x-size-padding-top-suggestion-default: var(--x-size-base-01);
4096
+ --x-size-padding-right-suggestion-default: 0;
4097
+ --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
4098
+ --x-size-padding-left-suggestion-default: 0;
4099
+ --x-size-gap-suggestion-default: var(--x-size-base-03);
4100
+ --x-size-border-width-suggestion-default: 0;
4101
+ --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
4102
+ --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
4103
+ --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
4104
+ --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
4105
+ --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
4106
+ --x-size-border-radius-top-left-suggestion-default: var(
4107
+ --x-size-border-radius-suggestion-default
4108
+ );
4109
+ --x-size-border-radius-top-right-suggestion-default: var(
4110
+ --x-size-border-radius-suggestion-default
4111
+ );
4112
+ --x-size-border-radius-bottom-right-suggestion-default: var(
4113
+ --x-size-border-radius-suggestion-default
4114
+ );
4115
+ --x-size-border-radius-bottom-left-suggestion-default: var(
4116
+ --x-size-border-radius-suggestion-default
4117
+ );
4118
+ --x-font-family-suggestion-default: var(--x-font-family-text);
4119
+ --x-size-font-suggestion-default: var(--x-size-font-text);
4120
+ --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
4121
+ --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
4122
+ --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
4123
+ --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
4124
+ --x-size-line-height-suggestion-matching-part-default: var(
4125
+ --x-size-line-height-suggestion-default
4126
+ );
4127
+ --x-number-font-weight-suggestion-matching-part-default: var(
4128
+ --x-number-font-weight-suggestion-default
4129
+ );
4130
+ --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
4131
+ --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
4132
+ --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
4133
+ --x-number-font-weight-suggestion-default-matching: var(
4134
+ --x-number-font-weight-suggestion-default
4135
+ );
4136
+ --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
4137
+ --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
4138
+ --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
4139
+ --x-number-font-weight-suggestion-filter-default: var(--x-number-font-weight-suggestion-default);
4140
+ --x-text-transform-suggestion-filter-default: none;
4141
+ --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
4142
+ --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
4143
+ --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
4144
+ --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
4145
+ --x-font-family-suggestion-matching-part-default-curated: var(
4146
+ --x-font-family-suggestion-matching-part-default
4147
+ );
4148
+ --x-size-font-suggestion-matching-part-default-curated: var(
4149
+ --x-size-font-suggestion-matching-part-default
4150
+ );
4151
+ --x-size-line-height-suggestion-matching-part-default-curated: var(
4152
+ --x-size-line-height-suggestion-matching-part-default
4153
+ );
4154
+ --x-number-font-weight-suggestion-matching-part-default-curated: var(
4155
+ --x-number-font-weight-suggestion-matching-part-default
4156
+ );
4157
+ --x-font-family-suggestion-default-matching-curated: var(
4158
+ --x-font-family-suggestion-default-matching
4159
+ );
4160
+ --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
4161
+ --x-size-line-height-suggestion-default-matching-curated: var(
4162
+ --x-size-line-height-suggestion-default-matching
4163
+ );
4164
+ --x-number-font-weight-suggestion-default-matching-curated: var(
4165
+ --x-number-font-weight-suggestion-default-matching
4166
+ );
4167
+ }
3962
4168
  :root {
3963
4169
  --x-string-align-items-suggestion-default: center;
3964
4170
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4294,130 +4500,6 @@
4294
4500
  --x-size-padding-row-05: var(--x-size-base-05);
4295
4501
  --x-size-padding-row-06: var(--x-size-base-06);
4296
4502
  }
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
- }
4413
- /* @deprecated */
4414
- :root {
4415
- --x-size-padding-row-02: var(--x-size-base-02);
4416
- --x-size-padding-row-03: var(--x-size-base-03);
4417
- --x-size-padding-row-04: var(--x-size-base-04);
4418
- --x-size-padding-row-05: var(--x-size-base-05);
4419
- --x-size-padding-row-06: var(--x-size-base-06);
4420
- }
4421
4503
 
4422
4504
  /* @deprecated */
4423
4505
  .x-row--padding-02 {
@@ -4439,6 +4521,36 @@
4439
4521
  .x-row--padding-06 {
4440
4522
  --x-size-padding-row: var(--x-size-padding-row-06);
4441
4523
  }
4524
+ /* @deprecated */
4525
+ :root {
4526
+ --x-size-padding-row-02: var(--x-size-base-02);
4527
+ --x-size-padding-row-03: var(--x-size-base-03);
4528
+ --x-size-padding-row-04: var(--x-size-base-04);
4529
+ --x-size-padding-row-05: var(--x-size-base-05);
4530
+ --x-size-padding-row-06: var(--x-size-base-06);
4531
+ }
4532
+ :root {
4533
+ --x-size-gap-row-01: var(--x-size-base-01);
4534
+ --x-size-gap-row-02: var(--x-size-base-02);
4535
+ --x-size-gap-row-03: var(--x-size-base-03);
4536
+ --x-size-gap-row-04: var(--x-size-base-04);
4537
+ --x-size-gap-row-05: var(--x-size-base-05);
4538
+ --x-size-gap-row-06: var(--x-size-base-06);
4539
+ --x-size-gap-row-07: var(--x-size-base-07);
4540
+ --x-size-gap-row-08: var(--x-size-base-08);
4541
+ --x-size-gap-row-09: var(--x-size-base-09);
4542
+ --x-size-gap-row-10: var(--x-size-base-10);
4543
+ --x-size-gap-row-11: var(--x-size-base-11);
4544
+ --x-size-gap-row-12: var(--x-size-base-12);
4545
+ --x-size-gap-row-13: var(--x-size-base-13);
4546
+ --x-size-gap-row-14: var(--x-size-base-14);
4547
+ --x-size-gap-row-15: var(--x-size-base-15);
4548
+ --x-size-gap-row-16: var(--x-size-base-16);
4549
+ --x-size-gap-row-17: var(--x-size-base-17);
4550
+ --x-size-gap-row-18: var(--x-size-base-18);
4551
+ --x-size-gap-row-19: var(--x-size-base-19);
4552
+ --x-size-gap-row-20: var(--x-size-base-20);
4553
+ }
4442
4554
  :root {
4443
4555
  --x-size-gap-row-01: var(--x-size-base-01);
4444
4556
  --x-size-gap-row-02: var(--x-size-base-02);
@@ -4541,28 +4653,6 @@
4541
4653
  .x-row--gap-20 {
4542
4654
  --x-size-gap-row: var(--x-size-gap-row-20);
4543
4655
  }
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
- }
4566
4656
  :root {
4567
4657
  --x-size-gap-row: 0;
4568
4658
  --x-size-padding-row: 0;
@@ -4961,6 +5051,13 @@
4961
5051
  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
4962
5052
  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
4963
5053
  }
5054
+ :root {
5055
+ --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5056
+ --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5057
+ --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5058
+ --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5059
+ --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5060
+ }
4964
5061
  :root {
4965
5062
  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
4966
5063
  --x-mix-blend-mode-picture-colored: multiply;
@@ -4987,6 +5084,14 @@
4987
5084
  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
4988
5085
  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
4989
5086
  }
5087
+
5088
+ .x-picture--card.x-picture {
5089
+ --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5090
+ --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5091
+ --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5092
+ --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5093
+ --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5094
+ }
4990
5095
  :root {
4991
5096
  --x-color-background-option-list-button-default: transparent;
4992
5097
  --x-color-border-option-list-button-default: transparent;
@@ -5067,21 +5172,6 @@
5067
5172
  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5068
5173
  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5069
5174
  }
5070
- :root {
5071
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5072
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5073
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5074
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5075
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5076
- }
5077
-
5078
- .x-picture--card.x-picture {
5079
- --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5080
- --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5081
- --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5082
- --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5083
- --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5084
- }
5085
5175
  :root {
5086
5176
  --x-color-background-option-list-button-default: transparent;
5087
5177
  --x-color-border-option-list-button-default: transparent;
@@ -5319,6 +5409,51 @@
5319
5409
  --x-number-font-weight-base-regular
5320
5410
  );
5321
5411
  }
5412
+ :root {
5413
+ --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5414
+ --x-color-text-option-list-button-bottom-selected-hover: var(
5415
+ --x-color-text-option-list-button-bottom-selected
5416
+ );
5417
+ --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
5418
+ --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
5419
+ --x-color-border-option-list-item-bottom: transparent;
5420
+ --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5421
+ --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5422
+ --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5423
+ --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5424
+ --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
5425
+ --x-color-border-top-option-list-item-bottom-selected: var(
5426
+ --x-color-border-option-list-item-bottom
5427
+ );
5428
+ --x-color-border-right-option-list-item-bottom-selected: var(
5429
+ --x-color-border-option-list-item-bottom
5430
+ );
5431
+ --x-color-border-bottom-option-list-item-bottom-selected: var(
5432
+ --x-color-border-option-list-item-bottom-selected
5433
+ );
5434
+ --x-color-border-left-option-list-item-bottom-selected: var(
5435
+ --x-color-border-option-list-item-bottom
5436
+ );
5437
+ --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
5438
+ --x-size-border-width-top-option-list-item-bottom: 0;
5439
+ --x-size-border-width-right-option-list-item-bottom: 0;
5440
+ --x-size-border-width-bottom-option-list-item-bottom: var(
5441
+ --x-size-border-width-option-list-item-bottom
5442
+ );
5443
+ --x-size-border-width-left-option-list-item-bottom: 0;
5444
+ --x-size-border-width-top-option-list-item-bottom-selected: 0;
5445
+ --x-size-border-width-right-option-list-item-bottom-selected: 0;
5446
+ --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5447
+ --x-size-border-width-option-list-item-bottom
5448
+ );
5449
+ --x-size-border-width-left-option-list-item-bottom-selected: 0;
5450
+ --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5451
+ --x-font-decoration-option-list-button-bottom-hover: none;
5452
+ --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5453
+ --x-number-font-weight-option-list-button-bottom-selected: var(
5454
+ --x-number-font-weight-base-regular
5455
+ );
5456
+ }
5322
5457
 
5323
5458
  .x-option-list--bottom.x-option-list,
5324
5459
  .x-option-list--bottom .x-option-list {
@@ -5405,51 +5540,6 @@
5405
5540
  --x-size-border-width-bottom-option-list-item-default: inherit;
5406
5541
  --x-size-border-width-left-option-list-item-default: inherit;
5407
5542
  }
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
5543
  :root {
5454
5544
  --x-modal-overlay-color: rgb(0, 0, 0);
5455
5545
  --x-modal-overlay-opacity: 0.7;
@@ -5933,6 +6023,28 @@
5933
6023
  --x-size-gap-list-19: var(--x-size-base-19);
5934
6024
  --x-size-gap-list-20: var(--x-size-base-20);
5935
6025
  }
6026
+ :root {
6027
+ --x-size-gap-list-01: var(--x-size-base-01);
6028
+ --x-size-gap-list-02: var(--x-size-base-02);
6029
+ --x-size-gap-list-03: var(--x-size-base-03);
6030
+ --x-size-gap-list-04: var(--x-size-base-04);
6031
+ --x-size-gap-list-05: var(--x-size-base-05);
6032
+ --x-size-gap-list-06: var(--x-size-base-06);
6033
+ --x-size-gap-list-07: var(--x-size-base-07);
6034
+ --x-size-gap-list-08: var(--x-size-base-08);
6035
+ --x-size-gap-list-09: var(--x-size-base-09);
6036
+ --x-size-gap-list-10: var(--x-size-base-10);
6037
+ --x-size-gap-list-11: var(--x-size-base-11);
6038
+ --x-size-gap-list-12: var(--x-size-base-12);
6039
+ --x-size-gap-list-13: var(--x-size-base-13);
6040
+ --x-size-gap-list-14: var(--x-size-base-14);
6041
+ --x-size-gap-list-15: var(--x-size-base-15);
6042
+ --x-size-gap-list-16: var(--x-size-base-16);
6043
+ --x-size-gap-list-17: var(--x-size-base-17);
6044
+ --x-size-gap-list-18: var(--x-size-base-18);
6045
+ --x-size-gap-list-19: var(--x-size-base-19);
6046
+ --x-size-gap-list-20: var(--x-size-base-20);
6047
+ }
5936
6048
 
5937
6049
  .x-list--gap-01.x-list {
5938
6050
  gap: var(--x-size-gap-list-01);
@@ -6433,28 +6545,6 @@
6433
6545
  margin-bottom: var(--x-size-gap-list-20);
6434
6546
  }
6435
6547
  }
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
- }
6458
6548
  :root {
6459
6549
  --x-string-flow-list: column nowrap;
6460
6550
  --x-size-padding-list: 0;
@@ -6655,15 +6745,6 @@
6655
6745
  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6656
6746
  --x-size-border-width-left-input-group-line: 0;
6657
6747
  }
6658
- :root {
6659
- --x-size-padding-left-input-group-line: 0;
6660
- --x-size-padding-right-input-group-line: 0;
6661
- --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6662
- --x-size-border-width-top-input-group-line: 0;
6663
- --x-size-border-width-right-input-group-line: 0;
6664
- --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6665
- --x-size-border-width-left-input-group-line: 0;
6666
- }
6667
6748
 
6668
6749
  .x-input-group--line .x-input-group,
6669
6750
  .x-input-group--line.x-input-group {
@@ -6702,6 +6783,15 @@
6702
6783
  margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6703
6784
  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6704
6785
  }
6786
+ :root {
6787
+ --x-size-padding-left-input-group-line: 0;
6788
+ --x-size-padding-right-input-group-line: 0;
6789
+ --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6790
+ --x-size-border-width-top-input-group-line: 0;
6791
+ --x-size-border-width-right-input-group-line: 0;
6792
+ --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6793
+ --x-size-border-width-left-input-group-line: 0;
6794
+ }
6705
6795
  :root {
6706
6796
  --x-color-background-input-group-default: var(--x-color-background-input-default);
6707
6797
  --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7050,6 +7140,34 @@
7050
7140
  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7051
7141
  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7052
7142
  }
7143
+ :root {
7144
+ --x-color-background-input-default: var(--x-color-base-neutral-100);
7145
+ --x-color-border-input-default: var(--x-color-base-neutral-70);
7146
+ --x-color-border-input-default-focus: var(--x-color-base-lead);
7147
+ --x-color-text-input-default: var(--x-color-text-default);
7148
+ --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7149
+ --x-size-border-width-input-default: var(--x-size-border-width-base);
7150
+ --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7151
+ --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7152
+ --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7153
+ --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7154
+ --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7155
+ --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7156
+ --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7157
+ --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7158
+ --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7159
+ --x-size-height-input-default: var(--x-size-base-07);
7160
+ --x-size-padding-right-input-default: var(--x-size-base-04);
7161
+ --x-size-padding-left-input-default: var(--x-size-base-04);
7162
+ --x-font-family-input-default: var(--x-font-family-text);
7163
+ --x-size-font-input-default: var(--x-size-font-text);
7164
+ --x-size-line-height-input-default: var(--x-size-line-height-text);
7165
+ --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7166
+ --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7167
+ --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7168
+ --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7169
+ --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7170
+ }
7053
7171
 
7054
7172
  [dir="ltr"] .x-input {
7055
7173
  padding-left: var(--x-size-padding-left-input-default);
@@ -7114,56 +7232,28 @@
7114
7232
  border-color: var(--x-color-border-input-default-focus);
7115
7233
  }
7116
7234
  .x-input > .x-input-placeholder {
7117
- position: absolute;
7118
- height: 100%;
7119
- }
7120
- .x-input > .x-input {
7121
- background: none;
7122
- border: none;
7123
- padding: 0;
7124
- flex: 1 1 auto;
7125
- }
7126
- .x-input > .x-input-placeholder, .x-input::placeholder {
7127
- color: var(--x-color-text-input-placeholder-default);
7128
- font-family: var(--x-font-family-input-placeholder-default);
7129
- font-size: var(--x-size-font-input-placeholder-default);
7130
- font-weight: var(--x-number-font-weight-input-placeholder-default);
7131
- line-height: var(--x-size-line-height-input-placeholder-default);
7132
- }
7133
- :root {
7134
- --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7135
- --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7136
- --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7137
- --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7138
- --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
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);
7235
+ position: absolute;
7236
+ height: 100%;
7237
+ }
7238
+ .x-input > .x-input {
7239
+ background: none;
7240
+ border: none;
7241
+ padding: 0;
7242
+ flex: 1 1 auto;
7243
+ }
7244
+ .x-input > .x-input-placeholder, .x-input::placeholder {
7245
+ color: var(--x-color-text-input-placeholder-default);
7246
+ font-family: var(--x-font-family-input-placeholder-default);
7247
+ font-size: var(--x-size-font-input-placeholder-default);
7248
+ font-weight: var(--x-number-font-weight-input-placeholder-default);
7249
+ line-height: var(--x-size-line-height-input-placeholder-default);
7250
+ }
7251
+ :root {
7252
+ --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7253
+ --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7254
+ --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7255
+ --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7256
+ --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7167
7257
  }
7168
7258
  :root {
7169
7259
  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
@@ -7202,19 +7292,23 @@
7202
7292
  --x-size-width-icon-s: var(--x-size-base-03);
7203
7293
  --x-size-height-icon-s: var(--x-size-base-03);
7204
7294
  }
7295
+ :root {
7296
+ --x-size-width-icon-s: var(--x-size-base-03);
7297
+ --x-size-height-icon-s: var(--x-size-base-03);
7298
+ }
7205
7299
 
7206
7300
  .x-icon--s {
7207
7301
  --x-size-width-icon-default: var(--x-size-width-icon-s);
7208
7302
  --x-size-height-icon-default: var(--x-size-height-icon-s);
7209
7303
  }
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
7304
  :root {
7215
7305
  --x-size-width-icon-m: var(--x-size-base-05);
7216
7306
  --x-size-height-icon-m: var(--x-size-base-05);
7217
7307
  }
7308
+ :root {
7309
+ --x-size-width-icon-l: var(--x-size-base-06);
7310
+ --x-size-height-icon-l: var(--x-size-base-06);
7311
+ }
7218
7312
  :root {
7219
7313
  --x-size-width-icon-m: var(--x-size-base-05);
7220
7314
  --x-size-height-icon-m: var(--x-size-base-05);
@@ -7228,10 +7322,6 @@
7228
7322
  --x-size-width-icon-l: var(--x-size-base-06);
7229
7323
  --x-size-height-icon-l: var(--x-size-base-06);
7230
7324
  }
7231
- :root {
7232
- --x-size-width-icon-l: var(--x-size-base-06);
7233
- --x-size-height-icon-l: var(--x-size-base-06);
7234
- }
7235
7325
 
7236
7326
  .x-icon--l {
7237
7327
  --x-size-width-icon-default: var(--x-size-width-icon-l);
@@ -7246,12 +7336,6 @@
7246
7336
  --x-string-stroke-linejoin-icon-default: mitter;
7247
7337
  --x-size-stroke-width-icon-default: 1px;
7248
7338
  }
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
- }
7255
7339
  :root {
7256
7340
  --x-color-stroke-icon-default: currentColor;
7257
7341
  --x-color-fill-icon-default: none;
@@ -7287,6 +7371,11 @@
7287
7371
  --x-size-gap-grid: var(--x-size-base-03);
7288
7372
  --x-size-min-width-grid-item: 150px;
7289
7373
  }
7374
+ :root {
7375
+ --x-size-padding-grid: 0;
7376
+ --x-size-gap-grid: var(--x-size-base-03);
7377
+ --x-size-min-width-grid-item: 150px;
7378
+ }
7290
7379
 
7291
7380
  .x-grid-list {
7292
7381
  margin: 0;
@@ -7308,6 +7397,12 @@
7308
7397
  .x-grid-list--cols-auto .x-grid-list__item {
7309
7398
  min-width: var(--x-size-min-width-grid-item);
7310
7399
  }
7400
+ .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7401
+ .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7402
+ .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7403
+ .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7404
+ margin-left: auto;
7405
+ }
7311
7406
  :root {
7312
7407
  --x-size-margin-filter-children: 0;
7313
7408
  --x-size-padding-top-filter-children: 0;
@@ -7315,11 +7410,6 @@
7315
7410
  --x-size-padding-bottom-filter-children: 0;
7316
7411
  --x-size-padding-left-filter-children: var(--x-size-base-05);
7317
7412
  }
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
- }
7323
7413
  :root {
7324
7414
  --x-size-margin-filter-children: 0;
7325
7415
  --x-size-padding-top-filter-children: 0;
@@ -7842,13 +7932,13 @@
7842
7932
  :root {
7843
7933
  --x-size-width-dropdown-m: 130px;
7844
7934
  }
7845
- :root {
7846
- --x-size-width-dropdown-m: 130px;
7847
- }
7848
7935
 
7849
7936
  .x-dropdown.x-dropdown--m {
7850
7937
  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
7851
7938
  }
7939
+ :root {
7940
+ --x-size-width-dropdown-m: 130px;
7941
+ }
7852
7942
  :root {
7853
7943
  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7854
7944
  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -7873,6 +7963,9 @@
7873
7963
  --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7874
7964
  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7875
7965
  }
7966
+ :root {
7967
+ --x-size-width-dropdown-l: 202px;
7968
+ }
7876
7969
  :root {
7877
7970
  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7878
7971
  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -7936,16 +8029,6 @@
7936
8029
  --x-size-border-width-left-dropdown-list-line
7937
8030
  );
7938
8031
  }
7939
- :root {
7940
- --x-size-width-dropdown-l: 202px;
7941
- }
7942
- :root {
7943
- --x-size-width-dropdown-l: 202px;
7944
- }
7945
-
7946
- .x-dropdown.x-dropdown--l {
7947
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
7948
- }
7949
8032
  :root {
7950
8033
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
7951
8034
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8020,17 +8103,11 @@
8020
8103
  --x-string-overflow-dropdown-list-default: hidden;
8021
8104
  }
8022
8105
  :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);
8106
+ --x-size-width-dropdown-l: 202px;
8107
+ }
8108
+
8109
+ .x-dropdown.x-dropdown--l {
8110
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
8034
8111
  }
8035
8112
  :root {
8036
8113
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
@@ -8287,6 +8364,19 @@
8287
8364
  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8288
8365
  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8289
8366
  }
8367
+ :root {
8368
+ --x-size-gap-dropdown-card: var(--x-size-base-03);
8369
+ --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8370
+ --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8371
+ --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8372
+ --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8373
+ --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8374
+ --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8375
+ --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8376
+ --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8377
+ --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8378
+ --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8379
+ }
8290
8380
 
8291
8381
  .x-dropdown--card {
8292
8382
  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
@@ -8449,13 +8539,6 @@
8449
8539
  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8450
8540
  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8451
8541
  }
8452
- :root {
8453
- --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8454
- --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8455
- --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8456
- --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8457
- --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8458
- }
8459
8542
 
8460
8543
  .x-button--pill.x-button,
8461
8544
  .x-button--pill .x-button {
@@ -8471,6 +8554,13 @@
8471
8554
  --x-size-border-radius-bottom-left-button-pill
8472
8555
  );
8473
8556
  }
8557
+ :root {
8558
+ --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8559
+ --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8560
+ --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8561
+ --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8562
+ --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8563
+ }
8474
8564
  :root {
8475
8565
  --x-color-background-button-ghost: transparent;
8476
8566
  --x-color-border-button-ghost: transparent;
@@ -8645,6 +8735,28 @@
8645
8735
  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8646
8736
  --x-size-font-badge-default: var(--x-size-font-base-xs);
8647
8737
  }
8738
+ :root {
8739
+ --x-size-base-01: 2px;
8740
+ --x-size-base-02: 4px;
8741
+ --x-size-base-03: 8px;
8742
+ --x-size-base-04: 12px;
8743
+ --x-size-base-05: 16px;
8744
+ --x-size-base-06: 24px;
8745
+ --x-size-base-07: 32px;
8746
+ --x-size-base-08: 40px;
8747
+ --x-size-base-09: 48px;
8748
+ --x-size-base-10: 56px;
8749
+ --x-size-base-11: 64px;
8750
+ --x-size-base-12: 80px;
8751
+ --x-size-base-13: 80px;
8752
+ --x-size-base-14: 96px;
8753
+ --x-size-base-15: 128px;
8754
+ --x-size-base-16: 152px;
8755
+ --x-size-base-17: 184px;
8756
+ --x-size-base-18: 216px;
8757
+ --x-size-base-19: 280px;
8758
+ --x-size-base-20: 344px;
8759
+ }
8648
8760
  :root {
8649
8761
  --x-color-background-badge-default: var(--x-color-base-neutral-10);
8650
8762
  --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -8694,28 +8806,6 @@
8694
8806
  .x-badge-container {
8695
8807
  position: relative;
8696
8808
  }
8697
- :root {
8698
- --x-size-base-01: 2px;
8699
- --x-size-base-02: 4px;
8700
- --x-size-base-03: 8px;
8701
- --x-size-base-04: 12px;
8702
- --x-size-base-05: 16px;
8703
- --x-size-base-06: 24px;
8704
- --x-size-base-07: 32px;
8705
- --x-size-base-08: 40px;
8706
- --x-size-base-09: 48px;
8707
- --x-size-base-10: 56px;
8708
- --x-size-base-11: 64px;
8709
- --x-size-base-12: 80px;
8710
- --x-size-base-13: 80px;
8711
- --x-size-base-14: 96px;
8712
- --x-size-base-15: 128px;
8713
- --x-size-base-16: 152px;
8714
- --x-size-base-17: 184px;
8715
- --x-size-base-18: 216px;
8716
- --x-size-base-19: 280px;
8717
- --x-size-base-20: 344px;
8718
- }
8719
8809
  :root {
8720
8810
  --x-color-base-lead: #243d48;
8721
8811
  --x-color-base-auxiliary: #bfe1ec;
@@ -8735,94 +8825,4 @@
8735
8825
  --x-size-border-radius-base-m: var(--x-size-base-06);
8736
8826
  --x-size-border-radius-base-pill: 99999px;
8737
8827
  --x-size-border-width-base: 1px;
8738
- }
8739
- :root {
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
8828
  }