@empathyco/x-components 6.0.0-alpha.15 → 6.0.0-alpha.16

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,15 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [6.0.0-alpha.16](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.15...@empathyco/x-components@6.0.0-alpha.16) (2024-11-21)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **next-queries:** export types from module(#1661) ([ef0f71e](https://github.com/empathyco/x/commit/ef0f71eb08494699b4c017d077dc9fc8fbe97ce0))
12
+
13
+
14
+
6
15
  ## [6.0.0-alpha.15](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.14...@empathyco/x-components@6.0.0-alpha.15) (2024-11-20)
7
16
 
8
17
 
@@ -1,5 +1,4 @@
1
1
 
2
-
3
2
  .x-uppercase {
4
3
  text-transform: uppercase;
5
4
  }
@@ -34,6 +33,26 @@
34
33
  -webkit-text-decoration-line: none;
35
34
  text-decoration-line: none;
36
35
  }
36
+ .x-static {
37
+ position: static !important;
38
+ }
39
+
40
+ .x-fixed {
41
+ position: fixed !important;
42
+ }
43
+
44
+ .x-absolute {
45
+ position: absolute !important;
46
+ }
47
+
48
+ .x-relative {
49
+ position: relative !important;
50
+ }
51
+
52
+ .x-sticky {
53
+ position: sticky !important;
54
+ }
55
+
37
56
  .x-padding--00 {
38
57
  padding: 0 !important;
39
58
  }
@@ -937,25 +956,6 @@
937
956
  [dir="rtl"] .x-margin--left-20 {
938
957
  margin-right: var(--x-size-base-20) !important;
939
958
  }
940
- .x-static {
941
- position: static !important;
942
- }
943
-
944
- .x-fixed {
945
- position: fixed !important;
946
- }
947
-
948
- .x-absolute {
949
- position: absolute !important;
950
- }
951
-
952
- .x-relative {
953
- position: relative !important;
954
- }
955
-
956
- .x-sticky {
957
- position: sticky !important;
958
- }
959
959
  .x-line-height--none {
960
960
  line-height: 1 !important;
961
961
  }
@@ -1299,6 +1299,71 @@
1299
1299
  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1300
1300
  0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1301
1301
  }
1302
+
1303
+ .x-shadow--none {
1304
+ box-shadow: none !important;
1305
+ }
1306
+
1307
+ .x-shadow--01 {
1308
+ box-shadow: var(--x-string-box-shadow-01) !important;
1309
+ }
1310
+ .x-shadow--bottom-01 {
1311
+ box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1312
+ }
1313
+ .x-shadow--02 {
1314
+ box-shadow: var(--x-string-box-shadow-02) !important;
1315
+ }
1316
+ .x-shadow--bottom-02 {
1317
+ box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1318
+ }
1319
+ .x-shadow--03 {
1320
+ box-shadow: var(--x-string-box-shadow-03) !important;
1321
+ }
1322
+ .x-shadow--bottom-03 {
1323
+ box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1324
+ }
1325
+ .x-shadow--04 {
1326
+ box-shadow: var(--x-string-box-shadow-04) !important;
1327
+ }
1328
+ .x-shadow--bottom-04 {
1329
+ box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1330
+ }
1331
+ .x-shadow--05 {
1332
+ box-shadow: var(--x-string-box-shadow-05) !important;
1333
+ }
1334
+ .x-shadow--bottom-05 {
1335
+ box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1336
+ }
1337
+ .x-shadow--06 {
1338
+ box-shadow: var(--x-string-box-shadow-06) !important;
1339
+ }
1340
+ .x-shadow--bottom-06 {
1341
+ box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1342
+ }
1343
+ .x-shadow--07 {
1344
+ box-shadow: var(--x-string-box-shadow-07) !important;
1345
+ }
1346
+ .x-shadow--bottom-07 {
1347
+ box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1348
+ }
1349
+ .x-shadow--08 {
1350
+ box-shadow: var(--x-string-box-shadow-08) !important;
1351
+ }
1352
+ .x-shadow--bottom-08 {
1353
+ box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1354
+ }
1355
+ .x-shadow--09 {
1356
+ box-shadow: var(--x-string-box-shadow-09) !important;
1357
+ }
1358
+ .x-shadow--bottom-09 {
1359
+ box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1360
+ }
1361
+ .x-shadow--10 {
1362
+ box-shadow: var(--x-string-box-shadow-10) !important;
1363
+ }
1364
+ .x-shadow--bottom-10 {
1365
+ box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1366
+ }
1302
1367
  /* Material Elevations extracted from:
1303
1368
  https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1304
1369
  */
@@ -1367,71 +1432,6 @@
1367
1432
  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1368
1433
  0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1369
1434
  }
1370
-
1371
- .x-shadow--none {
1372
- box-shadow: none !important;
1373
- }
1374
-
1375
- .x-shadow--01 {
1376
- box-shadow: var(--x-string-box-shadow-01) !important;
1377
- }
1378
- .x-shadow--bottom-01 {
1379
- box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1380
- }
1381
- .x-shadow--02 {
1382
- box-shadow: var(--x-string-box-shadow-02) !important;
1383
- }
1384
- .x-shadow--bottom-02 {
1385
- box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1386
- }
1387
- .x-shadow--03 {
1388
- box-shadow: var(--x-string-box-shadow-03) !important;
1389
- }
1390
- .x-shadow--bottom-03 {
1391
- box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1392
- }
1393
- .x-shadow--04 {
1394
- box-shadow: var(--x-string-box-shadow-04) !important;
1395
- }
1396
- .x-shadow--bottom-04 {
1397
- box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1398
- }
1399
- .x-shadow--05 {
1400
- box-shadow: var(--x-string-box-shadow-05) !important;
1401
- }
1402
- .x-shadow--bottom-05 {
1403
- box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1404
- }
1405
- .x-shadow--06 {
1406
- box-shadow: var(--x-string-box-shadow-06) !important;
1407
- }
1408
- .x-shadow--bottom-06 {
1409
- box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1410
- }
1411
- .x-shadow--07 {
1412
- box-shadow: var(--x-string-box-shadow-07) !important;
1413
- }
1414
- .x-shadow--bottom-07 {
1415
- box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1416
- }
1417
- .x-shadow--08 {
1418
- box-shadow: var(--x-string-box-shadow-08) !important;
1419
- }
1420
- .x-shadow--bottom-08 {
1421
- box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1422
- }
1423
- .x-shadow--09 {
1424
- box-shadow: var(--x-string-box-shadow-09) !important;
1425
- }
1426
- .x-shadow--bottom-09 {
1427
- box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1428
- }
1429
- .x-shadow--10 {
1430
- box-shadow: var(--x-string-box-shadow-10) !important;
1431
- }
1432
- .x-shadow--bottom-10 {
1433
- box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1434
- }
1435
1435
  *[class*=x-border-width--] {
1436
1436
  border-width: 0;
1437
1437
  }
@@ -3274,6 +3274,49 @@
3274
3274
  [dir="rtl"] .x-border-radius--bottom-right-20 {
3275
3275
  border-bottom-left-radius: var(--x-size-base-20) !important;
3276
3276
  }
3277
+ .x-border-color--lead {
3278
+ border-color: var(--x-color-base-lead) !important;
3279
+ }
3280
+
3281
+ .x-border-color--auxiliary {
3282
+ border-color: var(--x-color-base-auxiliary) !important;
3283
+ }
3284
+
3285
+ .x-border-color--neutral-10 {
3286
+ border-color: var(--x-color-base-neutral-10) !important;
3287
+ }
3288
+
3289
+ .x-border-color--neutral-35 {
3290
+ border-color: var(--x-color-base-neutral-35) !important;
3291
+ }
3292
+
3293
+ .x-border-color--neutral-70 {
3294
+ border-color: var(--x-color-base-neutral-70) !important;
3295
+ }
3296
+
3297
+ .x-border-color--neutral-95 {
3298
+ border-color: var(--x-color-base-neutral-95) !important;
3299
+ }
3300
+
3301
+ .x-border-color--neutral-100 {
3302
+ border-color: var(--x-color-base-neutral-100) !important;
3303
+ }
3304
+
3305
+ .x-border-color--accent {
3306
+ border-color: var(--x-color-base-accent) !important;
3307
+ }
3308
+
3309
+ .x-border-color--enable {
3310
+ border-color: var(--x-color-base-enable) !important;
3311
+ }
3312
+
3313
+ .x-border-color--disable {
3314
+ border-color: var(--x-color-base-disable) !important;
3315
+ }
3316
+
3317
+ .x-border-color--transparent {
3318
+ border-color: var(--x-color-base-transparent) !important;
3319
+ }
3277
3320
  .x-background--lead {
3278
3321
  background-color: var(--x-color-base-lead) !important;
3279
3322
  }
@@ -3332,49 +3375,6 @@
3332
3375
  .x-text--stroke.x-small {
3333
3376
  --x-string-text-decoration-small: line-through;
3334
3377
  }
3335
- .x-border-color--lead {
3336
- border-color: var(--x-color-base-lead) !important;
3337
- }
3338
-
3339
- .x-border-color--auxiliary {
3340
- border-color: var(--x-color-base-auxiliary) !important;
3341
- }
3342
-
3343
- .x-border-color--neutral-10 {
3344
- border-color: var(--x-color-base-neutral-10) !important;
3345
- }
3346
-
3347
- .x-border-color--neutral-35 {
3348
- border-color: var(--x-color-base-neutral-35) !important;
3349
- }
3350
-
3351
- .x-border-color--neutral-70 {
3352
- border-color: var(--x-color-base-neutral-70) !important;
3353
- }
3354
-
3355
- .x-border-color--neutral-95 {
3356
- border-color: var(--x-color-base-neutral-95) !important;
3357
- }
3358
-
3359
- .x-border-color--neutral-100 {
3360
- border-color: var(--x-color-base-neutral-100) !important;
3361
- }
3362
-
3363
- .x-border-color--accent {
3364
- border-color: var(--x-color-base-accent) !important;
3365
- }
3366
-
3367
- .x-border-color--enable {
3368
- border-color: var(--x-color-base-enable) !important;
3369
- }
3370
-
3371
- .x-border-color--disable {
3372
- border-color: var(--x-color-base-disable) !important;
3373
- }
3374
-
3375
- .x-border-color--transparent {
3376
- border-color: var(--x-color-base-transparent) !important;
3377
- }
3378
3378
  :root {
3379
3379
  --x-color-text-secondary: var(--x-color-base-neutral-35);
3380
3380
  }
@@ -4165,156 +4165,6 @@
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);
4173
- }
4174
- .x-sliding-panel {
4175
- z-index: 0;
4176
- background-color: var(--x-color-background-sliding-panel);
4177
- }
4178
- .x-sliding-panel__button.x-button {
4179
- --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
4180
- pointer-events: none;
4181
- }
4182
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
4183
- pointer-events: all;
4184
- }
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)));
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)));
4190
- }
4191
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
4192
- opacity: 0;
4193
- }
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;
4197
- }
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;
4201
- }
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
- .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));
4207
- }
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));
4210
- }
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;
4213
- }
4214
- .x-sliding-panel__scroll > * {
4215
- flex: 0 0 auto;
4216
- }
4217
- .x-sliding-panel__scroll > .x-list {
4218
- --x-string-flow-list: row nowrap;
4219
- }
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;
4223
- }
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;
4227
- }
4228
- :root {
4229
- --x-string-align-items-suggestion-default: center;
4230
- --x-color-text-suggestion-default: var(--x-color-text-default);
4231
- --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
4232
- --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
4233
- --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
4234
- --x-color-background-suggestion-default: transparent;
4235
- --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
4236
- --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
4237
- --x-color-text-suggestion-matching-part-default-curated: var(
4238
- --x-color-text-suggestion-matching-part-default
4239
- );
4240
- --x-color-text-suggestion-default-matching-curated: var(
4241
- --x-color-text-suggestion-default-matching
4242
- );
4243
- --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
4244
- --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
4245
- --x-size-padding-top-suggestion-default: var(--x-size-base-01);
4246
- --x-size-padding-right-suggestion-default: 0;
4247
- --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
4248
- --x-size-padding-left-suggestion-default: 0;
4249
- --x-size-gap-suggestion-default: var(--x-size-base-03);
4250
- --x-size-border-width-suggestion-default: 0;
4251
- --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
4252
- --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
4253
- --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
4254
- --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
4255
- --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
4256
- --x-size-border-radius-top-left-suggestion-default: var(
4257
- --x-size-border-radius-suggestion-default
4258
- );
4259
- --x-size-border-radius-top-right-suggestion-default: var(
4260
- --x-size-border-radius-suggestion-default
4261
- );
4262
- --x-size-border-radius-bottom-right-suggestion-default: var(
4263
- --x-size-border-radius-suggestion-default
4264
- );
4265
- --x-size-border-radius-bottom-left-suggestion-default: var(
4266
- --x-size-border-radius-suggestion-default
4267
- );
4268
- --x-font-family-suggestion-default: var(--x-font-family-text);
4269
- --x-size-font-suggestion-default: var(--x-size-font-text);
4270
- --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
4271
- --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
4272
- --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
4273
- --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
4274
- --x-size-line-height-suggestion-matching-part-default: var(
4275
- --x-size-line-height-suggestion-default
4276
- );
4277
- --x-number-font-weight-suggestion-matching-part-default: var(
4278
- --x-number-font-weight-suggestion-default
4279
- );
4280
- --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
4281
- --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
4282
- --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
4283
- --x-number-font-weight-suggestion-default-matching: var(
4284
- --x-number-font-weight-suggestion-default
4285
- );
4286
- --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
4287
- --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
4288
- --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
4289
- --x-number-font-weight-suggestion-filter-default: var(--x-number-font-weight-suggestion-default);
4290
- --x-text-transform-suggestion-filter-default: none;
4291
- --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
4292
- --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
4293
- --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
4294
- --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
4295
- --x-font-family-suggestion-matching-part-default-curated: var(
4296
- --x-font-family-suggestion-matching-part-default
4297
- );
4298
- --x-size-font-suggestion-matching-part-default-curated: var(
4299
- --x-size-font-suggestion-matching-part-default
4300
- );
4301
- --x-size-line-height-suggestion-matching-part-default-curated: var(
4302
- --x-size-line-height-suggestion-matching-part-default
4303
- );
4304
- --x-number-font-weight-suggestion-matching-part-default-curated: var(
4305
- --x-number-font-weight-suggestion-matching-part-default
4306
- );
4307
- --x-font-family-suggestion-default-matching-curated: var(
4308
- --x-font-family-suggestion-default-matching
4309
- );
4310
- --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
4311
- --x-size-line-height-suggestion-default-matching-curated: var(
4312
- --x-size-line-height-suggestion-default-matching
4313
- );
4314
- --x-number-font-weight-suggestion-default-matching-curated: var(
4315
- --x-number-font-weight-suggestion-default-matching
4316
- );
4317
- }
4318
4168
 
4319
4169
  [dir="ltr"] .x-suggestion {
4320
4170
  text-align: left;
@@ -4448,11 +4298,154 @@
4448
4298
  );
4449
4299
  }
4450
4300
  :root {
4451
- --x-string-overflow-scroll: auto;
4452
- --x-color-background-scroll-bar: transparent;
4453
- --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4454
- --x-color-background-scroll-bar-hover: transparent;
4455
- --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4301
+ --x-string-align-items-suggestion-default: center;
4302
+ --x-color-text-suggestion-default: var(--x-color-text-default);
4303
+ --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
4304
+ --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
4305
+ --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
4306
+ --x-color-background-suggestion-default: transparent;
4307
+ --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
4308
+ --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
4309
+ --x-color-text-suggestion-matching-part-default-curated: var(
4310
+ --x-color-text-suggestion-matching-part-default
4311
+ );
4312
+ --x-color-text-suggestion-default-matching-curated: var(
4313
+ --x-color-text-suggestion-default-matching
4314
+ );
4315
+ --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
4316
+ --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
4317
+ --x-size-padding-top-suggestion-default: var(--x-size-base-01);
4318
+ --x-size-padding-right-suggestion-default: 0;
4319
+ --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
4320
+ --x-size-padding-left-suggestion-default: 0;
4321
+ --x-size-gap-suggestion-default: var(--x-size-base-03);
4322
+ --x-size-border-width-suggestion-default: 0;
4323
+ --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
4324
+ --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
4325
+ --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
4326
+ --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
4327
+ --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
4328
+ --x-size-border-radius-top-left-suggestion-default: var(
4329
+ --x-size-border-radius-suggestion-default
4330
+ );
4331
+ --x-size-border-radius-top-right-suggestion-default: var(
4332
+ --x-size-border-radius-suggestion-default
4333
+ );
4334
+ --x-size-border-radius-bottom-right-suggestion-default: var(
4335
+ --x-size-border-radius-suggestion-default
4336
+ );
4337
+ --x-size-border-radius-bottom-left-suggestion-default: var(
4338
+ --x-size-border-radius-suggestion-default
4339
+ );
4340
+ --x-font-family-suggestion-default: var(--x-font-family-text);
4341
+ --x-size-font-suggestion-default: var(--x-size-font-text);
4342
+ --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
4343
+ --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
4344
+ --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
4345
+ --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
4346
+ --x-size-line-height-suggestion-matching-part-default: var(
4347
+ --x-size-line-height-suggestion-default
4348
+ );
4349
+ --x-number-font-weight-suggestion-matching-part-default: var(
4350
+ --x-number-font-weight-suggestion-default
4351
+ );
4352
+ --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
4353
+ --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
4354
+ --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
4355
+ --x-number-font-weight-suggestion-default-matching: var(
4356
+ --x-number-font-weight-suggestion-default
4357
+ );
4358
+ --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
4359
+ --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
4360
+ --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
4361
+ --x-number-font-weight-suggestion-filter-default: var(--x-number-font-weight-suggestion-default);
4362
+ --x-text-transform-suggestion-filter-default: none;
4363
+ --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
4364
+ --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
4365
+ --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
4366
+ --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
4367
+ --x-font-family-suggestion-matching-part-default-curated: var(
4368
+ --x-font-family-suggestion-matching-part-default
4369
+ );
4370
+ --x-size-font-suggestion-matching-part-default-curated: var(
4371
+ --x-size-font-suggestion-matching-part-default
4372
+ );
4373
+ --x-size-line-height-suggestion-matching-part-default-curated: var(
4374
+ --x-size-line-height-suggestion-matching-part-default
4375
+ );
4376
+ --x-number-font-weight-suggestion-matching-part-default-curated: var(
4377
+ --x-number-font-weight-suggestion-matching-part-default
4378
+ );
4379
+ --x-font-family-suggestion-default-matching-curated: var(
4380
+ --x-font-family-suggestion-default-matching
4381
+ );
4382
+ --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
4383
+ --x-size-line-height-suggestion-default-matching-curated: var(
4384
+ --x-size-line-height-suggestion-default-matching
4385
+ );
4386
+ --x-number-font-weight-suggestion-default-matching-curated: var(
4387
+ --x-number-font-weight-suggestion-default-matching
4388
+ );
4389
+ }
4390
+ :root {
4391
+ --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4392
+ --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4393
+ --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4394
+ --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4395
+ }
4396
+ .x-sliding-panel {
4397
+ z-index: 0;
4398
+ background-color: var(--x-color-background-sliding-panel);
4399
+ }
4400
+ .x-sliding-panel__button.x-button {
4401
+ --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
4402
+ pointer-events: none;
4403
+ }
4404
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
4405
+ pointer-events: all;
4406
+ }
4407
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-left {
4408
+ transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4409
+ }
4410
+ .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-right {
4411
+ transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4412
+ }
4413
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
4414
+ opacity: 0;
4415
+ }
4416
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-start):hover .x-sliding-panel-button-left {
4417
+ opacity: 1;
4418
+ pointer-events: all;
4419
+ }
4420
+ .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-end):hover .x-sliding-panel-button-right {
4421
+ opacity: 1;
4422
+ pointer-events: all;
4423
+ }
4424
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient) .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), 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)));
4426
+ }
4427
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start .x-sliding-panel__scroll {
4428
+ 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));
4429
+ }
4430
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-end .x-sliding-panel__scroll {
4431
+ 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));
4432
+ }
4433
+ .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start.x-sliding-panel-at-end .x-sliding-panel__scroll {
4434
+ mask: none;
4435
+ }
4436
+ .x-sliding-panel__scroll > * {
4437
+ flex: 0 0 auto;
4438
+ }
4439
+ .x-sliding-panel__scroll > .x-list {
4440
+ --x-string-flow-list: row nowrap;
4441
+ }
4442
+ .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {
4443
+ opacity: 1;
4444
+ pointer-events: all;
4445
+ }
4446
+ .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
4447
+ opacity: 1;
4448
+ pointer-events: all;
4456
4449
  }
4457
4450
  :root {
4458
4451
  --x-string-overflow-scroll: auto;
@@ -4461,37 +4454,6 @@
4461
4454
  --x-color-background-scroll-bar-hover: transparent;
4462
4455
  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4463
4456
  }
4464
-
4465
- .x-scroll {
4466
- overflow-y: var(--x-string-overflow-scroll);
4467
- }
4468
- @media (hover: hover) {
4469
- .x-scroll {
4470
- scrollbar-width: auto;
4471
- scrollbar-color: var(--x-color-thumb-scroll-bar) var(--x-color-background-scroll-bar);
4472
- }
4473
- .x-scroll::-webkit-scrollbar {
4474
- width: 17px;
4475
- }
4476
- .x-scroll::-webkit-scrollbar-track {
4477
- background: var(--x-color-background-scroll-bar);
4478
- }
4479
- .x-scroll::-webkit-scrollbar-thumb {
4480
- width: 5px;
4481
- border-radius: 15px;
4482
- background: var(--x-color-thumb-scroll-bar);
4483
- background-clip: content-box;
4484
- border: solid 4px rgba(0, 0, 0, 0.00001);
4485
- }
4486
- .x-scroll:hover {
4487
- --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
4488
- --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
4489
- }
4490
- }
4491
-
4492
- .x-base-scroll {
4493
- overflow-y: var(--x-string-overflow-scroll, auto);
4494
- }
4495
4457
  /* @deprecated */
4496
4458
  :root {
4497
4459
  --x-size-padding-row-02: var(--x-size-base-02);
@@ -4806,6 +4768,9 @@
4806
4768
  --x-size-border-width-result-description-default: 0;
4807
4769
  --x-size-border-width-result-picture-default: 0;
4808
4770
  }
4771
+ :root {
4772
+ --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4773
+ }
4809
4774
  :root {
4810
4775
  --x-color-border-result-default: var(--x-color-base-lead);
4811
4776
  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
@@ -4879,9 +4844,6 @@
4879
4844
  :root {
4880
4845
  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4881
4846
  }
4882
- :root {
4883
- --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4884
- }
4885
4847
 
4886
4848
  .x-result.x-result--card {
4887
4849
  overflow: hidden;
@@ -4944,26 +4906,8 @@
4944
4906
  }
4945
4907
 
4946
4908
  .x-picture--fixed-ratio.x-picture {
4947
- aspect-ratio: var(--x-number-aspect-ratio-picture);
4948
- width: 100%;
4949
- }
4950
- :root {
4951
- --x-size-border-radius-picture-default: 0;
4952
- --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
4953
- --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
4954
- --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
4955
- --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
4956
- --x-color-background-picture-default: transparent;
4957
- --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
4958
- --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
4959
- --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
4960
- --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
4961
- --x-object-fit-picture-default: contain;
4962
- --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
4963
- --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
4964
- --x-mix-blend-mode-picture-default: normal;
4965
- --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
4966
- --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
4909
+ aspect-ratio: var(--x-number-aspect-ratio-picture);
4910
+ width: 100%;
4967
4911
  }
4968
4912
  :root {
4969
4913
  --x-size-border-radius-picture-default: 0;
@@ -5021,6 +4965,24 @@
5021
4965
  .x-picture-image--placeholder > path {
5022
4966
  fill: var(--x-color-fill-picture-placeholder-path-default) !important;
5023
4967
  }
4968
+ :root {
4969
+ --x-size-border-radius-picture-default: 0;
4970
+ --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
4971
+ --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
4972
+ --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
4973
+ --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
4974
+ --x-color-background-picture-default: transparent;
4975
+ --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
4976
+ --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
4977
+ --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
4978
+ --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
4979
+ --x-object-fit-picture-default: contain;
4980
+ --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
4981
+ --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
4982
+ --x-mix-blend-mode-picture-default: normal;
4983
+ --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
4984
+ --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
4985
+ }
5024
4986
  :root {
5025
4987
  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5026
4988
  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
@@ -5544,15 +5506,6 @@
5544
5506
  --x-modal-overlay-color: rgb(0, 0, 0);
5545
5507
  --x-modal-overlay-opacity: 0.7;
5546
5508
  }
5547
- :root {
5548
- --x-modal-overlay-color: rgb(0, 0, 0);
5549
- --x-modal-overlay-opacity: 0.7;
5550
- }
5551
-
5552
- .x-modal__overlay {
5553
- background-color: var(--x-modal-overlay-color) !important;
5554
- opacity: var(--x-modal-overlay-opacity) !important;
5555
- }
5556
5509
  :root {
5557
5510
  --x-string-justify-message-default: center;
5558
5511
  --x-size-gap-message-default: var(--x-size-base-03);
@@ -5574,6 +5527,15 @@
5574
5527
  --x-size-font-message-default: var(--x-size-font-title3);
5575
5528
  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5576
5529
  }
5530
+ :root {
5531
+ --x-modal-overlay-color: rgb(0, 0, 0);
5532
+ --x-modal-overlay-opacity: 0.7;
5533
+ }
5534
+
5535
+ .x-modal__overlay {
5536
+ background-color: var(--x-modal-overlay-color) !important;
5537
+ opacity: var(--x-modal-overlay-opacity) !important;
5538
+ }
5577
5539
  :root {
5578
5540
  --x-string-justify-message-default: center;
5579
5541
  --x-size-gap-message-default: var(--x-size-base-03);
@@ -6835,49 +6797,6 @@
6835
6797
  );
6836
6798
  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6837
6799
  }
6838
- :root {
6839
- --x-color-background-input-group-default: var(--x-color-background-input-default);
6840
- --x-color-border-input-group-default: var(--x-color-border-input-default);
6841
- --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
6842
- --x-color-text-input-group-default: var(--x-color-text-input-default);
6843
- --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
6844
- --x-size-height-input-group-default: var(--x-size-height-input-default);
6845
- --x-size-gap-input-group-default: var(--x-size-base-03);
6846
- --x-size-padding-left-input-group-default: var(--x-size-base-06);
6847
- --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
6848
- --x-size-padding-input-group-default-action: var(--x-size-base-03);
6849
- --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
6850
- --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
6851
- --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
6852
- --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
6853
- --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
6854
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
6855
- --x-size-border-radius-top-left-input-group-default: var(
6856
- --x-size-border-radius-input-group-default
6857
- );
6858
- --x-size-border-radius-top-right-input-group-default: var(
6859
- --x-size-border-radius-input-group-default
6860
- );
6861
- --x-size-border-radius-bottom-right-input-group-default: var(
6862
- --x-size-border-radius-input-group-default
6863
- );
6864
- --x-size-border-radius-bottom-left-input-group-default: var(
6865
- --x-size-border-radius-input-group-default
6866
- );
6867
- --x-font-family-input-group-default: var(--x-font-family-input-default);
6868
- --x-size-font-input-group-default: var(--x-size-font-input-default);
6869
- --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
6870
- --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
6871
- --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
6872
- --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
6873
- --x-size-line-height-input-group-placeholder-default: var(
6874
- --x-size-line-height-input-group-default
6875
- );
6876
- --x-number-font-weight-input-group-placeholder-default: var(
6877
- --x-number-font-weight-input-group-default
6878
- );
6879
- --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6880
- }
6881
6800
 
6882
6801
  [dir="ltr"] .x-input-group {
6883
6802
  border-right-width: var(--x-size-border-width-right-input-group-default);
@@ -7012,6 +6931,49 @@
7012
6931
  [dir="rtl"] .x-input-group > .x-input-group__action:last-child {
7013
6932
  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
7014
6933
  }
6934
+ :root {
6935
+ --x-color-background-input-group-default: var(--x-color-background-input-default);
6936
+ --x-color-border-input-group-default: var(--x-color-border-input-default);
6937
+ --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
6938
+ --x-color-text-input-group-default: var(--x-color-text-input-default);
6939
+ --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
6940
+ --x-size-height-input-group-default: var(--x-size-height-input-default);
6941
+ --x-size-gap-input-group-default: var(--x-size-base-03);
6942
+ --x-size-padding-left-input-group-default: var(--x-size-base-06);
6943
+ --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
6944
+ --x-size-padding-input-group-default-action: var(--x-size-base-03);
6945
+ --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
6946
+ --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
6947
+ --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
6948
+ --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
6949
+ --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
6950
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
6951
+ --x-size-border-radius-top-left-input-group-default: var(
6952
+ --x-size-border-radius-input-group-default
6953
+ );
6954
+ --x-size-border-radius-top-right-input-group-default: var(
6955
+ --x-size-border-radius-input-group-default
6956
+ );
6957
+ --x-size-border-radius-bottom-right-input-group-default: var(
6958
+ --x-size-border-radius-input-group-default
6959
+ );
6960
+ --x-size-border-radius-bottom-left-input-group-default: var(
6961
+ --x-size-border-radius-input-group-default
6962
+ );
6963
+ --x-font-family-input-group-default: var(--x-font-family-input-default);
6964
+ --x-size-font-input-group-default: var(--x-size-font-input-default);
6965
+ --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
6966
+ --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
6967
+ --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
6968
+ --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
6969
+ --x-size-line-height-input-group-placeholder-default: var(
6970
+ --x-size-line-height-input-group-default
6971
+ );
6972
+ --x-number-font-weight-input-group-placeholder-default: var(
6973
+ --x-number-font-weight-input-group-default
6974
+ );
6975
+ --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6976
+ }
7015
6977
  :root {
7016
6978
  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7017
6979
  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
@@ -7336,6 +7298,11 @@
7336
7298
  --x-string-stroke-linejoin-icon-default: mitter;
7337
7299
  --x-size-stroke-width-icon-default: 1px;
7338
7300
  }
7301
+ :root {
7302
+ --x-size-padding-grid: 0;
7303
+ --x-size-gap-grid: var(--x-size-base-03);
7304
+ --x-size-min-width-grid-item: 150px;
7305
+ }
7339
7306
  :root {
7340
7307
  --x-color-stroke-icon-default: currentColor;
7341
7308
  --x-color-fill-icon-default: none;
@@ -7371,11 +7338,6 @@
7371
7338
  --x-size-gap-grid: var(--x-size-base-03);
7372
7339
  --x-size-min-width-grid-item: 150px;
7373
7340
  }
7374
- :root {
7375
- --x-size-padding-grid: 0;
7376
- --x-size-gap-grid: var(--x-size-base-03);
7377
- --x-size-min-width-grid-item: 150px;
7378
- }
7379
7341
 
7380
7342
  .x-grid-list {
7381
7343
  margin: 0;
@@ -7871,13 +7833,6 @@
7871
7833
  :root {
7872
7834
  --x-size-width-dropdown-s: 74px;
7873
7835
  }
7874
- :root {
7875
- --x-size-width-dropdown-s: 74px;
7876
- }
7877
-
7878
- .x-dropdown.x-dropdown--s {
7879
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
7880
- }
7881
7836
  :root {
7882
7837
  --x-size-gap-dropdown-pill: var(--x-size-base-03);
7883
7838
  --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
@@ -7929,6 +7884,44 @@
7929
7884
  --x-size-border-width-left-dropdown-list-pill
7930
7885
  );
7931
7886
  }
7887
+ :root {
7888
+ --x-string-overflow-scroll: auto;
7889
+ --x-color-background-scroll-bar: transparent;
7890
+ --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
7891
+ --x-color-background-scroll-bar-hover: transparent;
7892
+ --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
7893
+ }
7894
+
7895
+ .x-scroll {
7896
+ overflow-y: var(--x-string-overflow-scroll);
7897
+ }
7898
+ @media (hover: hover) {
7899
+ .x-scroll {
7900
+ scrollbar-width: auto;
7901
+ scrollbar-color: var(--x-color-thumb-scroll-bar) var(--x-color-background-scroll-bar);
7902
+ }
7903
+ .x-scroll::-webkit-scrollbar {
7904
+ width: 17px;
7905
+ }
7906
+ .x-scroll::-webkit-scrollbar-track {
7907
+ background: var(--x-color-background-scroll-bar);
7908
+ }
7909
+ .x-scroll::-webkit-scrollbar-thumb {
7910
+ width: 5px;
7911
+ border-radius: 15px;
7912
+ background: var(--x-color-thumb-scroll-bar);
7913
+ background-clip: content-box;
7914
+ border: solid 4px rgba(0, 0, 0, 0.00001);
7915
+ }
7916
+ .x-scroll:hover {
7917
+ --x-color-background-scroll-bar: var(--x-color-background-scroll-bar-hover);
7918
+ --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
7919
+ }
7920
+ }
7921
+
7922
+ .x-base-scroll {
7923
+ overflow-y: var(--x-string-overflow-scroll, auto);
7924
+ }
7932
7925
  :root {
7933
7926
  --x-size-width-dropdown-m: 130px;
7934
7927
  }
@@ -8417,16 +8410,6 @@
8417
8410
  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8418
8411
  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8419
8412
  }
8420
- :root {
8421
- --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8422
- --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
8423
- --x-color-text-button-tertiary: var(--x-color-text-default);
8424
- --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
8425
- --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
8426
- --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
8427
- --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8428
- --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8429
- }
8430
8413
 
8431
8414
  .x-button--tertiary.x-button,
8432
8415
  .x-button--tertiary .x-button {
@@ -8438,6 +8421,16 @@
8438
8421
  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
8439
8422
  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
8440
8423
  }
8424
+ :root {
8425
+ --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8426
+ --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
8427
+ --x-color-text-button-tertiary: var(--x-color-text-default);
8428
+ --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
8429
+ --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
8430
+ --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
8431
+ --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8432
+ --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8433
+ }
8441
8434
  :root {
8442
8435
  --x-color-background-button-secondary: transparent;
8443
8436
  --x-color-border-button-secondary: var(--x-color-border-button-default);
@@ -8476,6 +8469,16 @@
8476
8469
  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8477
8470
  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8478
8471
  }
8472
+ :root {
8473
+ --x-color-background-button-primary: var(--x-color-background-button-default);
8474
+ --x-color-border-button-primary: var(--x-color-border-button-default);
8475
+ --x-color-text-button-primary: var(--x-color-text-button-default);
8476
+ --x-size-border-width-button-primary: var(--x-size-border-width-base);
8477
+ --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
8478
+ --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
8479
+ --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8480
+ --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8481
+ }
8479
8482
  :root {
8480
8483
  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8481
8484
  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
@@ -8511,16 +8514,6 @@
8511
8514
  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8512
8515
  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8513
8516
  }
8514
- :root {
8515
- --x-color-background-button-primary: var(--x-color-background-button-default);
8516
- --x-color-border-button-primary: var(--x-color-border-button-default);
8517
- --x-color-text-button-primary: var(--x-color-text-button-default);
8518
- --x-size-border-width-button-primary: var(--x-size-border-width-base);
8519
- --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
8520
- --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
8521
- --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8522
- --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8523
- }
8524
8517
 
8525
8518
  .x-button--primary.x-button,
8526
8519
  .x-button--primary .x-button {
@@ -8566,11 +8559,6 @@
8566
8559
  --x-color-border-button-ghost: transparent;
8567
8560
  --x-color-text-button-ghost: var(--x-color-base-lead);
8568
8561
  }
8569
- :root {
8570
- --x-color-background-button-ghost: transparent;
8571
- --x-color-border-button-ghost: transparent;
8572
- --x-color-text-button-ghost: var(--x-color-base-lead);
8573
- }
8574
8562
 
8575
8563
  .x-button--ghost.x-button,
8576
8564
  .x-button--ghost .x-button {
@@ -8611,6 +8599,13 @@
8611
8599
  --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
8612
8600
  --x-size-line-height-button-default: var(--x-size-line-height-text);
8613
8601
  }
8602
+ :root {
8603
+ --x-size-width-dropdown-s: 74px;
8604
+ }
8605
+
8606
+ .x-dropdown.x-dropdown--s {
8607
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
8608
+ }
8614
8609
  :root {
8615
8610
  --x-color-background-button-default: var(--x-color-base-lead);
8616
8611
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8735,16 +8730,6 @@
8735
8730
  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8736
8731
  --x-size-font-badge-default: var(--x-size-font-base-xs);
8737
8732
  }
8738
- :root {
8739
- --x-color-background-badge-default: var(--x-color-base-neutral-10);
8740
- --x-color-text-badge-default: var(--x-color-base-neutral-100);
8741
- --x-color-border-badge-default: var(--x-color-base-neutral-10);
8742
- --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8743
- --x-size-border-width-badge-default: 0;
8744
- --x-size-width-badge-default: 1.5em;
8745
- --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8746
- --x-size-font-badge-default: var(--x-size-font-base-xs);
8747
- }
8748
8733
 
8749
8734
  [dir="ltr"] .x-badge {
8750
8735
  right: calc(var(--x-size-width-badge-default) / 4);
@@ -8784,6 +8769,16 @@
8784
8769
  .x-badge-container {
8785
8770
  position: relative;
8786
8771
  }
8772
+ :root {
8773
+ --x-color-background-badge-default: var(--x-color-base-neutral-10);
8774
+ --x-color-text-badge-default: var(--x-color-base-neutral-100);
8775
+ --x-color-border-badge-default: var(--x-color-base-neutral-10);
8776
+ --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8777
+ --x-size-border-width-badge-default: 0;
8778
+ --x-size-width-badge-default: 1.5em;
8779
+ --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8780
+ --x-size-font-badge-default: var(--x-size-font-base-xs);
8781
+ }
8787
8782
  :root {
8788
8783
  --x-size-base-01: 2px;
8789
8784
  --x-size-base-02: 4px;
@@ -8825,4 +8820,9 @@
8825
8820
  --x-size-border-radius-base-m: var(--x-size-base-06);
8826
8821
  --x-size-border-radius-base-pill: 99999px;
8827
8822
  --x-size-border-width-base: 1px;
8823
+ }
8824
+ :root {
8825
+ --x-color-background-button-ghost: transparent;
8826
+ --x-color-border-button-ghost: transparent;
8827
+ --x-color-text-button-ghost: var(--x-color-base-lead);
8828
8828
  }
@@ -160,6 +160,7 @@ X-Components is a library usable everywhere not only for search experiences.
160
160
  | [NextQueriesActions](./x-components.nextqueriesactions.md) | Next queries module actions. |
161
161
  | [NextQueriesConfig](./x-components.nextqueriesconfig.md) | Configuration options for the [NextQueriesXModule](./x-components.nextqueriesxmodule.md)<!-- -->. |
162
162
  | [NextQueriesGetters](./x-components.nextqueriesgetters.md) | Next queries module getters. |
163
+ | [NextQueriesGroup](./x-components.nextqueriesgroup.md) | Next queries group interface for the NextQueries. |
163
164
  | [NextQueriesMutations](./x-components.nextqueriesmutations.md) | Next queries module mutations. |
164
165
  | [NextQueriesState](./x-components.nextqueriesstate.md) | Next queries module state. |
165
166
  | [NextQueriesXEvents](./x-components.nextqueriesxevents.md) | Dictionary of the events of NextQueries XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. |
@@ -0,0 +1,22 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [NextQueriesGroup](./x-components.nextqueriesgroup.md)
4
+
5
+ ## NextQueriesGroup interface
6
+
7
+ Next queries group interface for the NextQueries.
8
+
9
+ **Signature:**
10
+
11
+ ```typescript
12
+ export interface NextQueriesGroup extends ListItem
13
+ ```
14
+ **Extends:** [ListItem](./x-components.listitem.md)
15
+
16
+ ## Properties
17
+
18
+ | Property | Modifiers | Type | Description |
19
+ | --- | --- | --- | --- |
20
+ | [modelName](./x-components.nextqueriesgroup.modelname.md) | | 'NextQueriesGroup' | |
21
+ | [nextQueries](./x-components.nextqueriesgroup.nextqueries.md) | | NextQuery\[\] | |
22
+
@@ -0,0 +1,11 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [NextQueriesGroup](./x-components.nextqueriesgroup.md) &gt; [modelName](./x-components.nextqueriesgroup.modelname.md)
4
+
5
+ ## NextQueriesGroup.modelName property
6
+
7
+ **Signature:**
8
+
9
+ ```typescript
10
+ modelName: 'NextQueriesGroup';
11
+ ```
@@ -0,0 +1,11 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [NextQueriesGroup](./x-components.nextqueriesgroup.md) &gt; [nextQueries](./x-components.nextqueriesgroup.nextqueries.md)
4
+
5
+ ## NextQueriesGroup.nextQueries property
6
+
7
+ **Signature:**
8
+
9
+ ```typescript
10
+ nextQueries: NextQuery[];
11
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "6.0.0-alpha.15",
3
+ "version": "6.0.0-alpha.16",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -138,5 +138,5 @@
138
138
  "access": "public",
139
139
  "directory": "dist"
140
140
  },
141
- "gitHead": "b4f0fffe7a951c4146765f758e385f05ba5284a4"
141
+ "gitHead": "c61339f124b2d0fa6e6dc9dabaa6cb99f57456c1"
142
142
  }
@@ -44545,6 +44545,97 @@
44545
44545
  ],
44546
44546
  "extendsTokenRanges": []
44547
44547
  },
44548
+ {
44549
+ "kind": "Interface",
44550
+ "canonicalReference": "@empathyco/x-components!NextQueriesGroup:interface",
44551
+ "docComment": "/**\n * Next queries group interface for the NextQueries.\n *\n * @public\n */\n",
44552
+ "excerptTokens": [
44553
+ {
44554
+ "kind": "Content",
44555
+ "text": "export interface NextQueriesGroup extends "
44556
+ },
44557
+ {
44558
+ "kind": "Reference",
44559
+ "text": "ListItem",
44560
+ "canonicalReference": "@empathyco/x-components!ListItem:type"
44561
+ },
44562
+ {
44563
+ "kind": "Content",
44564
+ "text": " "
44565
+ }
44566
+ ],
44567
+ "fileUrlPath": "src/x-modules/next-queries/types.ts",
44568
+ "releaseTag": "Public",
44569
+ "name": "NextQueriesGroup",
44570
+ "preserveMemberOrder": false,
44571
+ "members": [
44572
+ {
44573
+ "kind": "PropertySignature",
44574
+ "canonicalReference": "@empathyco/x-components!NextQueriesGroup#modelName:member",
44575
+ "docComment": "",
44576
+ "excerptTokens": [
44577
+ {
44578
+ "kind": "Content",
44579
+ "text": "modelName: "
44580
+ },
44581
+ {
44582
+ "kind": "Content",
44583
+ "text": "'NextQueriesGroup'"
44584
+ },
44585
+ {
44586
+ "kind": "Content",
44587
+ "text": ";"
44588
+ }
44589
+ ],
44590
+ "isReadonly": false,
44591
+ "isOptional": false,
44592
+ "releaseTag": "Public",
44593
+ "name": "modelName",
44594
+ "propertyTypeTokenRange": {
44595
+ "startIndex": 1,
44596
+ "endIndex": 2
44597
+ }
44598
+ },
44599
+ {
44600
+ "kind": "PropertySignature",
44601
+ "canonicalReference": "@empathyco/x-components!NextQueriesGroup#nextQueries:member",
44602
+ "docComment": "",
44603
+ "excerptTokens": [
44604
+ {
44605
+ "kind": "Content",
44606
+ "text": "nextQueries: "
44607
+ },
44608
+ {
44609
+ "kind": "Reference",
44610
+ "text": "NextQuery",
44611
+ "canonicalReference": "@empathyco/x-components!NextQuery_2:interface"
44612
+ },
44613
+ {
44614
+ "kind": "Content",
44615
+ "text": "[]"
44616
+ },
44617
+ {
44618
+ "kind": "Content",
44619
+ "text": ";"
44620
+ }
44621
+ ],
44622
+ "isReadonly": false,
44623
+ "isOptional": false,
44624
+ "releaseTag": "Public",
44625
+ "name": "nextQueries",
44626
+ "propertyTypeTokenRange": {
44627
+ "startIndex": 1,
44628
+ "endIndex": 3
44629
+ }
44630
+ }
44631
+ ],
44632
+ "extendsTokenRanges": [
44633
+ {
44634
+ "startIndex": 1,
44635
+ "endIndex": 2
44636
+ }
44637
+ ]
44638
+ },
44548
44639
  {
44549
44640
  "kind": "Variable",
44550
44641
  "canonicalReference": "@empathyco/x-components!NextQueriesList:var",
@@ -4454,6 +4454,14 @@ export interface NextQueriesGetters {
4454
4454
  request: NextQueriesRequest | null;
4455
4455
  }
4456
4456
 
4457
+ // @public
4458
+ export interface NextQueriesGroup extends ListItem {
4459
+ // (undocumented)
4460
+ modelName: 'NextQueriesGroup';
4461
+ // (undocumented)
4462
+ nextQueries: NextQuery_2[];
4463
+ }
4464
+
4457
4465
  // @public
4458
4466
  export const NextQueriesList: DefineComponent< {
4459
4467
  animation: {
@@ -4,4 +4,5 @@ export * from './events.types';
4
4
  export * from './store';
5
5
  export * from './wiring';
6
6
  export * from './x-module';
7
+ export * from './types';
7
8
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/x-modules/next-queries/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/x-modules/next-queries/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}