@empathyco/x-components 6.0.0-alpha.6 → 6.0.0-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/design-system/deprecated-full-theme.css +1310 -1310
  3. package/docs/API-reference/api/x-adapter-platform.md +9 -0
  4. package/docs/API-reference/api/x-adapter-platform.platformadapter.relatedprompts.md +1 -1
  5. package/docs/API-reference/api/x-adapter-platform.platformrelatedprompt.md +22 -0
  6. package/docs/API-reference/api/x-adapter-platform.platformrelatedprompt.nextqueries.md +11 -0
  7. package/docs/API-reference/api/x-adapter-platform.platformrelatedprompt.suggestiontext.md +11 -0
  8. package/docs/API-reference/api/x-adapter-platform.platformrelatedprompt.type.md +11 -0
  9. package/docs/API-reference/api/x-adapter-platform.platformrelatedpromptsrequest.md +15 -0
  10. package/docs/API-reference/api/x-adapter-platform.platformrelatedpromptsresponse.data.md +13 -0
  11. package/docs/API-reference/api/x-adapter-platform.platformrelatedpromptsresponse.md +21 -0
  12. package/docs/API-reference/api/x-adapter-platform.platformrelatedpromptsresponse.status.md +11 -0
  13. package/docs/API-reference/api/x-adapter-platform.relatedpromptschema.md +13 -0
  14. package/docs/API-reference/api/x-adapter-platform.relatedpromptsendpointadapter.md +13 -0
  15. package/docs/API-reference/api/x-adapter-platform.relatedpromptsrequestmapper.md +13 -0
  16. package/docs/API-reference/api/x-adapter-platform.relatedpromptsrequestschema.md +13 -0
  17. package/docs/API-reference/api/x-adapter-platform.relatedpromptsresponsemapper.md +13 -0
  18. package/docs/API-reference/api/x-adapter-platform.relatedpromptsresponseschema.md +13 -0
  19. package/package.json +3 -3
  20. package/report/x-adapter-platform.api.json +549 -2
@@ -537,7 +537,49 @@
537
537
  .x-line-height--loose {
538
538
  line-height: 2 !important;
539
539
  }
540
+ .x-font-weight--light {
541
+ font-weight: var(--x-number-font-weight-base-light) !important;
542
+ }
543
+ .x-font-weight--regular {
544
+ font-weight: var(--x-number-font-weight-base-regular) !important;
545
+ }
546
+ .x-font-weight--bold {
547
+ font-weight: var(--x-number-font-weight-base-bold) !important;
548
+ }
549
+ .x-line-clamp--2 {
550
+ overflow: hidden !important;
551
+ display: -webkit-box !important;
552
+ -webkit-box-orient: vertical !important;
553
+ -webkit-line-clamp: 2 !important;
554
+ }
555
+
556
+ .x-line-clamp--3 {
557
+ overflow: hidden !important;
558
+ display: -webkit-box !important;
559
+ -webkit-box-orient: vertical !important;
560
+ -webkit-line-clamp: 3 !important;
561
+ }
562
+
563
+ .x-line-clamp--4 {
564
+ overflow: hidden !important;
565
+ display: -webkit-box !important;
566
+ -webkit-box-orient: vertical !important;
567
+ -webkit-line-clamp: 4 !important;
568
+ }
569
+
570
+ .x-line-clamp--5 {
571
+ overflow: hidden !important;
572
+ display: -webkit-box !important;
573
+ -webkit-box-orient: vertical !important;
574
+ -webkit-line-clamp: 5 !important;
575
+ }
540
576
 
577
+ .x-line-clamp--6 {
578
+ overflow: hidden !important;
579
+ display: -webkit-box !important;
580
+ -webkit-box-orient: vertical !important;
581
+ -webkit-line-clamp: 6 !important;
582
+ }
541
583
  .x-padding--00 {
542
584
  padding: 0 !important;
543
585
  }
@@ -979,48 +1021,86 @@
979
1021
  [dir="rtl"] .x-padding--left-20 {
980
1022
  padding-right: var(--x-size-base-20) !important;
981
1023
  }
982
- .x-line-clamp--2 {
983
- overflow: hidden !important;
984
- display: -webkit-box !important;
985
- -webkit-box-orient: vertical !important;
986
- -webkit-line-clamp: 2 !important;
987
- }
988
1024
 
989
- .x-line-clamp--3 {
990
- overflow: hidden !important;
991
- display: -webkit-box !important;
992
- -webkit-box-orient: vertical !important;
993
- -webkit-line-clamp: 3 !important;
1025
+ .x-font-size--01 {
1026
+ font-size: var(--x-size-base-01) !important;
1027
+ line-height: 1.5;
994
1028
  }
995
-
996
- .x-line-clamp--4 {
997
- overflow: hidden !important;
998
- display: -webkit-box !important;
999
- -webkit-box-orient: vertical !important;
1000
- -webkit-line-clamp: 4 !important;
1029
+ .x-font-size--02 {
1030
+ font-size: var(--x-size-base-02) !important;
1031
+ line-height: 1.5;
1001
1032
  }
1002
-
1003
- .x-line-clamp--5 {
1004
- overflow: hidden !important;
1005
- display: -webkit-box !important;
1006
- -webkit-box-orient: vertical !important;
1007
- -webkit-line-clamp: 5 !important;
1033
+ .x-font-size--03 {
1034
+ font-size: var(--x-size-base-03) !important;
1035
+ line-height: 1.5;
1008
1036
  }
1009
-
1010
- .x-line-clamp--6 {
1011
- overflow: hidden !important;
1012
- display: -webkit-box !important;
1013
- -webkit-box-orient: vertical !important;
1014
- -webkit-line-clamp: 6 !important;
1037
+ .x-font-size--04 {
1038
+ font-size: var(--x-size-base-04) !important;
1039
+ line-height: 1.5;
1015
1040
  }
1016
- .x-font-weight--light {
1017
- font-weight: var(--x-number-font-weight-base-light) !important;
1041
+ .x-font-size--05 {
1042
+ font-size: var(--x-size-base-05) !important;
1043
+ line-height: 1.5;
1018
1044
  }
1019
- .x-font-weight--regular {
1020
- font-weight: var(--x-number-font-weight-base-regular) !important;
1045
+ .x-font-size--06 {
1046
+ font-size: var(--x-size-base-06) !important;
1047
+ line-height: 1.5;
1021
1048
  }
1022
- .x-font-weight--bold {
1023
- font-weight: var(--x-number-font-weight-base-bold) !important;
1049
+ .x-font-size--07 {
1050
+ font-size: var(--x-size-base-07) !important;
1051
+ line-height: 1.5;
1052
+ }
1053
+ .x-font-size--08 {
1054
+ font-size: var(--x-size-base-08) !important;
1055
+ line-height: 1.5;
1056
+ }
1057
+ .x-font-size--09 {
1058
+ font-size: var(--x-size-base-09) !important;
1059
+ line-height: 1.5;
1060
+ }
1061
+ .x-font-size--10 {
1062
+ font-size: var(--x-size-base-10) !important;
1063
+ line-height: 1.5;
1064
+ }
1065
+ .x-font-size--11 {
1066
+ font-size: var(--x-size-base-11) !important;
1067
+ line-height: 1.5;
1068
+ }
1069
+ .x-font-size--12 {
1070
+ font-size: var(--x-size-base-12) !important;
1071
+ line-height: 1.5;
1072
+ }
1073
+ .x-font-size--13 {
1074
+ font-size: var(--x-size-base-13) !important;
1075
+ line-height: 1.5;
1076
+ }
1077
+ .x-font-size--14 {
1078
+ font-size: var(--x-size-base-14) !important;
1079
+ line-height: 1.5;
1080
+ }
1081
+ .x-font-size--15 {
1082
+ font-size: var(--x-size-base-15) !important;
1083
+ line-height: 1.5;
1084
+ }
1085
+ .x-font-size--16 {
1086
+ font-size: var(--x-size-base-16) !important;
1087
+ line-height: 1.5;
1088
+ }
1089
+ .x-font-size--17 {
1090
+ font-size: var(--x-size-base-17) !important;
1091
+ line-height: 1.5;
1092
+ }
1093
+ .x-font-size--18 {
1094
+ font-size: var(--x-size-base-18) !important;
1095
+ line-height: 1.5;
1096
+ }
1097
+ .x-font-size--19 {
1098
+ font-size: var(--x-size-base-19) !important;
1099
+ line-height: 1.5;
1100
+ }
1101
+ .x-font-size--20 {
1102
+ font-size: var(--x-size-base-20) !important;
1103
+ line-height: 1.5;
1024
1104
  }
1025
1105
  .x-font-color--lead {
1026
1106
  color: var(--x-color-base-lead) !important;
@@ -1108,74 +1188,6 @@
1108
1188
  .x-self-baseline {
1109
1189
  align-self: baseline !important;
1110
1190
  }
1111
- /* Material Elevations extracted from:
1112
- https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1113
- */
1114
- :root {
1115
- /* Shadow none */
1116
- --x-string-box-shadow-00: none;
1117
- /* Shadow 1dp */
1118
- --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),
1119
- 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1120
- /* Shadow 2dp */
1121
- --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),
1122
- 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1123
- /* Shadow 3dp */
1124
- --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),
1125
- 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1126
- /* Shadow 4dp */
1127
- --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),
1128
- 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1129
- /* Shadow 6dp */
1130
- --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),
1131
- 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1132
- /* Shadow 8dp */
1133
- --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),
1134
- 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1135
- /* Shadow 9dp */
1136
- --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),
1137
- 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1138
- /* Shadow 12dp */
1139
- --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),
1140
- 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1141
- /* Shadow 16dp */
1142
- --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),
1143
- 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1144
- /* Shadow 24dp */
1145
- --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),
1146
- 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1147
- /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1148
- /* Shadow 1dp */
1149
- --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1150
- 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1151
- /* Shadow 2dp */
1152
- --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1153
- 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1154
- /* Shadow 3dp */
1155
- --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1156
- 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1157
- /* Shadow 4dp */
1158
- --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1159
- 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1160
- /* Shadow 6dp */
1161
- --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1162
- 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1163
- /* Shadow 8dp */
1164
- --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1165
- 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1166
- /* Shadow 9dp */
1167
- --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1168
- 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1169
- /* Shadow 12dp */
1170
- --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1171
- 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1172
- /* Shadow 16dp */
1173
- --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1174
- 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1175
- /* Shadow 24dp */
1176
- --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1177
- 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1178
- }
1179
1191
  .x-fill--lead {
1180
1192
  fill: var(--x-color-base-lead) !important;
1181
1193
  }
@@ -1287,178 +1299,33 @@
1287
1299
  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1288
1300
  0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1289
1301
  }
1290
-
1291
- .x-shadow--none {
1292
- box-shadow: none !important;
1302
+ *[class*=x-border-width--] {
1303
+ border-width: 0;
1293
1304
  }
1294
1305
 
1295
- .x-shadow--01 {
1296
- box-shadow: var(--x-string-box-shadow-01) !important;
1306
+ .x-border-width--00 {
1307
+ border-width: 0px !important;
1308
+ border-style: solid !important;
1297
1309
  }
1298
- .x-shadow--bottom-01 {
1299
- box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1310
+ .x-border-width--top-00 {
1311
+ border-top-width: 0px !important;
1312
+ border-style: solid !important;
1300
1313
  }
1301
- .x-shadow--02 {
1302
- box-shadow: var(--x-string-box-shadow-02) !important;
1314
+ .x-border-width--bottom-00 {
1315
+ border-bottom-width: 0px !important;
1316
+ border-style: solid !important;
1303
1317
  }
1304
- .x-shadow--bottom-02 {
1305
- box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1318
+ [dir="ltr"] .x-border-width--right-00 {
1319
+ border-right-width: 0px !important;
1306
1320
  }
1307
- .x-shadow--03 {
1308
- box-shadow: var(--x-string-box-shadow-03) !important;
1321
+ [dir="rtl"] .x-border-width--right-00 {
1322
+ border-left-width: 0px !important;
1309
1323
  }
1310
- .x-shadow--bottom-03 {
1311
- box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1324
+ .x-border-width--right-00 {
1325
+ border-style: solid !important;
1312
1326
  }
1313
- .x-shadow--04 {
1314
- box-shadow: var(--x-string-box-shadow-04) !important;
1315
- }
1316
- .x-shadow--bottom-04 {
1317
- box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1318
- }
1319
- .x-shadow--05 {
1320
- box-shadow: var(--x-string-box-shadow-05) !important;
1321
- }
1322
- .x-shadow--bottom-05 {
1323
- box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1324
- }
1325
- .x-shadow--06 {
1326
- box-shadow: var(--x-string-box-shadow-06) !important;
1327
- }
1328
- .x-shadow--bottom-06 {
1329
- box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1330
- }
1331
- .x-shadow--07 {
1332
- box-shadow: var(--x-string-box-shadow-07) !important;
1333
- }
1334
- .x-shadow--bottom-07 {
1335
- box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1336
- }
1337
- .x-shadow--08 {
1338
- box-shadow: var(--x-string-box-shadow-08) !important;
1339
- }
1340
- .x-shadow--bottom-08 {
1341
- box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1342
- }
1343
- .x-shadow--09 {
1344
- box-shadow: var(--x-string-box-shadow-09) !important;
1345
- }
1346
- .x-shadow--bottom-09 {
1347
- box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1348
- }
1349
- .x-shadow--10 {
1350
- box-shadow: var(--x-string-box-shadow-10) !important;
1351
- }
1352
- .x-shadow--bottom-10 {
1353
- box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1354
- }
1355
- .x-font-size--01 {
1356
- font-size: var(--x-size-base-01) !important;
1357
- line-height: 1.5;
1358
- }
1359
- .x-font-size--02 {
1360
- font-size: var(--x-size-base-02) !important;
1361
- line-height: 1.5;
1362
- }
1363
- .x-font-size--03 {
1364
- font-size: var(--x-size-base-03) !important;
1365
- line-height: 1.5;
1366
- }
1367
- .x-font-size--04 {
1368
- font-size: var(--x-size-base-04) !important;
1369
- line-height: 1.5;
1370
- }
1371
- .x-font-size--05 {
1372
- font-size: var(--x-size-base-05) !important;
1373
- line-height: 1.5;
1374
- }
1375
- .x-font-size--06 {
1376
- font-size: var(--x-size-base-06) !important;
1377
- line-height: 1.5;
1378
- }
1379
- .x-font-size--07 {
1380
- font-size: var(--x-size-base-07) !important;
1381
- line-height: 1.5;
1382
- }
1383
- .x-font-size--08 {
1384
- font-size: var(--x-size-base-08) !important;
1385
- line-height: 1.5;
1386
- }
1387
- .x-font-size--09 {
1388
- font-size: var(--x-size-base-09) !important;
1389
- line-height: 1.5;
1390
- }
1391
- .x-font-size--10 {
1392
- font-size: var(--x-size-base-10) !important;
1393
- line-height: 1.5;
1394
- }
1395
- .x-font-size--11 {
1396
- font-size: var(--x-size-base-11) !important;
1397
- line-height: 1.5;
1398
- }
1399
- .x-font-size--12 {
1400
- font-size: var(--x-size-base-12) !important;
1401
- line-height: 1.5;
1402
- }
1403
- .x-font-size--13 {
1404
- font-size: var(--x-size-base-13) !important;
1405
- line-height: 1.5;
1406
- }
1407
- .x-font-size--14 {
1408
- font-size: var(--x-size-base-14) !important;
1409
- line-height: 1.5;
1410
- }
1411
- .x-font-size--15 {
1412
- font-size: var(--x-size-base-15) !important;
1413
- line-height: 1.5;
1414
- }
1415
- .x-font-size--16 {
1416
- font-size: var(--x-size-base-16) !important;
1417
- line-height: 1.5;
1418
- }
1419
- .x-font-size--17 {
1420
- font-size: var(--x-size-base-17) !important;
1421
- line-height: 1.5;
1422
- }
1423
- .x-font-size--18 {
1424
- font-size: var(--x-size-base-18) !important;
1425
- line-height: 1.5;
1426
- }
1427
- .x-font-size--19 {
1428
- font-size: var(--x-size-base-19) !important;
1429
- line-height: 1.5;
1430
- }
1431
- .x-font-size--20 {
1432
- font-size: var(--x-size-base-20) !important;
1433
- line-height: 1.5;
1434
- }
1435
- *[class*=x-border-width--] {
1436
- border-width: 0;
1437
- }
1438
-
1439
- .x-border-width--00 {
1440
- border-width: 0px !important;
1441
- border-style: solid !important;
1442
- }
1443
- .x-border-width--top-00 {
1444
- border-top-width: 0px !important;
1445
- border-style: solid !important;
1446
- }
1447
- .x-border-width--bottom-00 {
1448
- border-bottom-width: 0px !important;
1449
- border-style: solid !important;
1450
- }
1451
- [dir="ltr"] .x-border-width--right-00 {
1452
- border-right-width: 0px !important;
1453
- }
1454
- [dir="rtl"] .x-border-width--right-00 {
1455
- border-left-width: 0px !important;
1456
- }
1457
- .x-border-width--right-00 {
1458
- border-style: solid !important;
1459
- }
1460
- [dir="ltr"] .x-border-width--left-00 {
1461
- border-left-width: 0px !important;
1327
+ [dir="ltr"] .x-border-width--left-00 {
1328
+ border-left-width: 0px !important;
1462
1329
  }
1463
1330
  [dir="rtl"] .x-border-width--left-00 {
1464
1331
  border-right-width: 0px !important;
@@ -1766,43 +1633,176 @@
1766
1633
  .x-border-width--left-10 {
1767
1634
  border-style: solid !important;
1768
1635
  }
1769
- .x-border-radius--00 {
1770
- border-radius: 0 !important;
1636
+ /* Material Elevations extracted from:
1637
+ https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1638
+ */
1639
+ :root {
1640
+ /* Shadow none */
1641
+ --x-string-box-shadow-00: none;
1642
+ /* Shadow 1dp */
1643
+ --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),
1644
+ 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1645
+ /* Shadow 2dp */
1646
+ --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),
1647
+ 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1648
+ /* Shadow 3dp */
1649
+ --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),
1650
+ 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1651
+ /* Shadow 4dp */
1652
+ --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),
1653
+ 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1654
+ /* Shadow 6dp */
1655
+ --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),
1656
+ 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1657
+ /* Shadow 8dp */
1658
+ --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),
1659
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1660
+ /* Shadow 9dp */
1661
+ --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),
1662
+ 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1663
+ /* Shadow 12dp */
1664
+ --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),
1665
+ 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1666
+ /* Shadow 16dp */
1667
+ --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),
1668
+ 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1669
+ /* Shadow 24dp */
1670
+ --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),
1671
+ 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1672
+ /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1673
+ /* Shadow 1dp */
1674
+ --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1675
+ 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1676
+ /* Shadow 2dp */
1677
+ --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1678
+ 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1679
+ /* Shadow 3dp */
1680
+ --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1681
+ 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1682
+ /* Shadow 4dp */
1683
+ --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1684
+ 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1685
+ /* Shadow 6dp */
1686
+ --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1687
+ 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1688
+ /* Shadow 8dp */
1689
+ --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1690
+ 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1691
+ /* Shadow 9dp */
1692
+ --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1693
+ 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1694
+ /* Shadow 12dp */
1695
+ --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1696
+ 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1697
+ /* Shadow 16dp */
1698
+ --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1699
+ 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1700
+ /* Shadow 24dp */
1701
+ --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1702
+ 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1771
1703
  }
1772
1704
 
1773
- .x-border-radius--pill {
1774
- border-radius: 99999px !important;
1705
+ .x-shadow--none {
1706
+ box-shadow: none !important;
1775
1707
  }
1776
1708
 
1777
- .x-border-radius--01 {
1778
- border-radius: var(--x-size-base-01) !important;
1709
+ .x-shadow--01 {
1710
+ box-shadow: var(--x-string-box-shadow-01) !important;
1779
1711
  }
1780
- [dir="ltr"] .x-border-radius--top-01 {
1781
- border-top-left-radius: var(--x-size-base-01) !important;
1712
+ .x-shadow--bottom-01 {
1713
+ box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1782
1714
  }
1783
- [dir="rtl"] .x-border-radius--top-01 {
1784
- border-top-right-radius: var(--x-size-base-01) !important;
1715
+ .x-shadow--02 {
1716
+ box-shadow: var(--x-string-box-shadow-02) !important;
1785
1717
  }
1786
- [dir="ltr"] .x-border-radius--top-01 {
1787
- border-top-right-radius: var(--x-size-base-01) !important;
1718
+ .x-shadow--bottom-02 {
1719
+ box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1788
1720
  }
1789
- [dir="rtl"] .x-border-radius--top-01 {
1790
- border-top-left-radius: var(--x-size-base-01) !important;
1721
+ .x-shadow--03 {
1722
+ box-shadow: var(--x-string-box-shadow-03) !important;
1791
1723
  }
1792
- [dir="ltr"] .x-border-radius--bottom-01 {
1793
- border-bottom-left-radius: var(--x-size-base-01) !important;
1724
+ .x-shadow--bottom-03 {
1725
+ box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1794
1726
  }
1795
- [dir="rtl"] .x-border-radius--bottom-01 {
1796
- border-bottom-right-radius: var(--x-size-base-01) !important;
1727
+ .x-shadow--04 {
1728
+ box-shadow: var(--x-string-box-shadow-04) !important;
1797
1729
  }
1798
- [dir="ltr"] .x-border-radius--bottom-01 {
1799
- border-bottom-right-radius: var(--x-size-base-01) !important;
1730
+ .x-shadow--bottom-04 {
1731
+ box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1800
1732
  }
1801
- [dir="rtl"] .x-border-radius--bottom-01 {
1802
- border-bottom-left-radius: var(--x-size-base-01) !important;
1733
+ .x-shadow--05 {
1734
+ box-shadow: var(--x-string-box-shadow-05) !important;
1803
1735
  }
1804
- [dir="ltr"] .x-border-radius--right-01 {
1805
- border-top-right-radius: var(--x-size-base-01) !important;
1736
+ .x-shadow--bottom-05 {
1737
+ box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1738
+ }
1739
+ .x-shadow--06 {
1740
+ box-shadow: var(--x-string-box-shadow-06) !important;
1741
+ }
1742
+ .x-shadow--bottom-06 {
1743
+ box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1744
+ }
1745
+ .x-shadow--07 {
1746
+ box-shadow: var(--x-string-box-shadow-07) !important;
1747
+ }
1748
+ .x-shadow--bottom-07 {
1749
+ box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1750
+ }
1751
+ .x-shadow--08 {
1752
+ box-shadow: var(--x-string-box-shadow-08) !important;
1753
+ }
1754
+ .x-shadow--bottom-08 {
1755
+ box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1756
+ }
1757
+ .x-shadow--09 {
1758
+ box-shadow: var(--x-string-box-shadow-09) !important;
1759
+ }
1760
+ .x-shadow--bottom-09 {
1761
+ box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1762
+ }
1763
+ .x-shadow--10 {
1764
+ box-shadow: var(--x-string-box-shadow-10) !important;
1765
+ }
1766
+ .x-shadow--bottom-10 {
1767
+ box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1768
+ }
1769
+ .x-border-radius--00 {
1770
+ border-radius: 0 !important;
1771
+ }
1772
+
1773
+ .x-border-radius--pill {
1774
+ border-radius: 99999px !important;
1775
+ }
1776
+
1777
+ .x-border-radius--01 {
1778
+ border-radius: var(--x-size-base-01) !important;
1779
+ }
1780
+ [dir="ltr"] .x-border-radius--top-01 {
1781
+ border-top-left-radius: var(--x-size-base-01) !important;
1782
+ }
1783
+ [dir="rtl"] .x-border-radius--top-01 {
1784
+ border-top-right-radius: var(--x-size-base-01) !important;
1785
+ }
1786
+ [dir="ltr"] .x-border-radius--top-01 {
1787
+ border-top-right-radius: var(--x-size-base-01) !important;
1788
+ }
1789
+ [dir="rtl"] .x-border-radius--top-01 {
1790
+ border-top-left-radius: var(--x-size-base-01) !important;
1791
+ }
1792
+ [dir="ltr"] .x-border-radius--bottom-01 {
1793
+ border-bottom-left-radius: var(--x-size-base-01) !important;
1794
+ }
1795
+ [dir="rtl"] .x-border-radius--bottom-01 {
1796
+ border-bottom-right-radius: var(--x-size-base-01) !important;
1797
+ }
1798
+ [dir="ltr"] .x-border-radius--bottom-01 {
1799
+ border-bottom-right-radius: var(--x-size-base-01) !important;
1800
+ }
1801
+ [dir="rtl"] .x-border-radius--bottom-01 {
1802
+ border-bottom-left-radius: var(--x-size-base-01) !important;
1803
+ }
1804
+ [dir="ltr"] .x-border-radius--right-01 {
1805
+ border-top-right-radius: var(--x-size-base-01) !important;
1806
1806
  }
1807
1807
  [dir="rtl"] .x-border-radius--right-01 {
1808
1808
  border-top-left-radius: var(--x-size-base-01) !important;
@@ -3317,21 +3317,6 @@
3317
3317
  .x-border-color--transparent {
3318
3318
  border-color: var(--x-color-base-transparent) !important;
3319
3319
  }
3320
- .x-text--stroke.x-text {
3321
- --x-string-text-decoration: line-through;
3322
- }
3323
- .x-text--stroke.x-title1 {
3324
- --x-string-text-decoration-title1: line-through;
3325
- }
3326
- .x-text--stroke.x-title2 {
3327
- --x-string-text-decoration-title2: line-through;
3328
- }
3329
- .x-text--stroke.x-title3 {
3330
- --x-string-text-decoration-title3: line-through;
3331
- }
3332
- .x-text--stroke.x-small {
3333
- --x-string-text-decoration-small: line-through;
3334
- }
3335
3320
  .x-background--lead {
3336
3321
  background-color: var(--x-color-base-lead) !important;
3337
3322
  }
@@ -3375,12 +3360,27 @@
3375
3360
  .x-background--transparent {
3376
3361
  background-color: var(--x-color-base-transparent) !important;
3377
3362
  }
3378
- .x-text--secondary {
3379
- --x-color-text-default: var(--x-color-text-secondary);
3363
+ .x-text--stroke.x-text {
3364
+ --x-string-text-decoration: line-through;
3365
+ }
3366
+ .x-text--stroke.x-title1 {
3367
+ --x-string-text-decoration-title1: line-through;
3368
+ }
3369
+ .x-text--stroke.x-title2 {
3370
+ --x-string-text-decoration-title2: line-through;
3371
+ }
3372
+ .x-text--stroke.x-title3 {
3373
+ --x-string-text-decoration-title3: line-through;
3374
+ }
3375
+ .x-text--stroke.x-small {
3376
+ --x-string-text-decoration-small: line-through;
3380
3377
  }
3381
3378
  :root {
3382
3379
  --x-color-text-secondary: var(--x-color-base-neutral-35);
3383
3380
  }
3381
+ .x-text--secondary {
3382
+ --x-color-text-default: var(--x-color-text-secondary);
3383
+ }
3384
3384
  .x-text--light.x-text {
3385
3385
  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3386
3386
  }
@@ -3436,21 +3436,6 @@
3436
3436
  --x-size-line-height-small: var(--x-size-line-height-base-s);
3437
3437
  --x-string-text-decoration-small: none;
3438
3438
  }
3439
- .x-text--bold.x-text {
3440
- --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3441
- }
3442
- .x-text--bold.x-title1 {
3443
- --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3444
- }
3445
- .x-text--bold.x-title2 {
3446
- --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3447
- }
3448
- .x-text--bold.x-title3 {
3449
- --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3450
- }
3451
- .x-text--bold.x-small {
3452
- --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3453
- }
3454
3439
  :root {
3455
3440
  --x-font-family-base: "Montserrat", sans-serif;
3456
3441
  --x-size-font-base-xs: 12px;
@@ -3553,6 +3538,21 @@
3553
3538
  overflow: hidden;
3554
3539
  white-space: nowrap;
3555
3540
  }
3541
+ .x-text--bold.x-text {
3542
+ --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3543
+ }
3544
+ .x-text--bold.x-title1 {
3545
+ --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3546
+ }
3547
+ .x-text--bold.x-title2 {
3548
+ --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3549
+ }
3550
+ .x-text--bold.x-title3 {
3551
+ --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3552
+ }
3553
+ .x-text--bold.x-small {
3554
+ --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3555
+ }
3556
3556
  :root {
3557
3557
  --x-color-text-accent: var(--x-color-base-accent);
3558
3558
  }
@@ -4165,65 +4165,137 @@
4165
4165
  --x-number-font-weight-suggestion-default-matching
4166
4166
  );
4167
4167
  }
4168
- :root {
4169
- --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4170
- --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4171
- --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4172
- --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4168
+
4169
+ [dir="ltr"] .x-suggestion {
4170
+ text-align: left;
4173
4171
  }
4174
- .x-sliding-panel {
4175
- z-index: 0;
4176
- background-color: var(--x-color-background-sliding-panel);
4172
+
4173
+ [dir="rtl"] .x-suggestion {
4174
+ text-align: right;
4177
4175
  }
4178
- .x-sliding-panel__button.x-button {
4179
- --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
4180
- pointer-events: none;
4176
+
4177
+ [dir="ltr"] .x-suggestion {
4178
+ padding-left: var(--x-size-padding-left-suggestion-default);
4181
4179
  }
4182
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
4183
- pointer-events: all;
4180
+
4181
+ [dir="rtl"] .x-suggestion {
4182
+ padding-right: var(--x-size-padding-left-suggestion-default);
4184
4183
  }
4185
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-left {
4186
- transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4184
+
4185
+ [dir="ltr"] .x-suggestion {
4186
+ padding-right: var(--x-size-padding-right-suggestion-default);
4187
4187
  }
4188
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-right {
4189
- transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4188
+
4189
+ [dir="rtl"] .x-suggestion {
4190
+ padding-left: var(--x-size-padding-right-suggestion-default);
4190
4191
  }
4191
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
4192
- opacity: 0;
4192
+
4193
+ [dir="ltr"] .x-suggestion {
4194
+ border-left-width: var(--x-size-border-width-left-suggestion-default);
4193
4195
  }
4194
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-start):hover .x-sliding-panel-button-left {
4195
- opacity: 1;
4196
- pointer-events: all;
4196
+
4197
+ [dir="rtl"] .x-suggestion {
4198
+ border-right-width: var(--x-size-border-width-left-suggestion-default);
4197
4199
  }
4198
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-end):hover .x-sliding-panel-button-right {
4199
- opacity: 1;
4200
- pointer-events: all;
4200
+
4201
+ [dir="ltr"] .x-suggestion {
4202
+ border-right-width: var(--x-size-border-width-right-suggestion-default);
4201
4203
  }
4202
- .x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
4203
- mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
4204
+
4205
+ [dir="rtl"] .x-suggestion {
4206
+ border-left-width: var(--x-size-border-width-right-suggestion-default);
4204
4207
  }
4205
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start .x-sliding-panel__scroll {
4206
- mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
4208
+
4209
+ .x-suggestion {
4210
+ display: flex;
4211
+ flex-flow: row nowrap;
4212
+ box-sizing: border-box;
4213
+ align-items: var(--x-string-align-items-suggestion-default);
4214
+ background-color: var(--x-color-background-suggestion-default);
4215
+ color: var(--x-color-text-suggestion-default);
4216
+ border-color: var(--x-color-border-suggestion-default);
4217
+ font-family: var(--x-font-family-suggestion-default);
4218
+ font-size: var(--x-size-font-suggestion-default);
4219
+ line-height: var(--x-size-line-height-suggestion-default);
4220
+ font-weight: var(--x-number-font-weight-suggestion-default);
4221
+ cursor: pointer;
4222
+ padding-top: var(--x-size-padding-top-suggestion-default);
4223
+ padding-bottom: var(--x-size-padding-bottom-suggestion-default);
4224
+ gap: var(--x-size-gap-suggestion-default);
4225
+ border-style: solid;
4226
+ border-top-width: var(--x-size-border-width-top-suggestion-default);
4227
+ border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
4228
+ border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default);
4207
4229
  }
4208
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-end .x-sliding-panel__scroll {
4209
- mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
4230
+ @media not all and (min-resolution: 0.001dpcm) {
4231
+ .x-suggestion {
4232
+ gap: 0;
4233
+ }
4234
+ .x-suggestion > *:not(:last-child) {
4235
+ margin-right: var(--x-size-gap-suggestion-default);
4236
+ }
4210
4237
  }
4211
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start.x-sliding-panel-at-end .x-sliding-panel__scroll {
4212
- mask: none;
4238
+ .x-suggestion__matching-part,
4239
+ .x-suggestion .x-identifier-result__matching-part {
4240
+ font-family: var(--x-font-family-suggestion-matching-part-default);
4241
+ font-size: var(--x-size-font-suggestion-matching-part-default);
4242
+ line-height: var(--x-size-line-height-suggestion-matching-part-default);
4243
+ font-weight: var(--x-number-font-weight-suggestion-matching-part-default);
4244
+ color: var(--x-color-text-suggestion-matching-part-default);
4213
4245
  }
4214
- .x-sliding-panel__scroll > * {
4215
- flex: 0 0 auto;
4246
+ .x-suggestion__filter {
4247
+ font-family: var(--x-font-family-suggestion-filter-default);
4248
+ font-size: var(--x-size-font-suggestion-filter-default);
4249
+ line-height: var(--x-size-line-height-suggestion-filter-default);
4250
+ font-weight: var(--x-number-font-weight-suggestion-filter-default);
4251
+ text-transform: var(--x-text-transform-suggestion-filter-default);
4252
+ color: var(--x-color-text-suggestion-filter-default);
4216
4253
  }
4217
- .x-sliding-panel__scroll > .x-list {
4218
- --x-string-flow-list: row nowrap;
4254
+ .x-suggestion--matching {
4255
+ --x-font-family-suggestion-default: var(--x-font-family-suggestion-default-matching);
4256
+ --x-size-font-suggestion-default: var(--x-size-font-suggestion-default-matching);
4257
+ --x-size-line-height-suggestion-default: var(--x-size-line-height-suggestion-default-matching);
4258
+ --x-number-font-weight-suggestion-default: var(
4259
+ --x-number-font-weight-suggestion-default-matching
4260
+ );
4261
+ --x-color-text-suggestion-default: var(--x-color-text-suggestion-default-matching);
4219
4262
  }
4220
- .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {
4221
- opacity: 1;
4222
- pointer-events: all;
4263
+ .x-suggestion > .x-identifier-result {
4264
+ flex: none;
4223
4265
  }
4224
- .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
4225
- opacity: 1;
4226
- pointer-events: all;
4266
+ .x-suggestion.x-suggestion.x-suggestion--is-curated {
4267
+ background-color: var(--x-color-background-suggestion-default-curated);
4268
+ color: var(--x-color-text-suggestion-default-curated);
4269
+ border-color: var(--x-color-border-suggestion-default-curated);
4270
+ font-family: var(--x-font-family-suggestion-default-curated);
4271
+ font-size: var(--x-size-font-suggestion-default-curated);
4272
+ line-height: var(--x-size-line-height-suggestion-default-curated);
4273
+ font-weight: var(--x-number-font-weight-suggestion-default-curated);
4274
+ }
4275
+ .x-suggestion.x-suggestion.x-suggestion--is-curated .x-suggestion__matching-part,
4276
+ .x-suggestion.x-suggestion.x-suggestion--is-curated .x-identifier-result__matching-part {
4277
+ font-family: var(--x-font-family-suggestion-matching-part-default-curated);
4278
+ font-size: var(--x-size-font-suggestion-matching-part-default-curated);
4279
+ line-height: var(--x-size-line-height-suggestion-matching-part-default-curated);
4280
+ font-weight: var(--x-number-font-weight-suggestion-matching-part-default-curated);
4281
+ color: var(--x-color-text-suggestion-matching-part-default-curated);
4282
+ }
4283
+ .x-suggestion.x-suggestion.x-suggestion--is-curated.x-suggestion--matching {
4284
+ --x-font-family-suggestion-default-curated: var(
4285
+ --x-font-family-suggestion-default-matching-curated
4286
+ );
4287
+ --x-size-font-suggestion-default-curated: var(
4288
+ --x-size-font-suggestion-default-matching-curated
4289
+ );
4290
+ --x-size-line-height-suggestion-default-curated: var(
4291
+ --x-size-line-height-suggestion-default-matching-curated
4292
+ );
4293
+ --x-number-font-weight-suggestion-default-curated: var(
4294
+ --x-number-font-weight-suggestion-default-matching-curated
4295
+ );
4296
+ --x-color-text-suggestion-default-curated: var(
4297
+ --x-color-text-suggestion-default-matching-curated
4298
+ );
4227
4299
  }
4228
4300
  :root {
4229
4301
  --x-string-align-items-suggestion-default: center;
@@ -4315,137 +4387,65 @@
4315
4387
  --x-number-font-weight-suggestion-default-matching
4316
4388
  );
4317
4389
  }
4318
-
4319
- [dir="ltr"] .x-suggestion {
4320
- text-align: left;
4321
- }
4322
-
4323
- [dir="rtl"] .x-suggestion {
4324
- text-align: right;
4325
- }
4326
-
4327
- [dir="ltr"] .x-suggestion {
4328
- padding-left: var(--x-size-padding-left-suggestion-default);
4390
+ .x-sliding-panel {
4391
+ z-index: 0;
4392
+ background-color: var(--x-color-background-sliding-panel);
4329
4393
  }
4330
-
4331
- [dir="rtl"] .x-suggestion {
4332
- padding-right: var(--x-size-padding-left-suggestion-default);
4394
+ .x-sliding-panel__button.x-button {
4395
+ --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
4396
+ pointer-events: none;
4333
4397
  }
4334
-
4335
- [dir="ltr"] .x-suggestion {
4336
- padding-right: var(--x-size-padding-right-suggestion-default);
4398
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
4399
+ pointer-events: all;
4337
4400
  }
4338
-
4339
- [dir="rtl"] .x-suggestion {
4340
- padding-left: var(--x-size-padding-right-suggestion-default);
4401
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-left {
4402
+ transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4341
4403
  }
4342
-
4343
- [dir="ltr"] .x-suggestion {
4344
- border-left-width: var(--x-size-border-width-left-suggestion-default);
4404
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-right {
4405
+ transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4345
4406
  }
4346
-
4347
- [dir="rtl"] .x-suggestion {
4348
- border-right-width: var(--x-size-border-width-left-suggestion-default);
4407
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
4408
+ opacity: 0;
4349
4409
  }
4350
-
4351
- [dir="ltr"] .x-suggestion {
4352
- border-right-width: var(--x-size-border-width-right-suggestion-default);
4410
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-start):hover .x-sliding-panel-button-left {
4411
+ opacity: 1;
4412
+ pointer-events: all;
4353
4413
  }
4354
-
4355
- [dir="rtl"] .x-suggestion {
4356
- border-left-width: var(--x-size-border-width-right-suggestion-default);
4414
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-end):hover .x-sliding-panel-button-right {
4415
+ opacity: 1;
4416
+ pointer-events: all;
4357
4417
  }
4358
-
4359
- .x-suggestion {
4360
- display: flex;
4361
- flex-flow: row nowrap;
4362
- box-sizing: border-box;
4363
- align-items: var(--x-string-align-items-suggestion-default);
4364
- background-color: var(--x-color-background-suggestion-default);
4365
- color: var(--x-color-text-suggestion-default);
4366
- border-color: var(--x-color-border-suggestion-default);
4367
- font-family: var(--x-font-family-suggestion-default);
4368
- font-size: var(--x-size-font-suggestion-default);
4369
- line-height: var(--x-size-line-height-suggestion-default);
4370
- font-weight: var(--x-number-font-weight-suggestion-default);
4371
- cursor: pointer;
4372
- padding-top: var(--x-size-padding-top-suggestion-default);
4373
- padding-bottom: var(--x-size-padding-bottom-suggestion-default);
4374
- gap: var(--x-size-gap-suggestion-default);
4375
- border-style: solid;
4376
- border-top-width: var(--x-size-border-width-top-suggestion-default);
4377
- border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
4378
- border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default);
4418
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
4419
+ mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
4379
4420
  }
4380
- @media not all and (min-resolution: 0.001dpcm) {
4381
- .x-suggestion {
4382
- gap: 0;
4383
- }
4384
- .x-suggestion > *:not(:last-child) {
4385
- margin-right: var(--x-size-gap-suggestion-default);
4386
- }
4421
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start .x-sliding-panel__scroll {
4422
+ mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
4387
4423
  }
4388
- .x-suggestion__matching-part,
4389
- .x-suggestion .x-identifier-result__matching-part {
4390
- font-family: var(--x-font-family-suggestion-matching-part-default);
4391
- font-size: var(--x-size-font-suggestion-matching-part-default);
4392
- line-height: var(--x-size-line-height-suggestion-matching-part-default);
4393
- font-weight: var(--x-number-font-weight-suggestion-matching-part-default);
4394
- color: var(--x-color-text-suggestion-matching-part-default);
4424
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-end .x-sliding-panel__scroll {
4425
+ mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
4395
4426
  }
4396
- .x-suggestion__filter {
4397
- font-family: var(--x-font-family-suggestion-filter-default);
4398
- font-size: var(--x-size-font-suggestion-filter-default);
4399
- line-height: var(--x-size-line-height-suggestion-filter-default);
4400
- font-weight: var(--x-number-font-weight-suggestion-filter-default);
4401
- text-transform: var(--x-text-transform-suggestion-filter-default);
4402
- color: var(--x-color-text-suggestion-filter-default);
4427
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start.x-sliding-panel-at-end .x-sliding-panel__scroll {
4428
+ mask: none;
4403
4429
  }
4404
- .x-suggestion--matching {
4405
- --x-font-family-suggestion-default: var(--x-font-family-suggestion-default-matching);
4406
- --x-size-font-suggestion-default: var(--x-size-font-suggestion-default-matching);
4407
- --x-size-line-height-suggestion-default: var(--x-size-line-height-suggestion-default-matching);
4408
- --x-number-font-weight-suggestion-default: var(
4409
- --x-number-font-weight-suggestion-default-matching
4410
- );
4411
- --x-color-text-suggestion-default: var(--x-color-text-suggestion-default-matching);
4430
+ .x-sliding-panel__scroll > * {
4431
+ flex: 0 0 auto;
4412
4432
  }
4413
- .x-suggestion > .x-identifier-result {
4414
- flex: none;
4433
+ .x-sliding-panel__scroll > .x-list {
4434
+ --x-string-flow-list: row nowrap;
4415
4435
  }
4416
- .x-suggestion.x-suggestion.x-suggestion--is-curated {
4417
- background-color: var(--x-color-background-suggestion-default-curated);
4418
- color: var(--x-color-text-suggestion-default-curated);
4419
- border-color: var(--x-color-border-suggestion-default-curated);
4420
- font-family: var(--x-font-family-suggestion-default-curated);
4421
- font-size: var(--x-size-font-suggestion-default-curated);
4422
- line-height: var(--x-size-line-height-suggestion-default-curated);
4423
- font-weight: var(--x-number-font-weight-suggestion-default-curated);
4436
+ .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {
4437
+ opacity: 1;
4438
+ pointer-events: all;
4424
4439
  }
4425
- .x-suggestion.x-suggestion.x-suggestion--is-curated .x-suggestion__matching-part,
4426
- .x-suggestion.x-suggestion.x-suggestion--is-curated .x-identifier-result__matching-part {
4427
- font-family: var(--x-font-family-suggestion-matching-part-default-curated);
4428
- font-size: var(--x-size-font-suggestion-matching-part-default-curated);
4429
- line-height: var(--x-size-line-height-suggestion-matching-part-default-curated);
4430
- font-weight: var(--x-number-font-weight-suggestion-matching-part-default-curated);
4431
- color: var(--x-color-text-suggestion-matching-part-default-curated);
4440
+ .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
4441
+ opacity: 1;
4442
+ pointer-events: all;
4432
4443
  }
4433
- .x-suggestion.x-suggestion.x-suggestion--is-curated.x-suggestion--matching {
4434
- --x-font-family-suggestion-default-curated: var(
4435
- --x-font-family-suggestion-default-matching-curated
4436
- );
4437
- --x-size-font-suggestion-default-curated: var(
4438
- --x-size-font-suggestion-default-matching-curated
4439
- );
4440
- --x-size-line-height-suggestion-default-curated: var(
4441
- --x-size-line-height-suggestion-default-matching-curated
4442
- );
4443
- --x-number-font-weight-suggestion-default-curated: var(
4444
- --x-number-font-weight-suggestion-default-matching-curated
4445
- );
4446
- --x-color-text-suggestion-default-curated: var(
4447
- --x-color-text-suggestion-default-matching-curated
4448
- );
4444
+ :root {
4445
+ --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4446
+ --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4447
+ --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4448
+ --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4449
4449
  }
4450
4450
  :root {
4451
4451
  --x-string-overflow-scroll: auto;
@@ -4939,6 +4939,14 @@
4939
4939
  :root {
4940
4940
  --x-number-aspect-ratio-picture: 1;
4941
4941
  }
4942
+ :root {
4943
+ --x-number-aspect-ratio-picture: 1;
4944
+ }
4945
+
4946
+ .x-picture--fixed-ratio.x-picture {
4947
+ aspect-ratio: var(--x-number-aspect-ratio-picture);
4948
+ width: 100%;
4949
+ }
4942
4950
  :root {
4943
4951
  --x-size-border-radius-picture-default: 0;
4944
4952
  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5014,22 +5022,28 @@
5014
5022
  fill: var(--x-color-fill-picture-placeholder-path-default) !important;
5015
5023
  }
5016
5024
  :root {
5017
- --x-number-aspect-ratio-picture: 1;
5018
- }
5019
-
5020
- .x-picture--fixed-ratio.x-picture {
5021
- aspect-ratio: var(--x-number-aspect-ratio-picture);
5022
- width: 100%;
5025
+ --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5026
+ --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5023
5027
  }
5024
5028
  :root {
5025
5029
  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5026
5030
  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5027
5031
  }
5028
- :root {
5029
- --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5030
- --x-mix-blend-mode-picture-colored: multiply;
5031
- --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5032
- --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5032
+
5033
+ .x-picture--cover.x-picture {
5034
+ position: relative;
5035
+ }
5036
+
5037
+ .x-result:hover .x-picture--cover:after,
5038
+ .x-picture--cover:hover:after {
5039
+ content: "";
5040
+ display: block;
5041
+ position: absolute;
5042
+ top: 0;
5043
+ left: 0;
5044
+ background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
5045
+ width: 100%;
5046
+ height: 100%;
5033
5047
  }
5034
5048
  :root {
5035
5049
  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
@@ -5051,24 +5065,10 @@
5051
5065
  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
5052
5066
  }
5053
5067
  :root {
5054
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5055
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5056
- }
5057
-
5058
- .x-picture--cover.x-picture {
5059
- position: relative;
5060
- }
5061
-
5062
- .x-result:hover .x-picture--cover:after,
5063
- .x-picture--cover:hover:after {
5064
- content: "";
5065
- display: block;
5066
- position: absolute;
5067
- top: 0;
5068
- left: 0;
5069
- background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
5070
- width: 100%;
5071
- height: 100%;
5068
+ --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5069
+ --x-mix-blend-mode-picture-colored: multiply;
5070
+ --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5071
+ --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5072
5072
  }
5073
5073
  :root {
5074
5074
  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
@@ -5078,84 +5078,19 @@
5078
5078
  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5079
5079
  }
5080
5080
  :root {
5081
- --x-color-background-option-list-button-default: transparent;
5082
- --x-color-border-option-list-button-default: transparent;
5083
- --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
5084
- --x-color-background-option-list-button-default-hover: var(
5085
- --x-color-background-option-list-button-default
5086
- );
5087
- --x-color-border-option-list-button-default-hover: var(
5088
- --x-color-border-option-list-button-default
5089
- );
5090
- --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
5091
- --x-color-background-option-list-button-default-selected: var(
5092
- --x-color-background-option-list-button-default
5093
- );
5094
- --x-color-border-option-list-button-default-selected: var(
5095
- --x-color-border-option-list-button-default
5096
- );
5097
- --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
5098
- --x-color-background-option-list-button-default-selected-hover: var(
5099
- --x-color-background-option-list-button-default-selected
5100
- );
5101
- --x-color-border-option-list-button-default-selected-hover: var(
5102
- --x-color-border-option-list-button-default-selected
5103
- );
5104
- --x-color-text-option-list-button-default-selected-hover: var(
5105
- --x-color-text-option-list-button-default-selected
5106
- );
5107
- --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
5108
- --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
5109
- --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
5110
- --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
5111
- --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
5112
- --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
5113
- --x-color-border-top-option-list-item-default-selected: var(
5114
- --x-color-border-option-list-item-default-selected
5115
- );
5116
- --x-color-border-right-option-list-item-default-selected: var(
5117
- --x-color-border-option-list-item-default-selected
5118
- );
5119
- --x-color-border-bottom-option-list-item-default-selected: var(
5120
- --x-color-border-option-list-item-default-selected
5121
- );
5122
- --x-color-border-left-option-list-item-default-selected: var(
5123
- --x-color-border-option-list-item-default-selected
5124
- );
5125
- --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
5126
- --x-size-border-width-top-option-list-item-default: 0;
5127
- --x-size-border-width-right-option-list-item-default: var(
5128
- --x-size-border-width-option-list-item-default
5129
- );
5130
- --x-size-border-width-bottom-option-list-item-default: 0;
5131
- --x-size-border-width-left-option-list-item-default: 0;
5132
- --x-size-border-width-top-option-list-item-default-selected: var(
5133
- --x-size-border-width-top-option-list-item-default
5134
- );
5135
- --x-size-border-width-right-option-list-item-default-selected: var(
5136
- --x-size-border-width-right-option-list-item-default
5137
- );
5138
- --x-size-border-width-bottom-option-list-item-default-selected: var(
5139
- --x-size-border-width-bottom-option-list-item-default
5140
- );
5141
- --x-size-border-width-left-option-list-item-default-selected: var(
5142
- --x-size-border-width-left-option-list-item-default
5143
- );
5144
- --x-size-padding-option-list-button-default: var(--x-size-base-02);
5145
- --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
5146
- --x-size-padding-right-option-list-button-default: var(
5147
- --x-size-padding-option-list-button-default
5148
- );
5149
- --x-size-padding-bottom-option-list-button-default: var(
5150
- --x-size-padding-option-list-button-default
5151
- );
5152
- --x-size-padding-left-option-list-button-default: var(
5153
- --x-size-padding-option-list-button-default
5154
- );
5155
- --x-font-decoration-option-list-button-default-hover: underline;
5156
- --x-size-font-option-list-button-default: var(--x-size-font-text);
5157
- --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5158
- --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5081
+ --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5082
+ --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5083
+ --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5084
+ --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5085
+ --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
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);
5159
5094
  }
5160
5095
  :root {
5161
5096
  --x-color-background-option-list-button-default: transparent;
@@ -5350,19 +5285,84 @@
5350
5285
  text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5351
5286
  }
5352
5287
  :root {
5353
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5354
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5355
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5356
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5357
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5358
- }
5359
-
5360
- .x-picture--card.x-picture {
5361
- --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5362
- --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5363
- --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5364
- --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5365
- --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5288
+ --x-color-background-option-list-button-default: transparent;
5289
+ --x-color-border-option-list-button-default: transparent;
5290
+ --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
5291
+ --x-color-background-option-list-button-default-hover: var(
5292
+ --x-color-background-option-list-button-default
5293
+ );
5294
+ --x-color-border-option-list-button-default-hover: var(
5295
+ --x-color-border-option-list-button-default
5296
+ );
5297
+ --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
5298
+ --x-color-background-option-list-button-default-selected: var(
5299
+ --x-color-background-option-list-button-default
5300
+ );
5301
+ --x-color-border-option-list-button-default-selected: var(
5302
+ --x-color-border-option-list-button-default
5303
+ );
5304
+ --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
5305
+ --x-color-background-option-list-button-default-selected-hover: var(
5306
+ --x-color-background-option-list-button-default-selected
5307
+ );
5308
+ --x-color-border-option-list-button-default-selected-hover: var(
5309
+ --x-color-border-option-list-button-default-selected
5310
+ );
5311
+ --x-color-text-option-list-button-default-selected-hover: var(
5312
+ --x-color-text-option-list-button-default-selected
5313
+ );
5314
+ --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
5315
+ --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
5316
+ --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
5317
+ --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
5318
+ --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
5319
+ --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
5320
+ --x-color-border-top-option-list-item-default-selected: var(
5321
+ --x-color-border-option-list-item-default-selected
5322
+ );
5323
+ --x-color-border-right-option-list-item-default-selected: var(
5324
+ --x-color-border-option-list-item-default-selected
5325
+ );
5326
+ --x-color-border-bottom-option-list-item-default-selected: var(
5327
+ --x-color-border-option-list-item-default-selected
5328
+ );
5329
+ --x-color-border-left-option-list-item-default-selected: var(
5330
+ --x-color-border-option-list-item-default-selected
5331
+ );
5332
+ --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
5333
+ --x-size-border-width-top-option-list-item-default: 0;
5334
+ --x-size-border-width-right-option-list-item-default: var(
5335
+ --x-size-border-width-option-list-item-default
5336
+ );
5337
+ --x-size-border-width-bottom-option-list-item-default: 0;
5338
+ --x-size-border-width-left-option-list-item-default: 0;
5339
+ --x-size-border-width-top-option-list-item-default-selected: var(
5340
+ --x-size-border-width-top-option-list-item-default
5341
+ );
5342
+ --x-size-border-width-right-option-list-item-default-selected: var(
5343
+ --x-size-border-width-right-option-list-item-default
5344
+ );
5345
+ --x-size-border-width-bottom-option-list-item-default-selected: var(
5346
+ --x-size-border-width-bottom-option-list-item-default
5347
+ );
5348
+ --x-size-border-width-left-option-list-item-default-selected: var(
5349
+ --x-size-border-width-left-option-list-item-default
5350
+ );
5351
+ --x-size-padding-option-list-button-default: var(--x-size-base-02);
5352
+ --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
5353
+ --x-size-padding-right-option-list-button-default: var(
5354
+ --x-size-padding-option-list-button-default
5355
+ );
5356
+ --x-size-padding-bottom-option-list-button-default: var(
5357
+ --x-size-padding-option-list-button-default
5358
+ );
5359
+ --x-size-padding-left-option-list-button-default: var(
5360
+ --x-size-padding-option-list-button-default
5361
+ );
5362
+ --x-font-decoration-option-list-button-default-hover: underline;
5363
+ --x-size-font-option-list-button-default: var(--x-size-font-text);
5364
+ --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5365
+ --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5366
5366
  }
5367
5367
  :root {
5368
5368
  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
@@ -5410,39 +5410,149 @@
5410
5410
  );
5411
5411
  }
5412
5412
  :root {
5413
- --x-modal-overlay-color: rgb(0, 0, 0);
5414
- --x-modal-overlay-opacity: 0.7;
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
+ );
5415
5456
  }
5416
5457
 
5417
- .x-modal__overlay {
5418
- background-color: var(--x-modal-overlay-color) !important;
5419
- opacity: var(--x-modal-overlay-opacity) !important;
5458
+ .x-option-list--bottom.x-option-list,
5459
+ .x-option-list--bottom .x-option-list {
5460
+ --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
5461
+ --x-color-text-option-list-button-default-hover: var(
5462
+ --x-color-text-option-list-button-bottom-hover
5463
+ );
5464
+ --x-color-border-option-list-item-default: var(--x-color-border-option-list-item-bottom);
5465
+ --x-color-border-top-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
5466
+ --x-color-border-right-option-list-item-default: var(
5467
+ --x-color-border-top-option-list-item-bottom
5468
+ );
5469
+ --x-color-border-bottom-option-list-item-default: var(
5470
+ --x-color-border-top-option-list-item-bottom
5471
+ );
5472
+ --x-color-border-left-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
5473
+ --x-size-border-width-option-list-item-default: var(
5474
+ --x-size-border-width-option-list-item-bottom
5475
+ );
5476
+ --x-size-border-width-top-option-list-item-default: var(
5477
+ --x-size-border-width-top-option-list-item-bottom
5478
+ );
5479
+ --x-size-border-width-right-option-list-item-default: var(
5480
+ --x-size-border-width-right-option-list-item-bottom
5481
+ );
5482
+ --x-size-border-width-bottom-option-list-item-default: var(
5483
+ --x-size-border-width-bottom-option-list-item-bottom
5484
+ );
5485
+ --x-size-border-width-left-option-list-item-default: var(
5486
+ --x-size-border-width-left-option-list-item-bottom
5487
+ );
5488
+ --x-font-decoration-option-list-button-default-hover: var(
5489
+ --x-font-decoration-option-list-button-bottom-hover
5490
+ );
5491
+ --x-size-font-option-list-button-default: var(--x-size-font-option-list-button-bottom);
5492
+ --x-number-font-weight-option-list-button-default: var(
5493
+ --x-number-font-weight-option-list-button-bottom
5494
+ );
5420
5495
  }
5421
- :root {
5422
- --x-string-justify-message-default: center;
5423
- --x-size-gap-message-default: var(--x-size-base-03);
5424
- --x-size-padding-message-default: var(--x-size-base-06);
5425
- --x-color-background-message-default: var(--x-color-base-neutral-95);
5426
- --x-color-border-message-default: var(--x-color-background-message-default);
5427
- --x-color-text-message-default: var(--x-color-text-default);
5428
- --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
5429
- --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
5430
- --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
5431
- --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
5432
- --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
5433
- --x-size-border-width-message-default: var(--x-size-border-width-base);
5434
- --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
5435
- --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
5436
- --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
5437
- --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
5438
- --x-font-family-message-default: var(--x-font-family-title3);
5439
- --x-size-font-message-default: var(--x-size-font-title3);
5440
- --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5496
+ .x-option-list--bottom.x-option-list .x-option-list__item.x-option-list__item--is-selected,
5497
+ .x-option-list--bottom .x-option-list .x-option-list__item.x-option-list__item--is-selected {
5498
+ --x-color-text-option-list-button-default-selected: var(
5499
+ --x-color-text-option-list-button-bottom-selected
5500
+ );
5501
+ --x-color-text-option-list-button-default-selected-hover: var(
5502
+ --x-color-text-option-list-button-bottom-selected-hover
5503
+ );
5504
+ --x-color-border-option-list-item-default-selected: var(
5505
+ --x-color-border-option-list-item-bottom-selected
5506
+ );
5507
+ --x-color-border-top-option-list-item-default-selected: var(
5508
+ --x-color-border-top-option-list-item-bottom-selected
5509
+ );
5510
+ --x-color-border-right-option-list-item-default-selected: var(
5511
+ --x-color-border-top-option-list-item-bottom-selected
5512
+ );
5513
+ --x-color-border-bottom-option-list-item-default-selected: var(
5514
+ --x-color-border-bottom-option-list-item-bottom-selected
5515
+ );
5516
+ --x-color-border-left-option-list-item-default-selected: var(
5517
+ --x-color-border-top-option-list-item-bottom-selected
5518
+ );
5519
+ --x-size-border-width-top-option-list-item-default: var(
5520
+ --x-size-border-width-top-option-list-item-bottom-selected
5521
+ );
5522
+ --x-size-border-width-right-option-list-item-default: var(
5523
+ --x-size-border-width-right-option-list-item-bottom-selected
5524
+ );
5525
+ --x-size-border-width-bottom-option-list-item-default: var(
5526
+ --x-size-border-width-bottom-option-list-item-bottom-selected
5527
+ );
5528
+ --x-size-border-width-left-option-list-item-default: var(
5529
+ --x-size-border-width-left-option-list-item-bottom-selected
5530
+ );
5531
+ --x-number-font-weight-option-list-button-default-selected: var(
5532
+ --x-number-font-weight-option-list-button-bottom-selected
5533
+ );
5534
+ }
5535
+ .x-option-list--bottom.x-option-list .x-option-list__item:last-child,
5536
+ .x-option-list--bottom .x-option-list .x-option-list__item:last-child {
5537
+ --x-size-border-width-option-list-item-default: inherit;
5538
+ --x-size-border-width-top-option-list-item-default: inherit;
5539
+ --x-size-border-width-right-option-list-item-default: inherit;
5540
+ --x-size-border-width-bottom-option-list-item-default: inherit;
5541
+ --x-size-border-width-left-option-list-item-default: inherit;
5542
+ }
5543
+ :root {
5544
+ --x-modal-overlay-color: rgb(0, 0, 0);
5545
+ --x-modal-overlay-opacity: 0.7;
5441
5546
  }
5442
5547
  :root {
5443
5548
  --x-modal-overlay-color: rgb(0, 0, 0);
5444
5549
  --x-modal-overlay-opacity: 0.7;
5445
5550
  }
5551
+
5552
+ .x-modal__overlay {
5553
+ background-color: var(--x-modal-overlay-color) !important;
5554
+ opacity: var(--x-modal-overlay-opacity) !important;
5555
+ }
5446
5556
  :root {
5447
5557
  --x-string-justify-message-default: center;
5448
5558
  --x-size-gap-message-default: var(--x-size-base-03);
@@ -5514,6 +5624,27 @@
5514
5624
  .x-message > p {
5515
5625
  margin: 0;
5516
5626
  }
5627
+ :root {
5628
+ --x-string-justify-message-default: center;
5629
+ --x-size-gap-message-default: var(--x-size-base-03);
5630
+ --x-size-padding-message-default: var(--x-size-base-06);
5631
+ --x-color-background-message-default: var(--x-color-base-neutral-95);
5632
+ --x-color-border-message-default: var(--x-color-background-message-default);
5633
+ --x-color-text-message-default: var(--x-color-text-default);
5634
+ --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
5635
+ --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
5636
+ --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
5637
+ --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
5638
+ --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
5639
+ --x-size-border-width-message-default: var(--x-size-border-width-base);
5640
+ --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
5641
+ --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
5642
+ --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
5643
+ --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
5644
+ --x-font-family-message-default: var(--x-font-family-title3);
5645
+ --x-size-font-message-default: var(--x-size-font-title3);
5646
+ --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5647
+ }
5517
5648
  /* @deprecated */
5518
5649
  :root {
5519
5650
  --x-size-padding-list-01: var(--x-size-base-01);
@@ -5822,231 +5953,53 @@
5822
5953
  .x-list--gap-.x-list {
5823
5954
  gap: 0;
5824
5955
  }
5825
- .x-list--gap-.x-list > *:not(:last-child) {
5826
- margin-bottom: var(--x-size-gap-list-12);
5827
- }
5828
- .x-list--gap-.x-list.x-list--horizontal {
5829
- gap: 0;
5830
- }
5831
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5832
- margin-right: var(--x-size-gap-list-12);
5833
- }
5834
- }
5835
-
5836
- .x-list--padding-13.x-list {
5837
- padding: var(--x-size-padding-list-13);
5838
- }
5839
-
5840
- .x-list--gap-.x-list {
5841
- gap: var(--x-size-gap-list-13);
5842
- }
5843
- @media not all and (min-resolution: 0.001dpcm) {
5844
- .x-list--gap-.x-list {
5845
- gap: 0;
5846
- }
5847
- .x-list--gap-.x-list > *:not(:last-child) {
5848
- margin-bottom: var(--x-size-gap-list-13);
5849
- }
5850
- .x-list--gap-.x-list.x-list--horizontal {
5851
- gap: 0;
5852
- }
5853
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5854
- margin-right: var(--x-size-gap-list-13);
5855
- }
5856
- }
5857
- /* @deprecated */
5858
- :root {
5859
- --x-size-padding-list-01: var(--x-size-base-01);
5860
- --x-size-padding-list-02: var(--x-size-base-02);
5861
- --x-size-padding-list-03: var(--x-size-base-03);
5862
- --x-size-padding-list-04: var(--x-size-base-04);
5863
- --x-size-padding-list-05: var(--x-size-base-05);
5864
- --x-size-padding-list-06: var(--x-size-base-06);
5865
- --x-size-padding-list-07: var(--x-size-base-07);
5866
- --x-size-padding-list-08: var(--x-size-base-08);
5867
- --x-size-padding-list-09: var(--x-size-base-09);
5868
- --x-size-padding-list-10: var(--x-size-base-10);
5869
- --x-size-padding-list-11: var(--x-size-base-11);
5870
- --x-size-padding-list-12: var(--x-size-base-12);
5871
- --x-size-padding-list-13: var(--x-size-base-13);
5872
- }
5873
- :root {
5874
- --x-size-gap-list-01: var(--x-size-base-01);
5875
- --x-size-gap-list-02: var(--x-size-base-02);
5876
- --x-size-gap-list-03: var(--x-size-base-03);
5877
- --x-size-gap-list-04: var(--x-size-base-04);
5878
- --x-size-gap-list-05: var(--x-size-base-05);
5879
- --x-size-gap-list-06: var(--x-size-base-06);
5880
- --x-size-gap-list-07: var(--x-size-base-07);
5881
- --x-size-gap-list-08: var(--x-size-base-08);
5882
- --x-size-gap-list-09: var(--x-size-base-09);
5883
- --x-size-gap-list-10: var(--x-size-base-10);
5884
- --x-size-gap-list-11: var(--x-size-base-11);
5885
- --x-size-gap-list-12: var(--x-size-base-12);
5886
- --x-size-gap-list-13: var(--x-size-base-13);
5887
- --x-size-gap-list-14: var(--x-size-base-14);
5888
- --x-size-gap-list-15: var(--x-size-base-15);
5889
- --x-size-gap-list-16: var(--x-size-base-16);
5890
- --x-size-gap-list-17: var(--x-size-base-17);
5891
- --x-size-gap-list-18: var(--x-size-base-18);
5892
- --x-size-gap-list-19: var(--x-size-base-19);
5893
- --x-size-gap-list-20: var(--x-size-base-20);
5894
- }
5895
- :root {
5896
- --x-string-flow-list: column nowrap;
5897
- --x-size-padding-list: 0;
5898
- --x-size-gap-list: 0;
5899
- --x-size-justify-list: stretch;
5900
- --x-size-align-list: stretch;
5901
- --x-size-align-list-stretch: stretch;
5902
- }
5903
- :root {
5904
- --x-string-flow-list: column nowrap;
5905
- --x-size-padding-list: 0;
5906
- --x-size-gap-list: 0;
5907
- --x-size-justify-list: stretch;
5908
- --x-size-align-list: stretch;
5909
- --x-size-align-list-stretch: stretch;
5910
- }
5911
-
5912
- .x-list {
5913
- display: flex;
5914
- flex-flow: var(--x-string-flow-list);
5915
- list-style: none;
5916
- gap: var(--x-size-gap-list);
5917
- margin: 0;
5918
- padding: var(--x-size-padding-list);
5919
- justify-content: var(--x-size-justify-list);
5920
- align-items: var(--x-size-align-list);
5921
- min-width: 0;
5922
- }
5923
- @media not all and (min-resolution: 0.001dpcm) {
5924
- .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
5925
- gap: 0;
5926
- }
5927
- .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
5928
- margin-bottom: var(--x-size-gap-list);
5929
- }
5930
- .x-list.x-list--horizontal {
5931
- gap: 0;
5932
- }
5933
- .x-list.x-list--horizontal > *:not(:last-child) {
5934
- margin-right: var(--x-size-gap-list);
5935
- }
5936
- .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
5937
- gap: 0;
5938
- }
5939
- .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
5940
- margin-right: var(--x-size-gap-list);
5941
- margin-bottom: var(--x-size-gap-list);
5942
- }
5943
- }
5944
-
5945
- .x-list--vertical.x-list {
5946
- flex-flow: column nowrap;
5947
- }
5948
-
5949
- .x-list--horizontal.x-list {
5950
- flex-flow: row nowrap;
5951
- }
5952
-
5953
- .x-list--wrap.x-list {
5954
- flex-flow: row wrap;
5955
- }
5956
-
5957
- .x-list--wrap-reverse.x-list {
5958
- flex-flow: row wrap-reverse;
5959
- }
5960
-
5961
- .x-list--justify-stretch.x-list {
5962
- justify-content: stretch;
5963
- }
5964
-
5965
- .x-list--justify-center.x-list {
5966
- justify-content: center;
5967
- }
5968
-
5969
- .x-list--justify-end.x-list {
5970
- justify-content: flex-end;
5971
- }
5972
-
5973
- .x-list--justify-start.x-list {
5974
- justify-content: flex-start;
5975
- }
5976
-
5977
- .x-list--align-stretch.x-list {
5978
- align-items: stretch;
5979
- }
5980
-
5981
- .x-list--align-center.x-list {
5982
- align-items: center;
5983
- }
5984
-
5985
- .x-list--align-baseline.x-list {
5986
- align-items: baseline;
5987
- }
5988
-
5989
- .x-list--align-end.x-list {
5990
- align-items: flex-end;
5991
- }
5992
-
5993
- .x-list--align-start.x-list {
5994
- align-items: flex-start;
5995
- }
5996
-
5997
- .x-list > .x-list__item--expand {
5998
- flex: 1 1 auto;
5999
- }
6000
- .x-list > .x-list__item--no-expand {
6001
- flex: 0 0 auto;
6002
- }
6003
- .x-list.x-list--horizontal > .x-list__item--expand {
6004
- min-width: 0;
6005
- }
6006
- .x-list:not(.x-list--horizontal) > .x-list__item--expand {
6007
- min-height: 0;
6008
- }
6009
- .x-list > .x-list__item--stretch {
6010
- align-self: stretch;
6011
- }
6012
- .x-list > .x-list__item--flex-none {
6013
- flex: none;
6014
- }
6015
- .x-list > .x-list__item--01 {
6016
- flex: 1 12 auto;
6017
- }
6018
- .x-list > .x-list__item--02 {
6019
- flex: 2 11 auto;
6020
- }
6021
- .x-list > .x-list__item--03 {
6022
- flex: 3 10 auto;
6023
- }
6024
- .x-list > .x-list__item--04 {
6025
- flex: 4 9 auto;
6026
- }
6027
- .x-list > .x-list__item--05 {
6028
- flex: 5 8 auto;
6029
- }
6030
- .x-list > .x-list__item--06 {
6031
- flex: 6 7 auto;
6032
- }
6033
- .x-list > .x-list__item--07 {
6034
- flex: 7 6 auto;
6035
- }
6036
- .x-list > .x-list__item--08 {
6037
- flex: 8 5 auto;
5956
+ .x-list--gap-.x-list > *:not(:last-child) {
5957
+ margin-bottom: var(--x-size-gap-list-12);
5958
+ }
5959
+ .x-list--gap-.x-list.x-list--horizontal {
5960
+ gap: 0;
5961
+ }
5962
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5963
+ margin-right: var(--x-size-gap-list-12);
5964
+ }
6038
5965
  }
6039
- .x-list > .x-list__item--09 {
6040
- flex: 9 4 auto;
5966
+
5967
+ .x-list--padding-13.x-list {
5968
+ padding: var(--x-size-padding-list-13);
6041
5969
  }
6042
- .x-list > .x-list__item--10 {
6043
- flex: 10 3 auto;
5970
+
5971
+ .x-list--gap-.x-list {
5972
+ gap: var(--x-size-gap-list-13);
6044
5973
  }
6045
- .x-list > .x-list__item--11 {
6046
- flex: 11 2 auto;
5974
+ @media not all and (min-resolution: 0.001dpcm) {
5975
+ .x-list--gap-.x-list {
5976
+ gap: 0;
5977
+ }
5978
+ .x-list--gap-.x-list > *:not(:last-child) {
5979
+ margin-bottom: var(--x-size-gap-list-13);
5980
+ }
5981
+ .x-list--gap-.x-list.x-list--horizontal {
5982
+ gap: 0;
5983
+ }
5984
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5985
+ margin-right: var(--x-size-gap-list-13);
5986
+ }
6047
5987
  }
6048
- .x-list > .x-list__item--12 {
6049
- flex: 12 1 auto;
5988
+ /* @deprecated */
5989
+ :root {
5990
+ --x-size-padding-list-01: var(--x-size-base-01);
5991
+ --x-size-padding-list-02: var(--x-size-base-02);
5992
+ --x-size-padding-list-03: var(--x-size-base-03);
5993
+ --x-size-padding-list-04: var(--x-size-base-04);
5994
+ --x-size-padding-list-05: var(--x-size-base-05);
5995
+ --x-size-padding-list-06: var(--x-size-base-06);
5996
+ --x-size-padding-list-07: var(--x-size-base-07);
5997
+ --x-size-padding-list-08: var(--x-size-base-08);
5998
+ --x-size-padding-list-09: var(--x-size-base-09);
5999
+ --x-size-padding-list-10: var(--x-size-base-10);
6000
+ --x-size-padding-list-11: var(--x-size-base-11);
6001
+ --x-size-padding-list-12: var(--x-size-base-12);
6002
+ --x-size-padding-list-13: var(--x-size-base-13);
6050
6003
  }
6051
6004
  :root {
6052
6005
  --x-size-gap-list-01: var(--x-size-base-01);
@@ -6520,55 +6473,233 @@
6520
6473
  margin-bottom: var(--x-size-gap-list-18);
6521
6474
  }
6522
6475
  }
6523
-
6524
- .x-list--gap-19.x-list {
6525
- gap: var(--x-size-gap-list-19);
6476
+
6477
+ .x-list--gap-19.x-list {
6478
+ gap: var(--x-size-gap-list-19);
6479
+ }
6480
+ @media not all and (min-resolution: 0.001dpcm) {
6481
+ .x-list--gap-19.x-list:not(.x-list--horizontal), .x-list--gap-19.x-list.x-list--vertical {
6482
+ gap: 0;
6483
+ }
6484
+ .x-list--gap-19.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-19.x-list.x-list--vertical > *:not(:last-child) {
6485
+ margin-bottom: var(--x-size-gap-list-19);
6486
+ }
6487
+ .x-list--gap-19.x-list.x-list--horizontal {
6488
+ gap: 0;
6489
+ }
6490
+ .x-list--gap-19.x-list.x-list--horizontal > *:not(:last-child) {
6491
+ margin-right: var(--x-size-gap-list-19);
6492
+ }
6493
+ .x-list--gap-19.x-list.x-list--wrap {
6494
+ gap: 0;
6495
+ }
6496
+ .x-list--gap-19.x-list.x-list--wrap > *:not(:last-child) {
6497
+ margin-right: var(--x-size-gap-list-19);
6498
+ margin-bottom: var(--x-size-gap-list-19);
6499
+ }
6500
+ }
6501
+
6502
+ .x-list--gap-20.x-list {
6503
+ gap: var(--x-size-gap-list-20);
6504
+ }
6505
+ @media not all and (min-resolution: 0.001dpcm) {
6506
+ .x-list--gap-20.x-list:not(.x-list--horizontal), .x-list--gap-20.x-list.x-list--vertical {
6507
+ gap: 0;
6508
+ }
6509
+ .x-list--gap-20.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-20.x-list.x-list--vertical > *:not(:last-child) {
6510
+ margin-bottom: var(--x-size-gap-list-20);
6511
+ }
6512
+ .x-list--gap-20.x-list.x-list--horizontal {
6513
+ gap: 0;
6514
+ }
6515
+ .x-list--gap-20.x-list.x-list--horizontal > *:not(:last-child) {
6516
+ margin-right: var(--x-size-gap-list-20);
6517
+ }
6518
+ .x-list--gap-20.x-list.x-list--wrap {
6519
+ gap: 0;
6520
+ }
6521
+ .x-list--gap-20.x-list.x-list--wrap > *:not(:last-child) {
6522
+ margin-right: var(--x-size-gap-list-20);
6523
+ margin-bottom: var(--x-size-gap-list-20);
6524
+ }
6525
+ }
6526
+ :root {
6527
+ --x-size-gap-list-01: var(--x-size-base-01);
6528
+ --x-size-gap-list-02: var(--x-size-base-02);
6529
+ --x-size-gap-list-03: var(--x-size-base-03);
6530
+ --x-size-gap-list-04: var(--x-size-base-04);
6531
+ --x-size-gap-list-05: var(--x-size-base-05);
6532
+ --x-size-gap-list-06: var(--x-size-base-06);
6533
+ --x-size-gap-list-07: var(--x-size-base-07);
6534
+ --x-size-gap-list-08: var(--x-size-base-08);
6535
+ --x-size-gap-list-09: var(--x-size-base-09);
6536
+ --x-size-gap-list-10: var(--x-size-base-10);
6537
+ --x-size-gap-list-11: var(--x-size-base-11);
6538
+ --x-size-gap-list-12: var(--x-size-base-12);
6539
+ --x-size-gap-list-13: var(--x-size-base-13);
6540
+ --x-size-gap-list-14: var(--x-size-base-14);
6541
+ --x-size-gap-list-15: var(--x-size-base-15);
6542
+ --x-size-gap-list-16: var(--x-size-base-16);
6543
+ --x-size-gap-list-17: var(--x-size-base-17);
6544
+ --x-size-gap-list-18: var(--x-size-base-18);
6545
+ --x-size-gap-list-19: var(--x-size-base-19);
6546
+ --x-size-gap-list-20: var(--x-size-base-20);
6547
+ }
6548
+ :root {
6549
+ --x-string-flow-list: column nowrap;
6550
+ --x-size-padding-list: 0;
6551
+ --x-size-gap-list: 0;
6552
+ --x-size-justify-list: stretch;
6553
+ --x-size-align-list: stretch;
6554
+ --x-size-align-list-stretch: stretch;
6555
+ }
6556
+
6557
+ .x-list {
6558
+ display: flex;
6559
+ flex-flow: var(--x-string-flow-list);
6560
+ list-style: none;
6561
+ gap: var(--x-size-gap-list);
6562
+ margin: 0;
6563
+ padding: var(--x-size-padding-list);
6564
+ justify-content: var(--x-size-justify-list);
6565
+ align-items: var(--x-size-align-list);
6566
+ min-width: 0;
6567
+ }
6568
+ @media not all and (min-resolution: 0.001dpcm) {
6569
+ .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
6570
+ gap: 0;
6571
+ }
6572
+ .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
6573
+ margin-bottom: var(--x-size-gap-list);
6574
+ }
6575
+ .x-list.x-list--horizontal {
6576
+ gap: 0;
6577
+ }
6578
+ .x-list.x-list--horizontal > *:not(:last-child) {
6579
+ margin-right: var(--x-size-gap-list);
6580
+ }
6581
+ .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
6582
+ gap: 0;
6583
+ }
6584
+ .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
6585
+ margin-right: var(--x-size-gap-list);
6586
+ margin-bottom: var(--x-size-gap-list);
6587
+ }
6588
+ }
6589
+
6590
+ .x-list--vertical.x-list {
6591
+ flex-flow: column nowrap;
6592
+ }
6593
+
6594
+ .x-list--horizontal.x-list {
6595
+ flex-flow: row nowrap;
6596
+ }
6597
+
6598
+ .x-list--wrap.x-list {
6599
+ flex-flow: row wrap;
6600
+ }
6601
+
6602
+ .x-list--wrap-reverse.x-list {
6603
+ flex-flow: row wrap-reverse;
6604
+ }
6605
+
6606
+ .x-list--justify-stretch.x-list {
6607
+ justify-content: stretch;
6608
+ }
6609
+
6610
+ .x-list--justify-center.x-list {
6611
+ justify-content: center;
6612
+ }
6613
+
6614
+ .x-list--justify-end.x-list {
6615
+ justify-content: flex-end;
6616
+ }
6617
+
6618
+ .x-list--justify-start.x-list {
6619
+ justify-content: flex-start;
6620
+ }
6621
+
6622
+ .x-list--align-stretch.x-list {
6623
+ align-items: stretch;
6624
+ }
6625
+
6626
+ .x-list--align-center.x-list {
6627
+ align-items: center;
6628
+ }
6629
+
6630
+ .x-list--align-baseline.x-list {
6631
+ align-items: baseline;
6632
+ }
6633
+
6634
+ .x-list--align-end.x-list {
6635
+ align-items: flex-end;
6636
+ }
6637
+
6638
+ .x-list--align-start.x-list {
6639
+ align-items: flex-start;
6640
+ }
6641
+
6642
+ .x-list > .x-list__item--expand {
6643
+ flex: 1 1 auto;
6644
+ }
6645
+ .x-list > .x-list__item--no-expand {
6646
+ flex: 0 0 auto;
6647
+ }
6648
+ .x-list.x-list--horizontal > .x-list__item--expand {
6649
+ min-width: 0;
6650
+ }
6651
+ .x-list:not(.x-list--horizontal) > .x-list__item--expand {
6652
+ min-height: 0;
6653
+ }
6654
+ .x-list > .x-list__item--stretch {
6655
+ align-self: stretch;
6656
+ }
6657
+ .x-list > .x-list__item--flex-none {
6658
+ flex: none;
6659
+ }
6660
+ .x-list > .x-list__item--01 {
6661
+ flex: 1 12 auto;
6662
+ }
6663
+ .x-list > .x-list__item--02 {
6664
+ flex: 2 11 auto;
6665
+ }
6666
+ .x-list > .x-list__item--03 {
6667
+ flex: 3 10 auto;
6668
+ }
6669
+ .x-list > .x-list__item--04 {
6670
+ flex: 4 9 auto;
6671
+ }
6672
+ .x-list > .x-list__item--05 {
6673
+ flex: 5 8 auto;
6674
+ }
6675
+ .x-list > .x-list__item--06 {
6676
+ flex: 6 7 auto;
6677
+ }
6678
+ .x-list > .x-list__item--07 {
6679
+ flex: 7 6 auto;
6680
+ }
6681
+ .x-list > .x-list__item--08 {
6682
+ flex: 8 5 auto;
6526
6683
  }
6527
- @media not all and (min-resolution: 0.001dpcm) {
6528
- .x-list--gap-19.x-list:not(.x-list--horizontal), .x-list--gap-19.x-list.x-list--vertical {
6529
- gap: 0;
6530
- }
6531
- .x-list--gap-19.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-19.x-list.x-list--vertical > *:not(:last-child) {
6532
- margin-bottom: var(--x-size-gap-list-19);
6533
- }
6534
- .x-list--gap-19.x-list.x-list--horizontal {
6535
- gap: 0;
6536
- }
6537
- .x-list--gap-19.x-list.x-list--horizontal > *:not(:last-child) {
6538
- margin-right: var(--x-size-gap-list-19);
6539
- }
6540
- .x-list--gap-19.x-list.x-list--wrap {
6541
- gap: 0;
6542
- }
6543
- .x-list--gap-19.x-list.x-list--wrap > *:not(:last-child) {
6544
- margin-right: var(--x-size-gap-list-19);
6545
- margin-bottom: var(--x-size-gap-list-19);
6546
- }
6684
+ .x-list > .x-list__item--09 {
6685
+ flex: 9 4 auto;
6547
6686
  }
6548
-
6549
- .x-list--gap-20.x-list {
6550
- gap: var(--x-size-gap-list-20);
6687
+ .x-list > .x-list__item--10 {
6688
+ flex: 10 3 auto;
6551
6689
  }
6552
- @media not all and (min-resolution: 0.001dpcm) {
6553
- .x-list--gap-20.x-list:not(.x-list--horizontal), .x-list--gap-20.x-list.x-list--vertical {
6554
- gap: 0;
6555
- }
6556
- .x-list--gap-20.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-20.x-list.x-list--vertical > *:not(:last-child) {
6557
- margin-bottom: var(--x-size-gap-list-20);
6558
- }
6559
- .x-list--gap-20.x-list.x-list--horizontal {
6560
- gap: 0;
6561
- }
6562
- .x-list--gap-20.x-list.x-list--horizontal > *:not(:last-child) {
6563
- margin-right: var(--x-size-gap-list-20);
6564
- }
6565
- .x-list--gap-20.x-list.x-list--wrap {
6566
- gap: 0;
6567
- }
6568
- .x-list--gap-20.x-list.x-list--wrap > *:not(:last-child) {
6569
- margin-right: var(--x-size-gap-list-20);
6570
- margin-bottom: var(--x-size-gap-list-20);
6571
- }
6690
+ .x-list > .x-list__item--11 {
6691
+ flex: 11 2 auto;
6692
+ }
6693
+ .x-list > .x-list__item--12 {
6694
+ flex: 12 1 auto;
6695
+ }
6696
+ :root {
6697
+ --x-string-flow-list: column nowrap;
6698
+ --x-size-padding-list: 0;
6699
+ --x-size-gap-list: 0;
6700
+ --x-size-justify-list: stretch;
6701
+ --x-size-align-list: stretch;
6702
+ --x-size-align-list-stretch: stretch;
6572
6703
  }
6573
6704
  :root {
6574
6705
  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
@@ -6579,14 +6710,31 @@
6579
6710
  );
6580
6711
  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6581
6712
  }
6713
+
6714
+ .x-input-group--pill.x-input-group,
6715
+ .x-input-group--pill .x-input-group {
6716
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
6717
+ --x-size-border-radius-top-left-input-group-default: var(
6718
+ --x-size-border-radius-top-left-input-group-pill
6719
+ );
6720
+ --x-size-border-radius-top-right-input-group-default: var(
6721
+ --x-size-border-radius-top-right-input-group-pill
6722
+ );
6723
+ --x-size-border-radius-bottom-right-input-group-default: var(
6724
+ --x-size-border-radius-bottom-right-input-group-pill
6725
+ );
6726
+ --x-size-border-radius-bottom-left-input-group-default: var(
6727
+ --x-size-border-radius-bottom-left-input-group-pill
6728
+ );
6729
+ }
6582
6730
  :root {
6583
- --x-size-padding-left-input-group-line: 0;
6584
- --x-size-padding-right-input-group-line: 0;
6585
- --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6586
- --x-size-border-width-top-input-group-line: 0;
6587
- --x-size-border-width-right-input-group-line: 0;
6588
- --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6589
- --x-size-border-width-left-input-group-line: 0;
6731
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6732
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6733
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6734
+ --x-size-border-radius-bottom-right-input-group-pill: var(
6735
+ --x-size-border-radius-input-group-pill
6736
+ );
6737
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6590
6738
  }
6591
6739
  :root {
6592
6740
  --x-size-padding-left-input-group-line: 0;
@@ -6636,82 +6784,13 @@
6636
6784
  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6637
6785
  }
6638
6786
  :root {
6639
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6640
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6641
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6642
- --x-size-border-radius-bottom-right-input-group-pill: var(
6643
- --x-size-border-radius-input-group-pill
6644
- );
6645
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6646
- }
6647
-
6648
- .x-input-group--pill.x-input-group,
6649
- .x-input-group--pill .x-input-group {
6650
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
6651
- --x-size-border-radius-top-left-input-group-default: var(
6652
- --x-size-border-radius-top-left-input-group-pill
6653
- );
6654
- --x-size-border-radius-top-right-input-group-default: var(
6655
- --x-size-border-radius-top-right-input-group-pill
6656
- );
6657
- --x-size-border-radius-bottom-right-input-group-default: var(
6658
- --x-size-border-radius-bottom-right-input-group-pill
6659
- );
6660
- --x-size-border-radius-bottom-left-input-group-default: var(
6661
- --x-size-border-radius-bottom-left-input-group-pill
6662
- );
6663
- }
6664
- :root {
6665
- --x-color-background-input-group-default: var(--x-color-background-input-default);
6666
- --x-color-border-input-group-default: var(--x-color-border-input-default);
6667
- --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
6668
- --x-color-text-input-group-default: var(--x-color-text-input-default);
6669
- --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
6670
- --x-size-height-input-group-default: var(--x-size-height-input-default);
6671
- --x-size-gap-input-group-default: var(--x-size-base-03);
6672
- --x-size-padding-left-input-group-default: var(--x-size-base-06);
6673
- --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
6674
- --x-size-padding-input-group-default-action: var(--x-size-base-03);
6675
- --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
6676
- --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
6677
- --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
6678
- --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
6679
- --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
6680
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
6681
- --x-size-border-radius-top-left-input-group-default: var(
6682
- --x-size-border-radius-input-group-default
6683
- );
6684
- --x-size-border-radius-top-right-input-group-default: var(
6685
- --x-size-border-radius-input-group-default
6686
- );
6687
- --x-size-border-radius-bottom-right-input-group-default: var(
6688
- --x-size-border-radius-input-group-default
6689
- );
6690
- --x-size-border-radius-bottom-left-input-group-default: var(
6691
- --x-size-border-radius-input-group-default
6692
- );
6693
- --x-font-family-input-group-default: var(--x-font-family-input-default);
6694
- --x-size-font-input-group-default: var(--x-size-font-input-default);
6695
- --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
6696
- --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
6697
- --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
6698
- --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
6699
- --x-size-line-height-input-group-placeholder-default: var(
6700
- --x-size-line-height-input-group-default
6701
- );
6702
- --x-number-font-weight-input-group-placeholder-default: var(
6703
- --x-number-font-weight-input-group-default
6704
- );
6705
- --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6706
- }
6707
- :root {
6708
- --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
6709
- --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
6710
- --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
6711
- --x-size-border-radius-bottom-right-input-group-card: var(
6712
- --x-size-border-radius-input-group-card
6713
- );
6714
- --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
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;
6715
6794
  }
6716
6795
  :root {
6717
6796
  --x-color-background-input-group-default: var(--x-color-background-input-default);
@@ -6890,6 +6969,49 @@
6890
6969
  [dir="rtl"] .x-input-group > .x-input-group__action:last-child {
6891
6970
  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
6892
6971
  }
6972
+ :root {
6973
+ --x-color-background-input-group-default: var(--x-color-background-input-default);
6974
+ --x-color-border-input-group-default: var(--x-color-border-input-default);
6975
+ --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
6976
+ --x-color-text-input-group-default: var(--x-color-text-input-default);
6977
+ --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
6978
+ --x-size-height-input-group-default: var(--x-size-height-input-default);
6979
+ --x-size-gap-input-group-default: var(--x-size-base-03);
6980
+ --x-size-padding-left-input-group-default: var(--x-size-base-06);
6981
+ --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
6982
+ --x-size-padding-input-group-default-action: var(--x-size-base-03);
6983
+ --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
6984
+ --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
6985
+ --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
6986
+ --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
6987
+ --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
6988
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
6989
+ --x-size-border-radius-top-left-input-group-default: var(
6990
+ --x-size-border-radius-input-group-default
6991
+ );
6992
+ --x-size-border-radius-top-right-input-group-default: var(
6993
+ --x-size-border-radius-input-group-default
6994
+ );
6995
+ --x-size-border-radius-bottom-right-input-group-default: var(
6996
+ --x-size-border-radius-input-group-default
6997
+ );
6998
+ --x-size-border-radius-bottom-left-input-group-default: var(
6999
+ --x-size-border-radius-input-group-default
7000
+ );
7001
+ --x-font-family-input-group-default: var(--x-font-family-input-default);
7002
+ --x-size-font-input-group-default: var(--x-size-font-input-default);
7003
+ --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
7004
+ --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
7005
+ --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
7006
+ --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
7007
+ --x-size-line-height-input-group-placeholder-default: var(
7008
+ --x-size-line-height-input-group-default
7009
+ );
7010
+ --x-number-font-weight-input-group-placeholder-default: var(
7011
+ --x-number-font-weight-input-group-default
7012
+ );
7013
+ --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
7014
+ }
6893
7015
  :root {
6894
7016
  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
6895
7017
  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
@@ -6926,6 +7048,15 @@
6926
7048
  --x-size-border-radius-top-left-input-group-default: 0;
6927
7049
  --x-size-border-radius-bottom-left-input-group-default: 0;
6928
7050
  }
7051
+ :root {
7052
+ --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7053
+ --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
7054
+ --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
7055
+ --x-size-border-radius-bottom-right-input-group-card: var(
7056
+ --x-size-border-radius-input-group-card
7057
+ );
7058
+ --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7059
+ }
6929
7060
  :root {
6930
7061
  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
6931
7062
  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
@@ -6942,6 +7073,13 @@
6942
7073
  --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-pill);
6943
7074
  --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-pill);
6944
7075
  }
7076
+ :root {
7077
+ --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7078
+ --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
7079
+ --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
7080
+ --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
7081
+ --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
7082
+ }
6945
7083
  :root {
6946
7084
  --x-size-padding-top-input-line: var(--x-size-base-03);
6947
7085
  --x-size-padding-right-input-line: 0;
@@ -6952,13 +7090,6 @@
6952
7090
  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
6953
7091
  --x-size-border-width-left-input-line: 0;
6954
7092
  }
6955
- :root {
6956
- --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
6957
- --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
6958
- --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
6959
- --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
6960
- --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
6961
- }
6962
7093
  :root {
6963
7094
  --x-size-padding-top-input-line: var(--x-size-base-03);
6964
7095
  --x-size-padding-right-input-line: 0;
@@ -7089,13 +7220,6 @@
7089
7220
  font-weight: var(--x-number-font-weight-input-placeholder-default);
7090
7221
  line-height: var(--x-size-line-height-input-placeholder-default);
7091
7222
  }
7092
- :root {
7093
- --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7094
- --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7095
- --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7096
- --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7097
- --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7098
- }
7099
7223
  :root {
7100
7224
  --x-color-background-input-default: var(--x-color-base-neutral-100);
7101
7225
  --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7131,6 +7255,13 @@
7131
7255
  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7132
7256
  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7133
7257
  }
7258
+ :root {
7259
+ --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7260
+ --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7261
+ --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7262
+ --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7263
+ --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7264
+ }
7134
7265
 
7135
7266
  .x-input--card.x-input,
7136
7267
  .x-input--card .x-input {
@@ -7153,137 +7284,6 @@
7153
7284
  --x-size-width-icon-default: var(--x-size-width-icon-xl);
7154
7285
  --x-size-height-icon-default: var(--x-size-height-icon-xl);
7155
7286
  }
7156
- :root {
7157
- --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
7158
- --x-color-text-option-list-button-bottom-selected-hover: var(
7159
- --x-color-text-option-list-button-bottom-selected
7160
- );
7161
- --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
7162
- --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
7163
- --x-color-border-option-list-item-bottom: transparent;
7164
- --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
7165
- --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
7166
- --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
7167
- --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
7168
- --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
7169
- --x-color-border-top-option-list-item-bottom-selected: var(
7170
- --x-color-border-option-list-item-bottom
7171
- );
7172
- --x-color-border-right-option-list-item-bottom-selected: var(
7173
- --x-color-border-option-list-item-bottom
7174
- );
7175
- --x-color-border-bottom-option-list-item-bottom-selected: var(
7176
- --x-color-border-option-list-item-bottom-selected
7177
- );
7178
- --x-color-border-left-option-list-item-bottom-selected: var(
7179
- --x-color-border-option-list-item-bottom
7180
- );
7181
- --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
7182
- --x-size-border-width-top-option-list-item-bottom: 0;
7183
- --x-size-border-width-right-option-list-item-bottom: 0;
7184
- --x-size-border-width-bottom-option-list-item-bottom: var(
7185
- --x-size-border-width-option-list-item-bottom
7186
- );
7187
- --x-size-border-width-left-option-list-item-bottom: 0;
7188
- --x-size-border-width-top-option-list-item-bottom-selected: 0;
7189
- --x-size-border-width-right-option-list-item-bottom-selected: 0;
7190
- --x-size-border-width-bottom-option-list-item-bottom-selected: var(
7191
- --x-size-border-width-option-list-item-bottom
7192
- );
7193
- --x-size-border-width-left-option-list-item-bottom-selected: 0;
7194
- --x-size-font-option-list-button-bottom: var(--x-size-font-text);
7195
- --x-font-decoration-option-list-button-bottom-hover: none;
7196
- --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
7197
- --x-number-font-weight-option-list-button-bottom-selected: var(
7198
- --x-number-font-weight-base-regular
7199
- );
7200
- }
7201
-
7202
- .x-option-list--bottom.x-option-list,
7203
- .x-option-list--bottom .x-option-list {
7204
- --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
7205
- --x-color-text-option-list-button-default-hover: var(
7206
- --x-color-text-option-list-button-bottom-hover
7207
- );
7208
- --x-color-border-option-list-item-default: var(--x-color-border-option-list-item-bottom);
7209
- --x-color-border-top-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
7210
- --x-color-border-right-option-list-item-default: var(
7211
- --x-color-border-top-option-list-item-bottom
7212
- );
7213
- --x-color-border-bottom-option-list-item-default: var(
7214
- --x-color-border-top-option-list-item-bottom
7215
- );
7216
- --x-color-border-left-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
7217
- --x-size-border-width-option-list-item-default: var(
7218
- --x-size-border-width-option-list-item-bottom
7219
- );
7220
- --x-size-border-width-top-option-list-item-default: var(
7221
- --x-size-border-width-top-option-list-item-bottom
7222
- );
7223
- --x-size-border-width-right-option-list-item-default: var(
7224
- --x-size-border-width-right-option-list-item-bottom
7225
- );
7226
- --x-size-border-width-bottom-option-list-item-default: var(
7227
- --x-size-border-width-bottom-option-list-item-bottom
7228
- );
7229
- --x-size-border-width-left-option-list-item-default: var(
7230
- --x-size-border-width-left-option-list-item-bottom
7231
- );
7232
- --x-font-decoration-option-list-button-default-hover: var(
7233
- --x-font-decoration-option-list-button-bottom-hover
7234
- );
7235
- --x-size-font-option-list-button-default: var(--x-size-font-option-list-button-bottom);
7236
- --x-number-font-weight-option-list-button-default: var(
7237
- --x-number-font-weight-option-list-button-bottom
7238
- );
7239
- }
7240
- .x-option-list--bottom.x-option-list .x-option-list__item.x-option-list__item--is-selected,
7241
- .x-option-list--bottom .x-option-list .x-option-list__item.x-option-list__item--is-selected {
7242
- --x-color-text-option-list-button-default-selected: var(
7243
- --x-color-text-option-list-button-bottom-selected
7244
- );
7245
- --x-color-text-option-list-button-default-selected-hover: var(
7246
- --x-color-text-option-list-button-bottom-selected-hover
7247
- );
7248
- --x-color-border-option-list-item-default-selected: var(
7249
- --x-color-border-option-list-item-bottom-selected
7250
- );
7251
- --x-color-border-top-option-list-item-default-selected: var(
7252
- --x-color-border-top-option-list-item-bottom-selected
7253
- );
7254
- --x-color-border-right-option-list-item-default-selected: var(
7255
- --x-color-border-top-option-list-item-bottom-selected
7256
- );
7257
- --x-color-border-bottom-option-list-item-default-selected: var(
7258
- --x-color-border-bottom-option-list-item-bottom-selected
7259
- );
7260
- --x-color-border-left-option-list-item-default-selected: var(
7261
- --x-color-border-top-option-list-item-bottom-selected
7262
- );
7263
- --x-size-border-width-top-option-list-item-default: var(
7264
- --x-size-border-width-top-option-list-item-bottom-selected
7265
- );
7266
- --x-size-border-width-right-option-list-item-default: var(
7267
- --x-size-border-width-right-option-list-item-bottom-selected
7268
- );
7269
- --x-size-border-width-bottom-option-list-item-default: var(
7270
- --x-size-border-width-bottom-option-list-item-bottom-selected
7271
- );
7272
- --x-size-border-width-left-option-list-item-default: var(
7273
- --x-size-border-width-left-option-list-item-bottom-selected
7274
- );
7275
- --x-number-font-weight-option-list-button-default-selected: var(
7276
- --x-number-font-weight-option-list-button-bottom-selected
7277
- );
7278
- }
7279
- .x-option-list--bottom.x-option-list .x-option-list__item:last-child,
7280
- .x-option-list--bottom .x-option-list .x-option-list__item:last-child {
7281
- --x-size-border-width-option-list-item-default: inherit;
7282
- --x-size-border-width-top-option-list-item-default: inherit;
7283
- --x-size-border-width-right-option-list-item-default: inherit;
7284
- --x-size-border-width-bottom-option-list-item-default: inherit;
7285
- --x-size-border-width-left-option-list-item-default: inherit;
7286
- }
7287
7287
  :root {
7288
7288
  --x-size-width-icon-xl: var(--x-size-base-07);
7289
7289
  --x-size-height-icon-xl: var(--x-size-base-07);
@@ -7292,6 +7292,15 @@
7292
7292
  --x-size-width-icon-s: var(--x-size-base-03);
7293
7293
  --x-size-height-icon-s: var(--x-size-base-03);
7294
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
+ }
7299
+
7300
+ .x-icon--s {
7301
+ --x-size-width-icon-default: var(--x-size-width-icon-s);
7302
+ --x-size-height-icon-default: var(--x-size-height-icon-s);
7303
+ }
7295
7304
  :root {
7296
7305
  --x-size-width-icon-m: var(--x-size-base-05);
7297
7306
  --x-size-height-icon-m: var(--x-size-base-05);
@@ -7306,26 +7315,17 @@
7306
7315
  --x-size-height-icon-default: var(--x-size-height-icon-m);
7307
7316
  }
7308
7317
  :root {
7309
- --x-size-width-icon-s: var(--x-size-base-03);
7310
- --x-size-height-icon-s: var(--x-size-base-03);
7311
- }
7312
-
7313
- .x-icon--s {
7314
- --x-size-width-icon-default: var(--x-size-width-icon-s);
7315
- --x-size-height-icon-default: var(--x-size-height-icon-s);
7318
+ --x-size-width-icon-l: var(--x-size-base-06);
7319
+ --x-size-height-icon-l: var(--x-size-base-06);
7316
7320
  }
7317
7321
  :root {
7318
7322
  --x-size-width-icon-l: var(--x-size-base-06);
7319
7323
  --x-size-height-icon-l: var(--x-size-base-06);
7320
7324
  }
7321
- :root {
7322
- --x-color-stroke-icon-default: currentColor;
7323
- --x-color-fill-icon-default: none;
7324
- --x-size-width-icon-default: var(--x-size-width-icon-m);
7325
- --x-size-height-icon-default: var(--x-size-height-icon-m);
7326
- --x-string-stroke-linecap-icon-default: butt;
7327
- --x-string-stroke-linejoin-icon-default: mitter;
7328
- --x-size-stroke-width-icon-default: 1px;
7325
+
7326
+ .x-icon--l {
7327
+ --x-size-width-icon-default: var(--x-size-width-icon-l);
7328
+ --x-size-height-icon-default: var(--x-size-height-icon-l);
7329
7329
  }
7330
7330
  :root {
7331
7331
  --x-color-stroke-icon-default: currentColor;
@@ -7358,25 +7358,19 @@
7358
7358
  fill: var(--x-color-stroke-icon-default);
7359
7359
  }
7360
7360
  :root {
7361
- --x-size-width-icon-l: var(--x-size-base-06);
7362
- --x-size-height-icon-l: var(--x-size-base-06);
7363
- }
7364
-
7365
- .x-icon--l {
7366
- --x-size-width-icon-default: var(--x-size-width-icon-l);
7367
- --x-size-height-icon-default: var(--x-size-height-icon-l);
7361
+ --x-color-stroke-icon-default: currentColor;
7362
+ --x-color-fill-icon-default: none;
7363
+ --x-size-width-icon-default: var(--x-size-width-icon-m);
7364
+ --x-size-height-icon-default: var(--x-size-height-icon-m);
7365
+ --x-string-stroke-linecap-icon-default: butt;
7366
+ --x-string-stroke-linejoin-icon-default: mitter;
7367
+ --x-size-stroke-width-icon-default: 1px;
7368
7368
  }
7369
7369
  :root {
7370
7370
  --x-size-padding-grid: 0;
7371
7371
  --x-size-gap-grid: var(--x-size-base-03);
7372
7372
  --x-size-min-width-grid-item: 150px;
7373
7373
  }
7374
- .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7375
- .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7376
- .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7377
- .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7378
- margin-left: auto;
7379
- }
7380
7374
  :root {
7381
7375
  --x-size-padding-grid: 0;
7382
7376
  --x-size-gap-grid: var(--x-size-base-03);
@@ -7403,6 +7397,19 @@
7403
7397
  .x-grid-list--cols-auto .x-grid-list__item {
7404
7398
  min-width: var(--x-size-min-width-grid-item);
7405
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
+ }
7406
+ :root {
7407
+ --x-size-margin-filter-children: 0;
7408
+ --x-size-padding-top-filter-children: 0;
7409
+ --x-size-padding-right-filter-children: 0;
7410
+ --x-size-padding-bottom-filter-children: 0;
7411
+ --x-size-padding-left-filter-children: var(--x-size-base-05);
7412
+ }
7406
7413
  :root {
7407
7414
  --x-size-margin-filter-children: 0;
7408
7415
  --x-size-padding-top-filter-children: 0;
@@ -7410,6 +7417,31 @@
7410
7417
  --x-size-padding-bottom-filter-children: 0;
7411
7418
  --x-size-padding-left-filter-children: var(--x-size-base-05);
7412
7419
  }
7420
+
7421
+ .x-hierarchical-filter-container {
7422
+ list-style: none;
7423
+ }
7424
+ [dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7425
+ padding-left: var(--x-size-padding-left-filter-children);
7426
+ }
7427
+ [dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7428
+ padding-right: var(--x-size-padding-left-filter-children);
7429
+ }
7430
+ [dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7431
+ padding-right: var(--x-size-padding-right-filter-children);
7432
+ }
7433
+ [dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7434
+ padding-left: var(--x-size-padding-right-filter-children);
7435
+ }
7436
+ .x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7437
+ margin: var(--x-size-margin-filter-children);
7438
+ padding-top: var(--x-size-padding-top-filter-children);
7439
+ padding-bottom: var(--x-size-padding-bottom-filter-children);
7440
+ }
7441
+ .x-hierarchical-filter-container .x-hierarchical-filter-container,
7442
+ .x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
7443
+ width: 100%;
7444
+ }
7413
7445
  :root {
7414
7446
  --x-color-background-filter-default: transparent;
7415
7447
  --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -7540,52 +7572,33 @@
7540
7572
  .x-filter > *, .x-facet-filter > * {
7541
7573
  flex: 0 0 auto;
7542
7574
  }
7543
- .x-filter__label, .x-facet-filter__label {
7544
- flex: 0 1 auto;
7545
- }
7546
- .x-filter__count, .x-facet-filter__count {
7547
- font-weight: var(--x-number-font-weight-filter-count-default);
7548
- }
7549
- .x-filter--is-selected, .x-filter.x-selected, .x-facet-filter--is-selected, .x-facet-filter.x-selected {
7550
- --x-color-background-filter-default: var(--x-color-background-filter-default-selected);
7551
- --x-color-border-filter-default: var(--x-color-border-filter-default-selected);
7552
- --x-color-text-filter-default: var(--x-color-text-filter-default-selected);
7553
- --x-number-font-weight-filter-default: var(--x-number-font-weight-filter-default-selected);
7554
- --x-number-font-weight-filter-count-default: var(
7555
- --x-number-font-weight-filter-count-default-selected
7556
- );
7557
- }
7558
- :root {
7559
- --x-size-margin-filter-children: 0;
7560
- --x-size-padding-top-filter-children: 0;
7561
- --x-size-padding-right-filter-children: 0;
7562
- --x-size-padding-bottom-filter-children: 0;
7563
- --x-size-padding-left-filter-children: var(--x-size-base-05);
7564
- }
7565
-
7566
- .x-hierarchical-filter-container {
7567
- list-style: none;
7568
- }
7569
- [dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7570
- padding-left: var(--x-size-padding-left-filter-children);
7571
- }
7572
- [dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7573
- padding-right: var(--x-size-padding-left-filter-children);
7574
- }
7575
- [dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7576
- padding-right: var(--x-size-padding-right-filter-children);
7575
+ .x-filter__label, .x-facet-filter__label {
7576
+ flex: 0 1 auto;
7577
7577
  }
7578
- [dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7579
- padding-left: var(--x-size-padding-right-filter-children);
7578
+ .x-filter__count, .x-facet-filter__count {
7579
+ font-weight: var(--x-number-font-weight-filter-count-default);
7580
7580
  }
7581
- .x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7582
- margin: var(--x-size-margin-filter-children);
7583
- padding-top: var(--x-size-padding-top-filter-children);
7584
- padding-bottom: var(--x-size-padding-bottom-filter-children);
7581
+ .x-filter--is-selected, .x-filter.x-selected, .x-facet-filter--is-selected, .x-facet-filter.x-selected {
7582
+ --x-color-background-filter-default: var(--x-color-background-filter-default-selected);
7583
+ --x-color-border-filter-default: var(--x-color-border-filter-default-selected);
7584
+ --x-color-text-filter-default: var(--x-color-text-filter-default-selected);
7585
+ --x-number-font-weight-filter-default: var(--x-number-font-weight-filter-default-selected);
7586
+ --x-number-font-weight-filter-count-default: var(
7587
+ --x-number-font-weight-filter-count-default-selected
7588
+ );
7585
7589
  }
7586
- .x-hierarchical-filter-container .x-hierarchical-filter-container,
7587
- .x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
7588
- width: 100%;
7590
+ :root {
7591
+ --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
7592
+ --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
7593
+ --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
7594
+ --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
7595
+ --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
7596
+ --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
7597
+ --x-size-padding-facet-header-outlined: var(--x-size-base-03);
7598
+ --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7599
+ --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7600
+ --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7601
+ --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7589
7602
  }
7590
7603
  :root {
7591
7604
  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
@@ -7647,19 +7660,6 @@
7647
7660
  --x-size-border-width-left-facet-header-line
7648
7661
  );
7649
7662
  }
7650
- :root {
7651
- --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
7652
- --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
7653
- --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
7654
- --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
7655
- --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
7656
- --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
7657
- --x-size-padding-facet-header-outlined: var(--x-size-base-03);
7658
- --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7659
- --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7660
- --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7661
- --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
7662
- }
7663
7663
  :root {
7664
7664
  --x-color-background-facet-default: transparent;
7665
7665
  --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7693,18 +7693,6 @@
7693
7693
  --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
7694
7694
  --x-size-line-height-facet-default: var(--x-size-line-height-title3);
7695
7695
  }
7696
- :root {
7697
- --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
7698
- --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
7699
- --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
7700
- --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
7701
- --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
7702
- --x-size-padding-facet-header-card: var(--x-size-base-03);
7703
- --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
7704
- --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
7705
- --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7706
- --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7707
- }
7708
7696
  :root {
7709
7697
  --x-color-background-facet-default: transparent;
7710
7698
  --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7844,6 +7832,18 @@
7844
7832
  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7845
7833
  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7846
7834
  }
7835
+ :root {
7836
+ --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
7837
+ --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
7838
+ --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
7839
+ --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
7840
+ --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
7841
+ --x-size-padding-facet-header-card: var(--x-size-base-03);
7842
+ --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
7843
+ --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
7844
+ --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7845
+ --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7846
+ }
7847
7847
 
7848
7848
  .x-facet--card.x-facet,
7849
7849
  .x-facet--card .x-facet {
@@ -7861,6 +7861,9 @@
7861
7861
  :root {
7862
7862
  --x-size-width-dropdown-xl: 282px;
7863
7863
  }
7864
+ :root {
7865
+ --x-size-width-dropdown-xl: 282px;
7866
+ }
7864
7867
 
7865
7868
  .x-dropdown.x-dropdown--xl {
7866
7869
  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
@@ -7868,9 +7871,6 @@
7868
7871
  :root {
7869
7872
  --x-size-width-dropdown-s: 74px;
7870
7873
  }
7871
- :root {
7872
- --x-size-width-dropdown-xl: 282px;
7873
- }
7874
7874
  :root {
7875
7875
  --x-size-width-dropdown-s: 74px;
7876
7876
  }
@@ -7886,6 +7886,14 @@
7886
7886
  --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7887
7887
  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7888
7888
  }
7889
+ :root {
7890
+ --x-size-gap-dropdown-pill: var(--x-size-base-03);
7891
+ --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
7892
+ --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7893
+ --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7894
+ --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7895
+ --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7896
+ }
7889
7897
 
7890
7898
  .x-dropdown--pill {
7891
7899
  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-pill);
@@ -7955,30 +7963,6 @@
7955
7963
  --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7956
7964
  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7957
7965
  }
7958
- :root {
7959
- --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7960
- --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
7961
- --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
7962
- --x-size-padding-right-dropdown-item-line: 0;
7963
- --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
7964
- --x-size-padding-left-dropdown-item-line: 0;
7965
- --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
7966
- --x-size-padding-right-dropdown-toggle-line: 0;
7967
- --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
7968
- --x-size-padding-left-dropdown-toggle-line: 0;
7969
- --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
7970
- --x-size-border-width-top-dropdown-toggle-line: 0;
7971
- --x-size-border-width-right-dropdown-toggle-line: 0;
7972
- --x-size-border-width-bottom-dropdown-toggle-line: var(
7973
- --x-size-border-width-dropdown-toggle-line
7974
- );
7975
- --x-size-border-width-left-dropdown-toggle-line: 0;
7976
- --x-size-border-width-dropdown-list-line: 0;
7977
- --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7978
- --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7979
- --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7980
- --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7981
- }
7982
7966
 
7983
7967
  .x-dropdown--line {
7984
7968
  --x-size-padding-top-dropdown-item-default: var(--x-size-padding-top-dropdown-item-line);
@@ -8021,6 +8005,30 @@
8021
8005
  :root {
8022
8006
  --x-size-width-dropdown-l: 202px;
8023
8007
  }
8008
+ :root {
8009
+ --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
8010
+ --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
8011
+ --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
8012
+ --x-size-padding-right-dropdown-item-line: 0;
8013
+ --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
8014
+ --x-size-padding-left-dropdown-item-line: 0;
8015
+ --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
8016
+ --x-size-padding-right-dropdown-toggle-line: 0;
8017
+ --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
8018
+ --x-size-padding-left-dropdown-toggle-line: 0;
8019
+ --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
8020
+ --x-size-border-width-top-dropdown-toggle-line: 0;
8021
+ --x-size-border-width-right-dropdown-toggle-line: 0;
8022
+ --x-size-border-width-bottom-dropdown-toggle-line: var(
8023
+ --x-size-border-width-dropdown-toggle-line
8024
+ );
8025
+ --x-size-border-width-left-dropdown-toggle-line: 0;
8026
+ --x-size-border-width-dropdown-list-line: 0;
8027
+ --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8028
+ --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8029
+ --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8030
+ --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8031
+ }
8024
8032
  :root {
8025
8033
  --x-size-width-dropdown-l: 202px;
8026
8034
  }
@@ -8344,12 +8352,17 @@
8344
8352
  left: 0;
8345
8353
  }
8346
8354
  :root {
8347
- --x-size-gap-dropdown-pill: var(--x-size-base-03);
8348
- --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
8349
- --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
8350
- --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
8351
- --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
8352
- --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
8355
+ --x-size-gap-dropdown-card: var(--x-size-base-03);
8356
+ --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8357
+ --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8358
+ --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8359
+ --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8360
+ --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8361
+ --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8362
+ --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8363
+ --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8364
+ --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8365
+ --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8353
8366
  }
8354
8367
  :root {
8355
8368
  --x-size-gap-dropdown-card: var(--x-size-base-03);
@@ -8364,6 +8377,36 @@
8364
8377
  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8365
8378
  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8366
8379
  }
8380
+
8381
+ .x-dropdown--card {
8382
+ --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
8383
+ --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
8384
+ --x-size-border-radius-top-left-dropdown-default: var(
8385
+ --x-size-border-radius-top-left-dropdown-card
8386
+ );
8387
+ --x-size-border-radius-top-right-dropdown-default: var(
8388
+ --x-size-border-radius-top-right-dropdown-card
8389
+ );
8390
+ --x-size-border-radius-bottom-right-dropdown-default: var(
8391
+ --x-size-border-radius-bottom-right-dropdown-card
8392
+ );
8393
+ --x-size-border-radius-bottom-left-dropdown-default: var(
8394
+ --x-size-border-radius-bottom-left-dropdown-card
8395
+ );
8396
+ --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
8397
+ --x-size-border-width-top-dropdown-list-default: var(
8398
+ --x-size-border-width-top-dropdown-list-card
8399
+ );
8400
+ --x-size-border-width-right-dropdown-list-default: var(
8401
+ --x-size-border-width-right-dropdown-list-card
8402
+ );
8403
+ --x-size-border-width-bottom-dropdown-list-default: var(
8404
+ --x-size-border-width-bottom-dropdown-list-card
8405
+ );
8406
+ --x-size-border-width-left-dropdown-list-default: var(
8407
+ --x-size-border-width-left-dropdown-list-card
8408
+ );
8409
+ }
8367
8410
  :root {
8368
8411
  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8369
8412
  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8568,49 +8611,6 @@
8568
8611
  --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
8569
8612
  --x-size-line-height-button-default: var(--x-size-line-height-text);
8570
8613
  }
8571
- :root {
8572
- --x-size-gap-dropdown-card: var(--x-size-base-03);
8573
- --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8574
- --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8575
- --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8576
- --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8577
- --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8578
- --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8579
- --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8580
- --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8581
- --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8582
- --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8583
- }
8584
-
8585
- .x-dropdown--card {
8586
- --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
8587
- --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
8588
- --x-size-border-radius-top-left-dropdown-default: var(
8589
- --x-size-border-radius-top-left-dropdown-card
8590
- );
8591
- --x-size-border-radius-top-right-dropdown-default: var(
8592
- --x-size-border-radius-top-right-dropdown-card
8593
- );
8594
- --x-size-border-radius-bottom-right-dropdown-default: var(
8595
- --x-size-border-radius-bottom-right-dropdown-card
8596
- );
8597
- --x-size-border-radius-bottom-left-dropdown-default: var(
8598
- --x-size-border-radius-bottom-left-dropdown-card
8599
- );
8600
- --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
8601
- --x-size-border-width-top-dropdown-list-default: var(
8602
- --x-size-border-width-top-dropdown-list-card
8603
- );
8604
- --x-size-border-width-right-dropdown-list-default: var(
8605
- --x-size-border-width-right-dropdown-list-card
8606
- );
8607
- --x-size-border-width-bottom-dropdown-list-default: var(
8608
- --x-size-border-width-bottom-dropdown-list-card
8609
- );
8610
- --x-size-border-width-left-dropdown-list-default: var(
8611
- --x-size-border-width-left-dropdown-list-card
8612
- );
8613
- }
8614
8614
  :root {
8615
8615
  --x-color-background-button-default: var(--x-color-base-lead);
8616
8616
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8703,6 +8703,23 @@
8703
8703
  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8704
8704
  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8705
8705
  }
8706
+ :root {
8707
+ --x-color-background-badge-default: var(--x-color-base-neutral-10);
8708
+ --x-color-text-badge-default: var(--x-color-base-neutral-100);
8709
+ --x-color-border-badge-default: var(--x-color-base-neutral-10);
8710
+ --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8711
+ --x-size-border-width-badge-default: 0;
8712
+ --x-size-width-badge-default: 1.5em;
8713
+ --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8714
+ --x-size-font-badge-default: var(--x-size-font-base-xs);
8715
+ }
8716
+ :root {
8717
+ --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8718
+ --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8719
+ --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8720
+ --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8721
+ --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8722
+ }
8706
8723
 
8707
8724
  .x-button--card.x-button,
8708
8725
  .x-button--card .x-button {
@@ -8728,16 +8745,6 @@
8728
8745
  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8729
8746
  --x-size-font-badge-default: var(--x-size-font-base-xs);
8730
8747
  }
8731
- :root {
8732
- --x-color-background-badge-default: var(--x-color-base-neutral-10);
8733
- --x-color-text-badge-default: var(--x-color-base-neutral-100);
8734
- --x-color-border-badge-default: var(--x-color-base-neutral-10);
8735
- --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8736
- --x-size-border-width-badge-default: 0;
8737
- --x-size-width-badge-default: 1.5em;
8738
- --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8739
- --x-size-font-badge-default: var(--x-size-font-base-xs);
8740
- }
8741
8748
 
8742
8749
  [dir="ltr"] .x-badge {
8743
8750
  right: calc(var(--x-size-width-badge-default) / 4);
@@ -8818,11 +8825,4 @@
8818
8825
  --x-size-border-radius-base-m: var(--x-size-base-06);
8819
8826
  --x-size-border-radius-base-pill: 99999px;
8820
8827
  --x-size-border-width-base: 1px;
8821
- }
8822
- :root {
8823
- --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8824
- --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8825
- --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8826
- --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8827
- --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8828
8828
  }