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

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 (71) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/design-system/deprecated-full-theme.css +482 -481
  3. package/docs/API-reference/api/x-components.animationprop.md +1 -1
  4. package/docs/API-reference/api/x-components.bannerslist.md +3 -3
  5. package/docs/API-reference/api/x-components.basedropdown.md +5 -5
  6. package/docs/API-reference/api/x-components.baseeventsmodal.md +2 -2
  7. package/docs/API-reference/api/x-components.basegrid.md +3 -3
  8. package/docs/API-reference/api/x-components.baseheadertogglepanel.md +5 -5
  9. package/docs/API-reference/api/x-components.baseidmodal.md +2 -2
  10. package/docs/API-reference/api/x-components.baseidtogglepanel.md +5 -5
  11. package/docs/API-reference/api/x-components.basemodal.md +10 -10
  12. package/docs/API-reference/api/x-components.baseresultimage.md +2 -2
  13. package/docs/API-reference/api/x-components.basesuggestions.md +3 -3
  14. package/docs/API-reference/api/x-components.basetabspanel.md +8 -8
  15. package/docs/API-reference/api/x-components.basetogglepanel.md +3 -3
  16. package/docs/API-reference/api/x-components.basevariablecolumngrid.md +3 -3
  17. package/docs/API-reference/api/x-components.empathize.md +5 -5
  18. package/docs/API-reference/api/x-components.filterslist.md +3 -3
  19. package/docs/API-reference/api/x-components.hierarchicalfilter.md +2 -2
  20. package/docs/API-reference/api/x-components.identifierresults.md +3 -3
  21. package/docs/API-reference/api/x-components.mainmodal.md +2 -2
  22. package/docs/API-reference/api/x-components.multicolumnmaxwidthlayout.md +5 -5
  23. package/docs/API-reference/api/x-components.myhistory.md +3 -3
  24. package/docs/API-reference/api/x-components.nextquerieslist.md +3 -3
  25. package/docs/API-reference/api/x-components.partialresultslist.md +3 -3
  26. package/docs/API-reference/api/x-components.promotedslist.md +3 -3
  27. package/docs/API-reference/api/x-components.querypreviewlist.md +3 -3
  28. package/docs/API-reference/api/x-components.recommendations.md +3 -3
  29. package/docs/API-reference/api/x-components.relatedpromptslist.md +3 -3
  30. package/docs/API-reference/api/x-components.relatedtags.md +3 -3
  31. package/docs/API-reference/api/x-components.scrolltotop.md +5 -5
  32. package/docs/API-reference/api/x-components.searchinputplaceholder.md +3 -3
  33. package/docs/API-reference/api/x-components.singlecolumnlayout.md +3 -3
  34. package/docs/API-reference/api/x-components.sortdropdown.md +1 -1
  35. package/js/types/animation-prop.js.map +1 -1
  36. package/package.json +3 -3
  37. package/report/x-components.api.json +111 -111
  38. package/report/x-components.api.md +111 -111
  39. package/types/components/base-dropdown.vue.d.ts +5 -5
  40. package/types/components/base-grid.vue.d.ts +3 -3
  41. package/types/components/base-variable-column-grid.vue.d.ts +3 -3
  42. package/types/components/layouts/multi-column-max-width-layout.vue.d.ts +5 -5
  43. package/types/components/layouts/single-column-layout.vue.d.ts +3 -3
  44. package/types/components/modals/base-events-modal.vue.d.ts +2 -2
  45. package/types/components/modals/base-id-modal.vue.d.ts +2 -2
  46. package/types/components/modals/base-modal.vue.d.ts +10 -10
  47. package/types/components/modals/main-modal.vue.d.ts +2 -2
  48. package/types/components/panels/base-header-toggle-panel.vue.d.ts +5 -5
  49. package/types/components/panels/base-id-toggle-panel.vue.d.ts +5 -5
  50. package/types/components/panels/base-tabs-panel.vue.d.ts +8 -8
  51. package/types/components/panels/base-toggle-panel.vue.d.ts +3 -3
  52. package/types/components/result/base-result-image.vue.d.ts +2 -2
  53. package/types/components/suggestions/base-suggestions.vue.d.ts +3 -3
  54. package/types/types/animation-prop.d.ts +1 -1
  55. package/types/types/animation-prop.d.ts.map +1 -1
  56. package/types/x-modules/empathize/components/empathize.vue.d.ts +5 -5
  57. package/types/x-modules/facets/components/filters/hierarchical-filter.vue.d.ts +2 -2
  58. package/types/x-modules/facets/components/lists/filters-list.vue.d.ts +3 -3
  59. package/types/x-modules/history-queries/components/my-history.vue.d.ts +3 -3
  60. package/types/x-modules/identifier-results/components/identifier-results.vue.d.ts +3 -3
  61. package/types/x-modules/next-queries/components/next-queries-list.vue.d.ts +3 -3
  62. package/types/x-modules/queries-preview/components/query-preview-list.vue.d.ts +3 -3
  63. package/types/x-modules/recommendations/components/recommendations.vue.d.ts +3 -3
  64. package/types/x-modules/related-prompts/components/related-prompts-list.vue.d.ts +3 -3
  65. package/types/x-modules/related-tags/components/related-tags.vue.d.ts +3 -3
  66. package/types/x-modules/scroll/components/scroll-to-top.vue.d.ts +5 -5
  67. package/types/x-modules/search/components/banners-list.vue.d.ts +3 -3
  68. package/types/x-modules/search/components/partial-results-list.vue.d.ts +3 -3
  69. package/types/x-modules/search/components/promoteds-list.vue.d.ts +3 -3
  70. package/types/x-modules/search/components/sort-dropdown.vue.d.ts +1 -1
  71. package/types/x-modules/search-box/components/search-input-placeholder.vue.d.ts +3 -3
@@ -1,3 +1,5 @@
1
+
2
+
1
3
  .x-uppercase {
2
4
  text-transform: uppercase;
3
5
  }
@@ -13,7 +15,6 @@
13
15
  .x-normal-case {
14
16
  text-transform: none;
15
17
  }
16
-
17
18
  .x-underline {
18
19
  -webkit-text-decoration-line: underline;
19
20
  text-decoration-line: underline;
@@ -33,25 +34,6 @@
33
34
  -webkit-text-decoration-line: none;
34
35
  text-decoration-line: none;
35
36
  }
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
  .x-padding--00 {
56
38
  padding: 0 !important;
57
39
  }
@@ -955,6 +937,25 @@
955
937
  [dir="rtl"] .x-margin--left-20 {
956
938
  margin-right: var(--x-size-base-20) !important;
957
939
  }
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
+ }
958
959
  .x-line-height--none {
959
960
  line-height: 1 !important;
960
961
  }
@@ -3273,49 +3274,6 @@
3273
3274
  [dir="rtl"] .x-border-radius--bottom-right-20 {
3274
3275
  border-bottom-left-radius: var(--x-size-base-20) !important;
3275
3276
  }
3276
- .x-border-color--lead {
3277
- border-color: var(--x-color-base-lead) !important;
3278
- }
3279
-
3280
- .x-border-color--auxiliary {
3281
- border-color: var(--x-color-base-auxiliary) !important;
3282
- }
3283
-
3284
- .x-border-color--neutral-10 {
3285
- border-color: var(--x-color-base-neutral-10) !important;
3286
- }
3287
-
3288
- .x-border-color--neutral-35 {
3289
- border-color: var(--x-color-base-neutral-35) !important;
3290
- }
3291
-
3292
- .x-border-color--neutral-70 {
3293
- border-color: var(--x-color-base-neutral-70) !important;
3294
- }
3295
-
3296
- .x-border-color--neutral-95 {
3297
- border-color: var(--x-color-base-neutral-95) !important;
3298
- }
3299
-
3300
- .x-border-color--neutral-100 {
3301
- border-color: var(--x-color-base-neutral-100) !important;
3302
- }
3303
-
3304
- .x-border-color--accent {
3305
- border-color: var(--x-color-base-accent) !important;
3306
- }
3307
-
3308
- .x-border-color--enable {
3309
- border-color: var(--x-color-base-enable) !important;
3310
- }
3311
-
3312
- .x-border-color--disable {
3313
- border-color: var(--x-color-base-disable) !important;
3314
- }
3315
-
3316
- .x-border-color--transparent {
3317
- border-color: var(--x-color-base-transparent) !important;
3318
- }
3319
3277
  .x-background--lead {
3320
3278
  background-color: var(--x-color-base-lead) !important;
3321
3279
  }
@@ -3374,6 +3332,49 @@
3374
3332
  .x-text--stroke.x-small {
3375
3333
  --x-string-text-decoration-small: line-through;
3376
3334
  }
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
+ }
3377
3378
  :root {
3378
3379
  --x-color-text-secondary: var(--x-color-base-neutral-35);
3379
3380
  }
@@ -3958,6 +3959,47 @@
3958
3959
  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
3959
3960
  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
3960
3961
  }
3962
+ :root {
3963
+ --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3964
+ --x-color-text-suggestion-group-matching-part-default: var(
3965
+ --x-color-text-suggestion-matching-part-default
3966
+ );
3967
+ --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
3968
+ --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
3969
+ --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
3970
+ --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
3971
+ --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
3972
+ --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
3973
+ --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
3974
+ --x-size-border-width-suggestion-group-default: 0;
3975
+ --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
3976
+ --x-size-border-width-right-suggestion-group-default: var(
3977
+ --x-size-border-width-suggestion-default
3978
+ );
3979
+ --x-size-border-width-bottom-suggestion-group-default: var(
3980
+ --x-size-border-width-suggestion-default
3981
+ );
3982
+ --x-size-border-width-left-suggestion-group-default: var(
3983
+ --x-size-border-width-suggestion-default
3984
+ );
3985
+ --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
3986
+ --x-size-border-radius-top-left-suggestion-group-default: var(
3987
+ --x-size-border-radius-suggestion-default
3988
+ );
3989
+ --x-size-border-radius-top-right-suggestion-group-default: var(
3990
+ --x-size-border-radius-suggestion-default
3991
+ );
3992
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(
3993
+ --x-size-border-radius-suggestion-default
3994
+ );
3995
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(
3996
+ --x-size-border-radius-suggestion-default
3997
+ );
3998
+ --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
3999
+ --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
4000
+ --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
4001
+ --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
4002
+ }
3961
4003
 
3962
4004
  [dir="ltr"] .x-suggestion-group {
3963
4005
  padding-left: var(--x-size-padding-left-suggestion-group-default);
@@ -4033,47 +4075,6 @@
4033
4075
  --x-size-padding-left-button-default: 0;
4034
4076
  border: none;
4035
4077
  }
4036
- :root {
4037
- --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
4038
- --x-color-text-suggestion-group-matching-part-default: var(
4039
- --x-color-text-suggestion-matching-part-default
4040
- );
4041
- --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
4042
- --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
4043
- --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
4044
- --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
4045
- --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
4046
- --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
4047
- --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
4048
- --x-size-border-width-suggestion-group-default: 0;
4049
- --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
4050
- --x-size-border-width-right-suggestion-group-default: var(
4051
- --x-size-border-width-suggestion-default
4052
- );
4053
- --x-size-border-width-bottom-suggestion-group-default: var(
4054
- --x-size-border-width-suggestion-default
4055
- );
4056
- --x-size-border-width-left-suggestion-group-default: var(
4057
- --x-size-border-width-suggestion-default
4058
- );
4059
- --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
4060
- --x-size-border-radius-top-left-suggestion-group-default: var(
4061
- --x-size-border-radius-suggestion-default
4062
- );
4063
- --x-size-border-radius-top-right-suggestion-group-default: var(
4064
- --x-size-border-radius-suggestion-default
4065
- );
4066
- --x-size-border-radius-bottom-right-suggestion-group-default: var(
4067
- --x-size-border-radius-suggestion-default
4068
- );
4069
- --x-size-border-radius-bottom-left-suggestion-group-default: var(
4070
- --x-size-border-radius-suggestion-default
4071
- );
4072
- --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
4073
- --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
4074
- --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
4075
- --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
4076
- }
4077
4078
  :root {
4078
4079
  --x-string-align-items-suggestion-default: center;
4079
4080
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4165,53 +4166,113 @@
4165
4166
  );
4166
4167
  }
4167
4168
  :root {
4168
- --x-string-align-items-suggestion-default: center;
4169
- --x-color-text-suggestion-default: var(--x-color-text-default);
4170
- --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
4171
- --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
4172
- --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
4173
- --x-color-background-suggestion-default: transparent;
4174
- --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
4175
- --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
4176
- --x-color-text-suggestion-matching-part-default-curated: var(
4177
- --x-color-text-suggestion-matching-part-default
4178
- );
4179
- --x-color-text-suggestion-default-matching-curated: var(
4180
- --x-color-text-suggestion-default-matching
4181
- );
4182
- --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
4183
- --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
4184
- --x-size-padding-top-suggestion-default: var(--x-size-base-01);
4185
- --x-size-padding-right-suggestion-default: 0;
4186
- --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
4187
- --x-size-padding-left-suggestion-default: 0;
4188
- --x-size-gap-suggestion-default: var(--x-size-base-03);
4189
- --x-size-border-width-suggestion-default: 0;
4190
- --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
4191
- --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
4192
- --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
4193
- --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
4194
- --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
4195
- --x-size-border-radius-top-left-suggestion-default: var(
4196
- --x-size-border-radius-suggestion-default
4197
- );
4198
- --x-size-border-radius-top-right-suggestion-default: var(
4199
- --x-size-border-radius-suggestion-default
4200
- );
4201
- --x-size-border-radius-bottom-right-suggestion-default: var(
4202
- --x-size-border-radius-suggestion-default
4203
- );
4204
- --x-size-border-radius-bottom-left-suggestion-default: var(
4205
- --x-size-border-radius-suggestion-default
4206
- );
4207
- --x-font-family-suggestion-default: var(--x-font-family-text);
4208
- --x-size-font-suggestion-default: var(--x-size-font-text);
4209
- --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
4210
- --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
4211
- --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
4212
- --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
4213
- --x-size-line-height-suggestion-matching-part-default: var(
4214
- --x-size-line-height-suggestion-default
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
4215
4276
  );
4216
4277
  --x-number-font-weight-suggestion-matching-part-default: var(
4217
4278
  --x-number-font-weight-suggestion-default
@@ -4387,64 +4448,11 @@
4387
4448
  );
4388
4449
  }
4389
4450
  :root {
4390
- --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4391
- --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4392
- --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4393
- --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4394
- }
4395
- .x-sliding-panel {
4396
- z-index: 0;
4397
- background-color: var(--x-color-background-sliding-panel);
4398
- }
4399
- .x-sliding-panel__button.x-button {
4400
- --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
4401
- pointer-events: none;
4402
- }
4403
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
4404
- pointer-events: all;
4405
- }
4406
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-left {
4407
- transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4408
- }
4409
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-right {
4410
- transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4411
- }
4412
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
4413
- opacity: 0;
4414
- }
4415
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-start):hover .x-sliding-panel-button-left {
4416
- opacity: 1;
4417
- pointer-events: all;
4418
- }
4419
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-end):hover .x-sliding-panel-button-right {
4420
- opacity: 1;
4421
- pointer-events: all;
4422
- }
4423
- .x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
4424
- 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)));
4425
- }
4426
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start .x-sliding-panel__scroll {
4427
- 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));
4428
- }
4429
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-end .x-sliding-panel__scroll {
4430
- 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));
4431
- }
4432
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start.x-sliding-panel-at-end .x-sliding-panel__scroll {
4433
- mask: none;
4434
- }
4435
- .x-sliding-panel__scroll > * {
4436
- flex: 0 0 auto;
4437
- }
4438
- .x-sliding-panel__scroll > .x-list {
4439
- --x-string-flow-list: row nowrap;
4440
- }
4441
- .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {
4442
- opacity: 1;
4443
- pointer-events: all;
4444
- }
4445
- .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
4446
- opacity: 1;
4447
- pointer-events: all;
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);
4448
4456
  }
4449
4457
  :root {
4450
4458
  --x-string-overflow-scroll: auto;
@@ -4484,13 +4492,6 @@
4484
4492
  .x-base-scroll {
4485
4493
  overflow-y: var(--x-string-overflow-scroll, auto);
4486
4494
  }
4487
- :root {
4488
- --x-string-overflow-scroll: auto;
4489
- --x-color-background-scroll-bar: transparent;
4490
- --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4491
- --x-color-background-scroll-bar-hover: transparent;
4492
- --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4493
- }
4494
4495
  /* @deprecated */
4495
4496
  :root {
4496
4497
  --x-size-padding-row-02: var(--x-size-base-02);
@@ -4550,6 +4551,28 @@
4550
4551
  --x-size-gap-row-19: var(--x-size-base-19);
4551
4552
  --x-size-gap-row-20: var(--x-size-base-20);
4552
4553
  }
4554
+ :root {
4555
+ --x-size-gap-row-01: var(--x-size-base-01);
4556
+ --x-size-gap-row-02: var(--x-size-base-02);
4557
+ --x-size-gap-row-03: var(--x-size-base-03);
4558
+ --x-size-gap-row-04: var(--x-size-base-04);
4559
+ --x-size-gap-row-05: var(--x-size-base-05);
4560
+ --x-size-gap-row-06: var(--x-size-base-06);
4561
+ --x-size-gap-row-07: var(--x-size-base-07);
4562
+ --x-size-gap-row-08: var(--x-size-base-08);
4563
+ --x-size-gap-row-09: var(--x-size-base-09);
4564
+ --x-size-gap-row-10: var(--x-size-base-10);
4565
+ --x-size-gap-row-11: var(--x-size-base-11);
4566
+ --x-size-gap-row-12: var(--x-size-base-12);
4567
+ --x-size-gap-row-13: var(--x-size-base-13);
4568
+ --x-size-gap-row-14: var(--x-size-base-14);
4569
+ --x-size-gap-row-15: var(--x-size-base-15);
4570
+ --x-size-gap-row-16: var(--x-size-base-16);
4571
+ --x-size-gap-row-17: var(--x-size-base-17);
4572
+ --x-size-gap-row-18: var(--x-size-base-18);
4573
+ --x-size-gap-row-19: var(--x-size-base-19);
4574
+ --x-size-gap-row-20: var(--x-size-base-20);
4575
+ }
4553
4576
 
4554
4577
  .x-row--gap-01 {
4555
4578
  --x-size-gap-row: var(--x-size-gap-row-01);
@@ -4630,28 +4653,6 @@
4630
4653
  .x-row--gap-20 {
4631
4654
  --x-size-gap-row: var(--x-size-gap-row-20);
4632
4655
  }
4633
- :root {
4634
- --x-size-gap-row-01: var(--x-size-base-01);
4635
- --x-size-gap-row-02: var(--x-size-base-02);
4636
- --x-size-gap-row-03: var(--x-size-base-03);
4637
- --x-size-gap-row-04: var(--x-size-base-04);
4638
- --x-size-gap-row-05: var(--x-size-base-05);
4639
- --x-size-gap-row-06: var(--x-size-base-06);
4640
- --x-size-gap-row-07: var(--x-size-base-07);
4641
- --x-size-gap-row-08: var(--x-size-base-08);
4642
- --x-size-gap-row-09: var(--x-size-base-09);
4643
- --x-size-gap-row-10: var(--x-size-base-10);
4644
- --x-size-gap-row-11: var(--x-size-base-11);
4645
- --x-size-gap-row-12: var(--x-size-base-12);
4646
- --x-size-gap-row-13: var(--x-size-base-13);
4647
- --x-size-gap-row-14: var(--x-size-base-14);
4648
- --x-size-gap-row-15: var(--x-size-base-15);
4649
- --x-size-gap-row-16: var(--x-size-base-16);
4650
- --x-size-gap-row-17: var(--x-size-base-17);
4651
- --x-size-gap-row-18: var(--x-size-base-18);
4652
- --x-size-gap-row-19: var(--x-size-base-19);
4653
- --x-size-gap-row-20: var(--x-size-base-20);
4654
- }
4655
4656
  :root {
4656
4657
  --x-size-gap-row: 0;
4657
4658
  --x-size-padding-row: 0;
@@ -4805,6 +4806,23 @@
4805
4806
  --x-size-border-width-result-description-default: 0;
4806
4807
  --x-size-border-width-result-picture-default: 0;
4807
4808
  }
4809
+ :root {
4810
+ --x-color-border-result-default: var(--x-color-base-lead);
4811
+ --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4812
+ --x-color-border-result-description-default: var(--x-color-border-result-default);
4813
+ --x-color-border-result-picture-default: var(--x-color-border-result-default);
4814
+ --x-color-background-result-default: transparent;
4815
+ --x-size-padding-result-default: 0;
4816
+ --x-size-padding-result-overlay-default: 0;
4817
+ --x-size-padding-result-description-default: 0;
4818
+ --x-size-gap-result-default: var(--x-size-base-03);
4819
+ --x-size-padding-result-picture-default: 0;
4820
+ --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4821
+ --x-size-border-width-result-default: 0;
4822
+ --x-size-border-width-result-overlay-default: 0;
4823
+ --x-size-border-width-result-description-default: 0;
4824
+ --x-size-border-width-result-picture-default: 0;
4825
+ }
4808
4826
 
4809
4827
  .x-result {
4810
4828
  display: grid;
@@ -4858,23 +4876,6 @@
4858
4876
  opacity: 1;
4859
4877
  }
4860
4878
  }
4861
- :root {
4862
- --x-color-border-result-default: var(--x-color-base-lead);
4863
- --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4864
- --x-color-border-result-description-default: var(--x-color-border-result-default);
4865
- --x-color-border-result-picture-default: var(--x-color-border-result-default);
4866
- --x-color-background-result-default: transparent;
4867
- --x-size-padding-result-default: 0;
4868
- --x-size-padding-result-overlay-default: 0;
4869
- --x-size-padding-result-description-default: 0;
4870
- --x-size-gap-result-default: var(--x-size-base-03);
4871
- --x-size-padding-result-picture-default: 0;
4872
- --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4873
- --x-size-border-width-result-default: 0;
4874
- --x-size-border-width-result-overlay-default: 0;
4875
- --x-size-border-width-result-description-default: 0;
4876
- --x-size-border-width-result-picture-default: 0;
4877
- }
4878
4879
  :root {
4879
4880
  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4880
4881
  }
@@ -4895,6 +4896,15 @@
4895
4896
  --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
4896
4897
  --x-size-border-width-progress-bar-default: 0;
4897
4898
  }
4899
+ :root {
4900
+ --x-size-height-progress-bar-line-default: var(--x-size-base-02);
4901
+ --x-size-width-progress-bar-line-default: var(--x-size-base-20);
4902
+ --x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
4903
+ --x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
4904
+ --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
4905
+ --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
4906
+ --x-size-border-width-progress-bar-default: 0;
4907
+ }
4898
4908
 
4899
4909
  .x-progress-bar {
4900
4910
  display: inline-block;
@@ -4911,15 +4921,6 @@
4911
4921
  border-radius: var(--x-size-border-radius-progress-bar-default);
4912
4922
  background-color: var(--x-color-background-progress-bar-line-default);
4913
4923
  }
4914
- :root {
4915
- --x-size-height-progress-bar-line-default: var(--x-size-base-02);
4916
- --x-size-width-progress-bar-line-default: var(--x-size-base-20);
4917
- --x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
4918
- --x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
4919
- --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
4920
- --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
4921
- --x-size-border-width-progress-bar-default: 0;
4922
- }
4923
4924
  :root {
4924
4925
  --x-number-zoom-scale-picture: 1.1;
4925
4926
  --x-number-zoom-duration-picture: 0.3s;
@@ -4938,14 +4939,14 @@
4938
4939
  :root {
4939
4940
  --x-number-aspect-ratio-picture: 1;
4940
4941
  }
4942
+ :root {
4943
+ --x-number-aspect-ratio-picture: 1;
4944
+ }
4941
4945
 
4942
4946
  .x-picture--fixed-ratio.x-picture {
4943
4947
  aspect-ratio: var(--x-number-aspect-ratio-picture);
4944
4948
  width: 100%;
4945
4949
  }
4946
- :root {
4947
- --x-number-aspect-ratio-picture: 1;
4948
- }
4949
4950
  :root {
4950
4951
  --x-size-border-radius-picture-default: 0;
4951
4952
  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5024,6 +5025,10 @@
5024
5025
  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5025
5026
  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5026
5027
  }
5028
+ :root {
5029
+ --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5030
+ --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5031
+ }
5027
5032
 
5028
5033
  .x-picture--cover.x-picture {
5029
5034
  position: relative;
@@ -5040,10 +5045,6 @@
5040
5045
  width: 100%;
5041
5046
  height: 100%;
5042
5047
  }
5043
- :root {
5044
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5045
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5046
- }
5047
5048
  :root {
5048
5049
  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5049
5050
  --x-mix-blend-mode-picture-colored: multiply;
@@ -5076,6 +5077,13 @@
5076
5077
  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5077
5078
  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5078
5079
  }
5080
+ :root {
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
+ }
5079
5087
 
5080
5088
  .x-picture--card.x-picture {
5081
5089
  --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
@@ -5084,13 +5092,6 @@
5084
5092
  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5085
5093
  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5086
5094
  }
5087
- :root {
5088
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5089
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5090
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5091
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5092
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5093
- }
5094
5095
  :root {
5095
5096
  --x-color-background-option-list-button-default: transparent;
5096
5097
  --x-color-border-option-list-button-default: transparent;
@@ -5408,6 +5409,51 @@
5408
5409
  --x-number-font-weight-base-regular
5409
5410
  );
5410
5411
  }
5412
+ :root {
5413
+ --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5414
+ --x-color-text-option-list-button-bottom-selected-hover: var(
5415
+ --x-color-text-option-list-button-bottom-selected
5416
+ );
5417
+ --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
5418
+ --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
5419
+ --x-color-border-option-list-item-bottom: transparent;
5420
+ --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5421
+ --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5422
+ --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5423
+ --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5424
+ --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
5425
+ --x-color-border-top-option-list-item-bottom-selected: var(
5426
+ --x-color-border-option-list-item-bottom
5427
+ );
5428
+ --x-color-border-right-option-list-item-bottom-selected: var(
5429
+ --x-color-border-option-list-item-bottom
5430
+ );
5431
+ --x-color-border-bottom-option-list-item-bottom-selected: var(
5432
+ --x-color-border-option-list-item-bottom-selected
5433
+ );
5434
+ --x-color-border-left-option-list-item-bottom-selected: var(
5435
+ --x-color-border-option-list-item-bottom
5436
+ );
5437
+ --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
5438
+ --x-size-border-width-top-option-list-item-bottom: 0;
5439
+ --x-size-border-width-right-option-list-item-bottom: 0;
5440
+ --x-size-border-width-bottom-option-list-item-bottom: var(
5441
+ --x-size-border-width-option-list-item-bottom
5442
+ );
5443
+ --x-size-border-width-left-option-list-item-bottom: 0;
5444
+ --x-size-border-width-top-option-list-item-bottom-selected: 0;
5445
+ --x-size-border-width-right-option-list-item-bottom-selected: 0;
5446
+ --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5447
+ --x-size-border-width-option-list-item-bottom
5448
+ );
5449
+ --x-size-border-width-left-option-list-item-bottom-selected: 0;
5450
+ --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5451
+ --x-font-decoration-option-list-button-bottom-hover: none;
5452
+ --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5453
+ --x-number-font-weight-option-list-button-bottom-selected: var(
5454
+ --x-number-font-weight-base-regular
5455
+ );
5456
+ }
5411
5457
 
5412
5458
  .x-option-list--bottom.x-option-list,
5413
5459
  .x-option-list--bottom .x-option-list {
@@ -5494,51 +5540,6 @@
5494
5540
  --x-size-border-width-bottom-option-list-item-default: inherit;
5495
5541
  --x-size-border-width-left-option-list-item-default: inherit;
5496
5542
  }
5497
- :root {
5498
- --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5499
- --x-color-text-option-list-button-bottom-selected-hover: var(
5500
- --x-color-text-option-list-button-bottom-selected
5501
- );
5502
- --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
5503
- --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
5504
- --x-color-border-option-list-item-bottom: transparent;
5505
- --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5506
- --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5507
- --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5508
- --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5509
- --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
5510
- --x-color-border-top-option-list-item-bottom-selected: var(
5511
- --x-color-border-option-list-item-bottom
5512
- );
5513
- --x-color-border-right-option-list-item-bottom-selected: var(
5514
- --x-color-border-option-list-item-bottom
5515
- );
5516
- --x-color-border-bottom-option-list-item-bottom-selected: var(
5517
- --x-color-border-option-list-item-bottom-selected
5518
- );
5519
- --x-color-border-left-option-list-item-bottom-selected: var(
5520
- --x-color-border-option-list-item-bottom
5521
- );
5522
- --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
5523
- --x-size-border-width-top-option-list-item-bottom: 0;
5524
- --x-size-border-width-right-option-list-item-bottom: 0;
5525
- --x-size-border-width-bottom-option-list-item-bottom: var(
5526
- --x-size-border-width-option-list-item-bottom
5527
- );
5528
- --x-size-border-width-left-option-list-item-bottom: 0;
5529
- --x-size-border-width-top-option-list-item-bottom-selected: 0;
5530
- --x-size-border-width-right-option-list-item-bottom-selected: 0;
5531
- --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5532
- --x-size-border-width-option-list-item-bottom
5533
- );
5534
- --x-size-border-width-left-option-list-item-bottom-selected: 0;
5535
- --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5536
- --x-font-decoration-option-list-button-bottom-hover: none;
5537
- --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5538
- --x-number-font-weight-option-list-button-bottom-selected: var(
5539
- --x-number-font-weight-base-regular
5540
- );
5541
- }
5542
5543
  :root {
5543
5544
  --x-modal-overlay-color: rgb(0, 0, 0);
5544
5545
  --x-modal-overlay-opacity: 0.7;
@@ -5573,6 +5574,27 @@
5573
5574
  --x-size-font-message-default: var(--x-size-font-title3);
5574
5575
  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5575
5576
  }
5577
+ :root {
5578
+ --x-string-justify-message-default: center;
5579
+ --x-size-gap-message-default: var(--x-size-base-03);
5580
+ --x-size-padding-message-default: var(--x-size-base-06);
5581
+ --x-color-background-message-default: var(--x-color-base-neutral-95);
5582
+ --x-color-border-message-default: var(--x-color-background-message-default);
5583
+ --x-color-text-message-default: var(--x-color-text-default);
5584
+ --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
5585
+ --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
5586
+ --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
5587
+ --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
5588
+ --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
5589
+ --x-size-border-width-message-default: var(--x-size-border-width-base);
5590
+ --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
5591
+ --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
5592
+ --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
5593
+ --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
5594
+ --x-font-family-message-default: var(--x-font-family-title3);
5595
+ --x-size-font-message-default: var(--x-size-font-title3);
5596
+ --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5597
+ }
5576
5598
 
5577
5599
  [dir="ltr"] .x-message {
5578
5600
  border-left-width: var(--x-size-border-width-left-message-default);
@@ -5623,27 +5645,6 @@
5623
5645
  .x-message > p {
5624
5646
  margin: 0;
5625
5647
  }
5626
- :root {
5627
- --x-string-justify-message-default: center;
5628
- --x-size-gap-message-default: var(--x-size-base-03);
5629
- --x-size-padding-message-default: var(--x-size-base-06);
5630
- --x-color-background-message-default: var(--x-color-base-neutral-95);
5631
- --x-color-border-message-default: var(--x-color-background-message-default);
5632
- --x-color-text-message-default: var(--x-color-text-default);
5633
- --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
5634
- --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
5635
- --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
5636
- --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
5637
- --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
5638
- --x-size-border-width-message-default: var(--x-size-border-width-base);
5639
- --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
5640
- --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
5641
- --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
5642
- --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
5643
- --x-font-family-message-default: var(--x-font-family-title3);
5644
- --x-size-font-message-default: var(--x-size-font-title3);
5645
- --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5646
- }
5647
5648
  /* @deprecated */
5648
5649
  :root {
5649
5650
  --x-size-padding-list-01: var(--x-size-base-01);
@@ -6022,6 +6023,28 @@
6022
6023
  --x-size-gap-list-19: var(--x-size-base-19);
6023
6024
  --x-size-gap-list-20: var(--x-size-base-20);
6024
6025
  }
6026
+ :root {
6027
+ --x-size-gap-list-01: var(--x-size-base-01);
6028
+ --x-size-gap-list-02: var(--x-size-base-02);
6029
+ --x-size-gap-list-03: var(--x-size-base-03);
6030
+ --x-size-gap-list-04: var(--x-size-base-04);
6031
+ --x-size-gap-list-05: var(--x-size-base-05);
6032
+ --x-size-gap-list-06: var(--x-size-base-06);
6033
+ --x-size-gap-list-07: var(--x-size-base-07);
6034
+ --x-size-gap-list-08: var(--x-size-base-08);
6035
+ --x-size-gap-list-09: var(--x-size-base-09);
6036
+ --x-size-gap-list-10: var(--x-size-base-10);
6037
+ --x-size-gap-list-11: var(--x-size-base-11);
6038
+ --x-size-gap-list-12: var(--x-size-base-12);
6039
+ --x-size-gap-list-13: var(--x-size-base-13);
6040
+ --x-size-gap-list-14: var(--x-size-base-14);
6041
+ --x-size-gap-list-15: var(--x-size-base-15);
6042
+ --x-size-gap-list-16: var(--x-size-base-16);
6043
+ --x-size-gap-list-17: var(--x-size-base-17);
6044
+ --x-size-gap-list-18: var(--x-size-base-18);
6045
+ --x-size-gap-list-19: var(--x-size-base-19);
6046
+ --x-size-gap-list-20: var(--x-size-base-20);
6047
+ }
6025
6048
 
6026
6049
  .x-list--gap-01.x-list {
6027
6050
  gap: var(--x-size-gap-list-01);
@@ -6523,26 +6546,12 @@
6523
6546
  }
6524
6547
  }
6525
6548
  :root {
6526
- --x-size-gap-list-01: var(--x-size-base-01);
6527
- --x-size-gap-list-02: var(--x-size-base-02);
6528
- --x-size-gap-list-03: var(--x-size-base-03);
6529
- --x-size-gap-list-04: var(--x-size-base-04);
6530
- --x-size-gap-list-05: var(--x-size-base-05);
6531
- --x-size-gap-list-06: var(--x-size-base-06);
6532
- --x-size-gap-list-07: var(--x-size-base-07);
6533
- --x-size-gap-list-08: var(--x-size-base-08);
6534
- --x-size-gap-list-09: var(--x-size-base-09);
6535
- --x-size-gap-list-10: var(--x-size-base-10);
6536
- --x-size-gap-list-11: var(--x-size-base-11);
6537
- --x-size-gap-list-12: var(--x-size-base-12);
6538
- --x-size-gap-list-13: var(--x-size-base-13);
6539
- --x-size-gap-list-14: var(--x-size-base-14);
6540
- --x-size-gap-list-15: var(--x-size-base-15);
6541
- --x-size-gap-list-16: var(--x-size-base-16);
6542
- --x-size-gap-list-17: var(--x-size-base-17);
6543
- --x-size-gap-list-18: var(--x-size-base-18);
6544
- --x-size-gap-list-19: var(--x-size-base-19);
6545
- --x-size-gap-list-20: var(--x-size-base-20);
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;
6546
6555
  }
6547
6556
  :root {
6548
6557
  --x-string-flow-list: column nowrap;
@@ -6693,12 +6702,13 @@
6693
6702
  flex: 12 1 auto;
6694
6703
  }
6695
6704
  :root {
6696
- --x-string-flow-list: column nowrap;
6697
- --x-size-padding-list: 0;
6698
- --x-size-gap-list: 0;
6699
- --x-size-justify-list: stretch;
6700
- --x-size-align-list: stretch;
6701
- --x-size-align-list-stretch: stretch;
6705
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6706
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6707
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6708
+ --x-size-border-radius-bottom-right-input-group-pill: var(
6709
+ --x-size-border-radius-input-group-pill
6710
+ );
6711
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6702
6712
  }
6703
6713
  :root {
6704
6714
  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
@@ -6727,13 +6737,13 @@
6727
6737
  );
6728
6738
  }
6729
6739
  :root {
6730
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6731
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6732
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6733
- --x-size-border-radius-bottom-right-input-group-pill: var(
6734
- --x-size-border-radius-input-group-pill
6735
- );
6736
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6740
+ --x-size-padding-left-input-group-line: 0;
6741
+ --x-size-padding-right-input-group-line: 0;
6742
+ --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6743
+ --x-size-border-width-top-input-group-line: 0;
6744
+ --x-size-border-width-right-input-group-line: 0;
6745
+ --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6746
+ --x-size-border-width-left-input-group-line: 0;
6737
6747
  }
6738
6748
  :root {
6739
6749
  --x-size-padding-left-input-group-line: 0;
@@ -6782,15 +6792,6 @@
6782
6792
  margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6783
6793
  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6784
6794
  }
6785
- :root {
6786
- --x-size-padding-left-input-group-line: 0;
6787
- --x-size-padding-right-input-group-line: 0;
6788
- --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6789
- --x-size-border-width-top-input-group-line: 0;
6790
- --x-size-border-width-right-input-group-line: 0;
6791
- --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6792
- --x-size-border-width-left-input-group-line: 0;
6793
- }
6794
6795
  :root {
6795
6796
  --x-color-background-input-group-default: var(--x-color-background-input-default);
6796
6797
  --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7020,6 +7021,15 @@
7020
7021
  );
7021
7022
  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7022
7023
  }
7024
+ :root {
7025
+ --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7026
+ --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
7027
+ --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
7028
+ --x-size-border-radius-bottom-right-input-group-card: var(
7029
+ --x-size-border-radius-input-group-card
7030
+ );
7031
+ --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7032
+ }
7023
7033
 
7024
7034
  .x-input-group--card.x-input-group,
7025
7035
  .x-input-group--card .x-input-group {
@@ -7047,15 +7057,6 @@
7047
7057
  --x-size-border-radius-top-left-input-group-default: 0;
7048
7058
  --x-size-border-radius-bottom-left-input-group-default: 0;
7049
7059
  }
7050
- :root {
7051
- --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7052
- --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
7053
- --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
7054
- --x-size-border-radius-bottom-right-input-group-card: var(
7055
- --x-size-border-radius-input-group-card
7056
- );
7057
- --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7058
- }
7059
7060
  :root {
7060
7061
  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7061
7062
  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
@@ -7089,6 +7090,16 @@
7089
7090
  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7090
7091
  --x-size-border-width-left-input-line: 0;
7091
7092
  }
7093
+ :root {
7094
+ --x-size-padding-top-input-line: var(--x-size-base-03);
7095
+ --x-size-padding-right-input-line: 0;
7096
+ --x-size-padding-bottom-input-line: var(--x-size-base-03);
7097
+ --x-size-padding-left-input-line: 0;
7098
+ --x-size-border-width-top-input-line: 0;
7099
+ --x-size-border-width-right-input-line: 0;
7100
+ --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7101
+ --x-size-border-width-left-input-line: 0;
7102
+ }
7092
7103
 
7093
7104
  .x-input--line .x-input,
7094
7105
  .x-input--line.x-input {
@@ -7102,14 +7113,32 @@
7102
7113
  --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
7103
7114
  }
7104
7115
  :root {
7105
- --x-size-padding-top-input-line: var(--x-size-base-03);
7106
- --x-size-padding-right-input-line: 0;
7107
- --x-size-padding-bottom-input-line: var(--x-size-base-03);
7108
- --x-size-padding-left-input-line: 0;
7109
- --x-size-border-width-top-input-line: 0;
7110
- --x-size-border-width-right-input-line: 0;
7111
- --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7112
- --x-size-border-width-left-input-line: 0;
7116
+ --x-color-background-input-default: var(--x-color-base-neutral-100);
7117
+ --x-color-border-input-default: var(--x-color-base-neutral-70);
7118
+ --x-color-border-input-default-focus: var(--x-color-base-lead);
7119
+ --x-color-text-input-default: var(--x-color-text-default);
7120
+ --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7121
+ --x-size-border-width-input-default: var(--x-size-border-width-base);
7122
+ --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7123
+ --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7124
+ --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7125
+ --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7126
+ --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7127
+ --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7128
+ --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7129
+ --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7130
+ --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7131
+ --x-size-height-input-default: var(--x-size-base-07);
7132
+ --x-size-padding-right-input-default: var(--x-size-base-04);
7133
+ --x-size-padding-left-input-default: var(--x-size-base-04);
7134
+ --x-font-family-input-default: var(--x-font-family-text);
7135
+ --x-size-font-input-default: var(--x-size-font-text);
7136
+ --x-size-line-height-input-default: var(--x-size-line-height-text);
7137
+ --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7138
+ --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7139
+ --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7140
+ --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7141
+ --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7113
7142
  }
7114
7143
  :root {
7115
7144
  --x-color-background-input-default: var(--x-color-base-neutral-100);
@@ -7220,32 +7249,11 @@
7220
7249
  line-height: var(--x-size-line-height-input-placeholder-default);
7221
7250
  }
7222
7251
  :root {
7223
- --x-color-background-input-default: var(--x-color-base-neutral-100);
7224
- --x-color-border-input-default: var(--x-color-base-neutral-70);
7225
- --x-color-border-input-default-focus: var(--x-color-base-lead);
7226
- --x-color-text-input-default: var(--x-color-text-default);
7227
- --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7228
- --x-size-border-width-input-default: var(--x-size-border-width-base);
7229
- --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7230
- --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7231
- --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7232
- --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7233
- --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7234
- --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7235
- --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7236
- --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7237
- --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7238
- --x-size-height-input-default: var(--x-size-base-07);
7239
- --x-size-padding-right-input-default: var(--x-size-base-04);
7240
- --x-size-padding-left-input-default: var(--x-size-base-04);
7241
- --x-font-family-input-default: var(--x-font-family-text);
7242
- --x-size-font-input-default: var(--x-size-font-text);
7243
- --x-size-line-height-input-default: var(--x-size-line-height-text);
7244
- --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7245
- --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7246
- --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7247
- --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7248
- --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7252
+ --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7253
+ --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7254
+ --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7255
+ --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7256
+ --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7249
7257
  }
7250
7258
  :root {
7251
7259
  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
@@ -7267,13 +7275,6 @@
7267
7275
  --x-size-border-radius-bottom-left-input-card
7268
7276
  );
7269
7277
  }
7270
- :root {
7271
- --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7272
- --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7273
- --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7274
- --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7275
- --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7276
- }
7277
7278
  :root {
7278
7279
  --x-size-width-icon-xl: var(--x-size-base-07);
7279
7280
  --x-size-height-icon-xl: var(--x-size-base-07);
@@ -7304,15 +7305,15 @@
7304
7305
  --x-size-width-icon-m: var(--x-size-base-05);
7305
7306
  --x-size-height-icon-m: var(--x-size-base-05);
7306
7307
  }
7308
+ :root {
7309
+ --x-size-width-icon-m: var(--x-size-base-05);
7310
+ --x-size-height-icon-m: var(--x-size-base-05);
7311
+ }
7307
7312
 
7308
7313
  .x-icon--m {
7309
7314
  --x-size-width-icon-default: var(--x-size-width-icon-m);
7310
7315
  --x-size-height-icon-default: var(--x-size-height-icon-m);
7311
7316
  }
7312
- :root {
7313
- --x-size-width-icon-m: var(--x-size-base-05);
7314
- --x-size-height-icon-m: var(--x-size-base-05);
7315
- }
7316
7317
  :root {
7317
7318
  --x-size-width-icon-l: var(--x-size-base-06);
7318
7319
  --x-size-height-icon-l: var(--x-size-base-06);
@@ -7370,6 +7371,11 @@
7370
7371
  --x-size-gap-grid: var(--x-size-base-03);
7371
7372
  --x-size-min-width-grid-item: 150px;
7372
7373
  }
7374
+ :root {
7375
+ --x-size-padding-grid: 0;
7376
+ --x-size-gap-grid: var(--x-size-base-03);
7377
+ --x-size-min-width-grid-item: 150px;
7378
+ }
7373
7379
 
7374
7380
  .x-grid-list {
7375
7381
  margin: 0;
@@ -7391,10 +7397,18 @@
7391
7397
  .x-grid-list--cols-auto .x-grid-list__item {
7392
7398
  min-width: var(--x-size-min-width-grid-item);
7393
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
+ }
7394
7406
  :root {
7395
- --x-size-padding-grid: 0;
7396
- --x-size-gap-grid: var(--x-size-base-03);
7397
- --x-size-min-width-grid-item: 150px;
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);
7398
7412
  }
7399
7413
  :root {
7400
7414
  --x-size-margin-filter-children: 0;
@@ -7403,11 +7417,30 @@
7403
7417
  --x-size-padding-bottom-filter-children: 0;
7404
7418
  --x-size-padding-left-filter-children: var(--x-size-base-05);
7405
7419
  }
7406
- .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7407
- .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7408
- .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7409
- .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7410
- margin-left: auto;
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%;
7411
7444
  }
7412
7445
  :root {
7413
7446
  --x-color-background-filter-default: transparent;
@@ -7441,38 +7474,6 @@
7441
7474
  );
7442
7475
  --x-size-line-height-filter-default: var(--x-size-line-height-text);
7443
7476
  }
7444
- :root {
7445
- --x-size-margin-filter-children: 0;
7446
- --x-size-padding-top-filter-children: 0;
7447
- --x-size-padding-right-filter-children: 0;
7448
- --x-size-padding-bottom-filter-children: 0;
7449
- --x-size-padding-left-filter-children: var(--x-size-base-05);
7450
- }
7451
-
7452
- .x-hierarchical-filter-container {
7453
- list-style: none;
7454
- }
7455
- [dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7456
- padding-left: var(--x-size-padding-left-filter-children);
7457
- }
7458
- [dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7459
- padding-right: var(--x-size-padding-left-filter-children);
7460
- }
7461
- [dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7462
- padding-right: var(--x-size-padding-right-filter-children);
7463
- }
7464
- [dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7465
- padding-left: var(--x-size-padding-right-filter-children);
7466
- }
7467
- .x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7468
- margin: var(--x-size-margin-filter-children);
7469
- padding-top: var(--x-size-padding-top-filter-children);
7470
- padding-bottom: var(--x-size-padding-bottom-filter-children);
7471
- }
7472
- .x-hierarchical-filter-container .x-hierarchical-filter-container,
7473
- .x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
7474
- width: 100%;
7475
- }
7476
7477
  :root {
7477
7478
  --x-color-background-filter-default: transparent;
7478
7479
  --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -8824,4 +8825,4 @@
8824
8825
  --x-size-border-radius-base-m: var(--x-size-base-06);
8825
8826
  --x-size-border-radius-base-pill: 99999px;
8826
8827
  --x-size-border-width-base: 1px;
8827
- }
8828
+ }