@empathyco/x-components 6.0.0-alpha.44 → 6.0.0-alpha.46

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 +18 -0
  2. package/design-system/deprecated-full-theme.css +825 -825
  3. package/docs/API-reference/api/{x-components.defaultpdpaddtocartservice._constructor_.md → x-components.defaultexternaltaggingservice._constructor_.md} +3 -3
  4. package/docs/API-reference/api/x-components.defaultexternaltaggingservice.add_to_cart_id_key.md +13 -0
  5. package/docs/API-reference/api/x-components.defaultexternaltaggingservice.instance.md +13 -0
  6. package/docs/API-reference/api/x-components.defaultexternaltaggingservice.localstorageservice.md +11 -0
  7. package/docs/API-reference/api/x-components.defaultexternaltaggingservice.md +43 -0
  8. package/docs/API-reference/api/{x-components.defaultpdpaddtocartservice.movetosessionstorage.md → x-components.defaultexternaltaggingservice.movetosessionstorage.md} +2 -2
  9. package/docs/API-reference/api/x-components.defaultexternaltaggingservice.result_clicked_id_key.md +13 -0
  10. package/docs/API-reference/api/x-components.defaultexternaltaggingservice.sessionstorageservice.md +11 -0
  11. package/docs/API-reference/api/x-components.defaultexternaltaggingservice.storagekey.md +11 -0
  12. package/docs/API-reference/api/x-components.defaultexternaltaggingservice.storagettlms.md +11 -0
  13. package/docs/API-reference/api/{x-components.defaultpdpaddtocartservice.store.md → x-components.defaultexternaltaggingservice.store.md} +2 -2
  14. package/docs/API-reference/api/x-components.defaultexternaltaggingservice.storeaddtocart.md +24 -0
  15. package/docs/API-reference/api/{x-components.defaultpdpaddtocartservice.storeresultclicked.md → x-components.defaultexternaltaggingservice.storeresultclicked.md} +3 -3
  16. package/docs/API-reference/api/{x-components.defaultpdpaddtocartservice.trackaddtocart.md → x-components.defaultexternaltaggingservice.trackaddtocart.md} +3 -3
  17. package/docs/API-reference/api/x-components.externaltaggingservice.md +23 -0
  18. package/docs/API-reference/api/{x-components.pdpaddtocartservice.movetosessionstorage.md → x-components.externaltaggingservice.movetosessionstorage.md} +2 -2
  19. package/docs/API-reference/api/x-components.externaltaggingservice.storeaddtocart.md +24 -0
  20. package/docs/API-reference/api/{x-components.pdpaddtocartservice.storeresultclicked.md → x-components.externaltaggingservice.storeresultclicked.md} +3 -3
  21. package/docs/API-reference/api/{x-components.pdpaddtocartservice.trackaddtocart.md → x-components.externaltaggingservice.trackaddtocart.md} +3 -3
  22. package/docs/API-reference/api/x-components.md +2 -2
  23. package/docs/API-reference/api/x-components.tagging.md +6 -6
  24. package/docs/API-reference/api/x-components.taggingconfig.md +2 -2
  25. package/docs/API-reference/api/{x-components.taggingconfig.clickedresultstoragekey.md → x-components.taggingconfig.storagekey.md} +3 -3
  26. package/docs/API-reference/api/x-components.taggingconfig.storagettlms.md +13 -0
  27. package/docs/API-reference/api/x-components.taggingxevents.md +1 -1
  28. package/docs/API-reference/api/x-components.taggingxevents.resulturltrackingenabled.md +1 -1
  29. package/docs/API-reference/components/tagging/x-components.tagging.md +15 -16
  30. package/js/index.js +1 -1
  31. package/js/x-modules/search/store/actions/save-search-response.action.js +1 -0
  32. package/js/x-modules/search/store/actions/save-search-response.action.js.map +1 -1
  33. package/js/x-modules/tagging/components/tagging.vue.js +8 -7
  34. package/js/x-modules/tagging/components/tagging.vue.js.map +1 -1
  35. package/js/x-modules/tagging/service/{pdp-add-to-cart.service.js → external-tagging.service.js} +56 -25
  36. package/js/x-modules/tagging/service/external-tagging.service.js.map +1 -0
  37. package/js/x-modules/tagging/store/emitters.js +1 -1
  38. package/js/x-modules/tagging/store/emitters.js.map +1 -1
  39. package/js/x-modules/tagging/store/module.js +2 -2
  40. package/js/x-modules/tagging/store/module.js.map +1 -1
  41. package/js/x-modules/tagging/wiring.js +14 -7
  42. package/js/x-modules/tagging/wiring.js.map +1 -1
  43. package/package.json +2 -2
  44. package/report/x-components.api.json +768 -639
  45. package/report/x-components.api.md +45 -41
  46. package/tagging/index.js +1 -1
  47. package/types/x-modules/search/store/actions/save-search-response.action.d.ts.map +1 -1
  48. package/types/x-modules/tagging/components/tagging.vue.d.ts +14 -12
  49. package/types/x-modules/tagging/components/tagging.vue.d.ts.map +1 -1
  50. package/types/x-modules/tagging/config.types.d.ts +3 -3
  51. package/types/x-modules/tagging/config.types.d.ts.map +1 -1
  52. package/types/x-modules/tagging/events.types.d.ts +2 -2
  53. package/types/x-modules/tagging/service/{pdp-add-to-cart.service.d.ts → external-tagging.service.d.ts} +31 -13
  54. package/types/x-modules/tagging/service/external-tagging.service.d.ts.map +1 -0
  55. package/types/x-modules/tagging/service/index.d.ts +1 -1
  56. package/types/x-modules/tagging/service/index.d.ts.map +1 -1
  57. package/types/x-modules/tagging/service/types.d.ts +13 -4
  58. package/types/x-modules/tagging/service/types.d.ts.map +1 -1
  59. package/types/x-modules/tagging/wiring.d.ts +1 -0
  60. package/types/x-modules/tagging/wiring.d.ts.map +1 -1
  61. package/docs/API-reference/api/x-components.defaultpdpaddtocartservice.clickedresultstoragekey.md +0 -11
  62. package/docs/API-reference/api/x-components.defaultpdpaddtocartservice.clickedresultstoragettlms.md +0 -11
  63. package/docs/API-reference/api/x-components.defaultpdpaddtocartservice.instance.md +0 -13
  64. package/docs/API-reference/api/x-components.defaultpdpaddtocartservice.localstorageservice.md +0 -11
  65. package/docs/API-reference/api/x-components.defaultpdpaddtocartservice.md +0 -41
  66. package/docs/API-reference/api/x-components.defaultpdpaddtocartservice.result_clicked_id_key.md +0 -13
  67. package/docs/API-reference/api/x-components.defaultpdpaddtocartservice.sessionstorageservice.md +0 -11
  68. package/docs/API-reference/api/x-components.pdpaddtocartservice.md +0 -22
  69. package/docs/API-reference/api/x-components.taggingconfig.clickedresultstoragettlms.md +0 -13
  70. package/js/x-modules/tagging/service/pdp-add-to-cart.service.js.map +0 -1
  71. package/types/x-modules/tagging/service/pdp-add-to-cart.service.d.ts.map +0 -1
@@ -1,5 +1,4 @@
1
1
 
2
-
3
2
  .x-uppercase {
4
3
  text-transform: uppercase;
5
4
  }
@@ -15,6 +14,25 @@
15
14
  .x-normal-case {
16
15
  text-transform: none;
17
16
  }
17
+ .x-underline {
18
+ -webkit-text-decoration-line: underline;
19
+ text-decoration-line: underline;
20
+ }
21
+
22
+ .x-overline {
23
+ -webkit-text-decoration-line: overline;
24
+ text-decoration-line: overline;
25
+ }
26
+
27
+ .x-line-through {
28
+ -webkit-text-decoration-line: line-through;
29
+ text-decoration-line: line-through;
30
+ }
31
+
32
+ .x-no-underline {
33
+ -webkit-text-decoration-line: none;
34
+ text-decoration-line: none;
35
+ }
18
36
  .x-static {
19
37
  position: static !important;
20
38
  }
@@ -34,25 +52,7 @@
34
52
  .x-sticky {
35
53
  position: sticky !important;
36
54
  }
37
- .x-underline {
38
- -webkit-text-decoration-line: underline;
39
- text-decoration-line: underline;
40
- }
41
-
42
- .x-overline {
43
- -webkit-text-decoration-line: overline;
44
- text-decoration-line: overline;
45
- }
46
-
47
- .x-line-through {
48
- -webkit-text-decoration-line: line-through;
49
- text-decoration-line: line-through;
50
- }
51
55
 
52
- .x-no-underline {
53
- -webkit-text-decoration-line: none;
54
- text-decoration-line: none;
55
- }
56
56
  .x-padding--00 {
57
57
  padding: 0 !important;
58
58
  }
@@ -3375,12 +3375,12 @@
3375
3375
  .x-text--stroke.x-small {
3376
3376
  --x-string-text-decoration-small: line-through;
3377
3377
  }
3378
- .x-text--secondary {
3379
- --x-color-text-default: var(--x-color-text-secondary);
3380
- }
3381
3378
  :root {
3382
3379
  --x-color-text-secondary: var(--x-color-base-neutral-35);
3383
3380
  }
3381
+ .x-text--secondary {
3382
+ --x-color-text-default: var(--x-color-text-secondary);
3383
+ }
3384
3384
  .x-text--light.x-text {
3385
3385
  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3386
3386
  }
@@ -3436,6 +3436,21 @@
3436
3436
  --x-size-line-height-small: var(--x-size-line-height-base-s);
3437
3437
  --x-string-text-decoration-small: none;
3438
3438
  }
3439
+ .x-text--bold.x-text {
3440
+ --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3441
+ }
3442
+ .x-text--bold.x-title1 {
3443
+ --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3444
+ }
3445
+ .x-text--bold.x-title2 {
3446
+ --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3447
+ }
3448
+ .x-text--bold.x-title3 {
3449
+ --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3450
+ }
3451
+ .x-text--bold.x-small {
3452
+ --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3453
+ }
3439
3454
  :root {
3440
3455
  --x-font-family-base: "Montserrat", sans-serif;
3441
3456
  --x-size-font-base-xs: 12px;
@@ -3538,21 +3553,6 @@
3538
3553
  overflow: hidden;
3539
3554
  white-space: nowrap;
3540
3555
  }
3541
- .x-text--bold.x-text {
3542
- --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3543
- }
3544
- .x-text--bold.x-title1 {
3545
- --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3546
- }
3547
- .x-text--bold.x-title2 {
3548
- --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3549
- }
3550
- .x-text--bold.x-title3 {
3551
- --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3552
- }
3553
- .x-text--bold.x-small {
3554
- --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3555
- }
3556
3556
  :root {
3557
3557
  --x-color-text-accent: var(--x-color-base-accent);
3558
3558
  }
@@ -3596,6 +3596,36 @@
3596
3596
  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3597
3597
  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3598
3598
  }
3599
+ :root {
3600
+ --x-color-background-tag-ghost: transparent;
3601
+ --x-color-border-tag-ghost: transparent;
3602
+ --x-color-background-tag-selected-ghost: transparent;
3603
+ --x-color-border-tag-selected-ghost: transparent;
3604
+ --x-color-background-tag-curated-ghost: transparent;
3605
+ --x-color-border-tag-curated-ghost: transparent;
3606
+ --x-color-background-tag-curated-selected-ghost: transparent;
3607
+ --x-color-border-tag-curated-selected-ghost: transparent;
3608
+ --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3609
+ --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3610
+ }
3611
+
3612
+ .x-tag--ghost.x-tag,
3613
+ .x-tag--ghost .x-tag {
3614
+ --x-color-background-tag-default: var(--x-color-background-tag-ghost);
3615
+ --x-color-border-tag-default: var(--x-color-border-tag-ghost);
3616
+ --x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
3617
+ --x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
3618
+ --x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
3619
+ --x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
3620
+ --x-color-background-tag-default-curated-selected: var(
3621
+ --x-color-background-tag-curated-selected-ghost
3622
+ );
3623
+ --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
3624
+ --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
3625
+ --x-number-font-weight-tag-default-curated-selected: var(
3626
+ --x-number-font-weight-tag-curated-selected-ghost
3627
+ );
3628
+ }
3599
3629
  :root {
3600
3630
  --x-color-background-tag-default: var(--x-color-base-neutral-100);
3601
3631
  --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -3642,36 +3672,6 @@
3642
3672
  --x-number-font-weight-tag-default-selected
3643
3673
  );
3644
3674
  }
3645
- :root {
3646
- --x-color-background-tag-ghost: transparent;
3647
- --x-color-border-tag-ghost: transparent;
3648
- --x-color-background-tag-selected-ghost: transparent;
3649
- --x-color-border-tag-selected-ghost: transparent;
3650
- --x-color-background-tag-curated-ghost: transparent;
3651
- --x-color-border-tag-curated-ghost: transparent;
3652
- --x-color-background-tag-curated-selected-ghost: transparent;
3653
- --x-color-border-tag-curated-selected-ghost: transparent;
3654
- --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3655
- --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3656
- }
3657
-
3658
- .x-tag--ghost.x-tag,
3659
- .x-tag--ghost .x-tag {
3660
- --x-color-background-tag-default: var(--x-color-background-tag-ghost);
3661
- --x-color-border-tag-default: var(--x-color-border-tag-ghost);
3662
- --x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
3663
- --x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
3664
- --x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
3665
- --x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
3666
- --x-color-background-tag-default-curated-selected: var(
3667
- --x-color-background-tag-curated-selected-ghost
3668
- );
3669
- --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
3670
- --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
3671
- --x-number-font-weight-tag-default-curated-selected: var(
3672
- --x-number-font-weight-tag-curated-selected-ghost
3673
- );
3674
- }
3675
3675
  :root {
3676
3676
  --x-color-background-tag-default: var(--x-color-base-neutral-100);
3677
3677
  --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -3959,47 +3959,6 @@
3959
3959
  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
3960
3960
  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
3961
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
- }
4003
3962
 
4004
3963
  [dir="ltr"] .x-suggestion-group {
4005
3964
  padding-left: var(--x-size-padding-left-suggestion-group-default);
@@ -4076,87 +4035,68 @@
4076
4035
  border: none;
4077
4036
  }
4078
4037
  :root {
4079
- --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4080
- --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4081
- --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4082
- --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4083
- }
4084
- .x-sliding-panel {
4085
- z-index: 0;
4086
- background-color: var(--x-color-background-sliding-panel);
4087
- }
4088
- .x-sliding-panel__button.x-button {
4089
- --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
4090
- pointer-events: none;
4091
- }
4092
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
4093
- pointer-events: all;
4094
- }
4095
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-left {
4096
- transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4097
- }
4098
- .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-right {
4099
- transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
4100
- }
4101
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
4102
- opacity: 0;
4103
- }
4104
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-start):hover .x-sliding-panel-button-left {
4105
- opacity: 1;
4106
- pointer-events: all;
4107
- }
4108
- .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-end):hover .x-sliding-panel-button-right {
4109
- opacity: 1;
4110
- pointer-events: all;
4111
- }
4112
- .x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
4113
- 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)));
4114
- }
4115
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start .x-sliding-panel__scroll {
4116
- 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));
4117
- }
4118
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-end .x-sliding-panel__scroll {
4119
- 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));
4120
- }
4121
- .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start.x-sliding-panel-at-end .x-sliding-panel__scroll {
4122
- mask: none;
4123
- }
4124
- .x-sliding-panel__scroll > * {
4125
- flex: 0 0 auto;
4126
- }
4127
- .x-sliding-panel__scroll > .x-list {
4128
- --x-string-flow-list: row nowrap;
4129
- }
4130
- .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {
4131
- opacity: 1;
4132
- pointer-events: all;
4133
- }
4134
- .x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
4135
- opacity: 1;
4136
- pointer-events: all;
4137
- }
4138
- :root {
4139
- --x-string-align-items-suggestion-default: center;
4140
- --x-color-text-suggestion-default: var(--x-color-text-default);
4141
- --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
4142
- --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
4143
- --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
4144
- --x-color-background-suggestion-default: transparent;
4145
- --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
4146
- --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
4147
- --x-color-text-suggestion-matching-part-default-curated: var(
4038
+ --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
4039
+ --x-color-text-suggestion-group-matching-part-default: var(
4148
4040
  --x-color-text-suggestion-matching-part-default
4149
4041
  );
4150
- --x-color-text-suggestion-default-matching-curated: var(
4151
- --x-color-text-suggestion-default-matching
4152
- );
4153
- --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
4154
- --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
4155
- --x-size-padding-top-suggestion-default: var(--x-size-base-01);
4156
- --x-size-padding-right-suggestion-default: 0;
4157
- --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
4158
- --x-size-padding-left-suggestion-default: 0;
4159
- --x-size-gap-suggestion-default: var(--x-size-base-03);
4042
+ --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
4043
+ --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
4044
+ --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
4045
+ --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
4046
+ --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
4047
+ --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
4048
+ --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
4049
+ --x-size-border-width-suggestion-group-default: 0;
4050
+ --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
4051
+ --x-size-border-width-right-suggestion-group-default: var(
4052
+ --x-size-border-width-suggestion-default
4053
+ );
4054
+ --x-size-border-width-bottom-suggestion-group-default: var(
4055
+ --x-size-border-width-suggestion-default
4056
+ );
4057
+ --x-size-border-width-left-suggestion-group-default: var(
4058
+ --x-size-border-width-suggestion-default
4059
+ );
4060
+ --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
4061
+ --x-size-border-radius-top-left-suggestion-group-default: var(
4062
+ --x-size-border-radius-suggestion-default
4063
+ );
4064
+ --x-size-border-radius-top-right-suggestion-group-default: var(
4065
+ --x-size-border-radius-suggestion-default
4066
+ );
4067
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(
4068
+ --x-size-border-radius-suggestion-default
4069
+ );
4070
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(
4071
+ --x-size-border-radius-suggestion-default
4072
+ );
4073
+ --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
4074
+ --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
4075
+ --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
4076
+ --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
4077
+ }
4078
+ :root {
4079
+ --x-string-align-items-suggestion-default: center;
4080
+ --x-color-text-suggestion-default: var(--x-color-text-default);
4081
+ --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
4082
+ --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
4083
+ --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
4084
+ --x-color-background-suggestion-default: transparent;
4085
+ --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
4086
+ --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
4087
+ --x-color-text-suggestion-matching-part-default-curated: var(
4088
+ --x-color-text-suggestion-matching-part-default
4089
+ );
4090
+ --x-color-text-suggestion-default-matching-curated: var(
4091
+ --x-color-text-suggestion-default-matching
4092
+ );
4093
+ --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
4094
+ --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
4095
+ --x-size-padding-top-suggestion-default: var(--x-size-base-01);
4096
+ --x-size-padding-right-suggestion-default: 0;
4097
+ --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
4098
+ --x-size-padding-left-suggestion-default: 0;
4099
+ --x-size-gap-suggestion-default: var(--x-size-base-03);
4160
4100
  --x-size-border-width-suggestion-default: 0;
4161
4101
  --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
4162
4102
  --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
@@ -4225,6 +4165,12 @@
4225
4165
  --x-number-font-weight-suggestion-default-matching
4226
4166
  );
4227
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
+ }
4228
4174
  :root {
4229
4175
  --x-string-align-items-suggestion-default: center;
4230
4176
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4447,6 +4393,60 @@
4447
4393
  --x-color-text-suggestion-default-matching-curated
4448
4394
  );
4449
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;
4449
+ }
4450
4450
  :root {
4451
4451
  --x-string-overflow-scroll: auto;
4452
4452
  --x-color-background-scroll-bar: transparent;
@@ -4551,28 +4551,6 @@
4551
4551
  --x-size-gap-row-19: var(--x-size-base-19);
4552
4552
  --x-size-gap-row-20: var(--x-size-base-20);
4553
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
- }
4576
4554
 
4577
4555
  .x-row--gap-01 {
4578
4556
  --x-size-gap-row: var(--x-size-gap-row-01);
@@ -4653,6 +4631,28 @@
4653
4631
  .x-row--gap-20 {
4654
4632
  --x-size-gap-row: var(--x-size-gap-row-20);
4655
4633
  }
4634
+ :root {
4635
+ --x-size-gap-row-01: var(--x-size-base-01);
4636
+ --x-size-gap-row-02: var(--x-size-base-02);
4637
+ --x-size-gap-row-03: var(--x-size-base-03);
4638
+ --x-size-gap-row-04: var(--x-size-base-04);
4639
+ --x-size-gap-row-05: var(--x-size-base-05);
4640
+ --x-size-gap-row-06: var(--x-size-base-06);
4641
+ --x-size-gap-row-07: var(--x-size-base-07);
4642
+ --x-size-gap-row-08: var(--x-size-base-08);
4643
+ --x-size-gap-row-09: var(--x-size-base-09);
4644
+ --x-size-gap-row-10: var(--x-size-base-10);
4645
+ --x-size-gap-row-11: var(--x-size-base-11);
4646
+ --x-size-gap-row-12: var(--x-size-base-12);
4647
+ --x-size-gap-row-13: var(--x-size-base-13);
4648
+ --x-size-gap-row-14: var(--x-size-base-14);
4649
+ --x-size-gap-row-15: var(--x-size-base-15);
4650
+ --x-size-gap-row-16: var(--x-size-base-16);
4651
+ --x-size-gap-row-17: var(--x-size-base-17);
4652
+ --x-size-gap-row-18: var(--x-size-base-18);
4653
+ --x-size-gap-row-19: var(--x-size-base-19);
4654
+ --x-size-gap-row-20: var(--x-size-base-20);
4655
+ }
4656
4656
  :root {
4657
4657
  --x-size-gap-row: 0;
4658
4658
  --x-size-padding-row: 0;
@@ -4879,23 +4879,14 @@
4879
4879
  :root {
4880
4880
  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4881
4881
  }
4882
- :root {
4883
- --x-size-height-progress-bar-line-default: var(--x-size-base-02);
4884
- --x-size-width-progress-bar-line-default: var(--x-size-base-20);
4885
- --x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
4886
- --x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
4887
- --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
4888
- --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
4889
- --x-size-border-width-progress-bar-default: 0;
4890
- }
4891
- :root {
4892
- --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4893
- }
4894
4882
 
4895
4883
  .x-result.x-result--card {
4896
4884
  overflow: hidden;
4897
4885
  --x-size-border-radius-result-default: var(--x-size-border-radius-result-card);
4898
4886
  }
4887
+ :root {
4888
+ --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4889
+ }
4899
4890
  :root {
4900
4891
  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
4901
4892
  --x-size-width-progress-bar-line-default: var(--x-size-base-20);
@@ -4921,6 +4912,15 @@
4921
4912
  border-radius: var(--x-size-border-radius-progress-bar-default);
4922
4913
  background-color: var(--x-color-background-progress-bar-line-default);
4923
4914
  }
4915
+ :root {
4916
+ --x-size-height-progress-bar-line-default: var(--x-size-base-02);
4917
+ --x-size-width-progress-bar-line-default: var(--x-size-base-20);
4918
+ --x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
4919
+ --x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
4920
+ --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
4921
+ --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
4922
+ --x-size-border-width-progress-bar-default: 0;
4923
+ }
4924
4924
  :root {
4925
4925
  --x-number-zoom-scale-picture: 1.1;
4926
4926
  --x-number-zoom-duration-picture: 0.3s;
@@ -5077,6 +5077,21 @@
5077
5077
  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5078
5078
  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5079
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
+ }
5087
+
5088
+ .x-picture--card.x-picture {
5089
+ --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5090
+ --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5091
+ --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5092
+ --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5093
+ --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5094
+ }
5080
5095
  :root {
5081
5096
  --x-color-background-option-list-button-default: transparent;
5082
5097
  --x-color-border-option-list-button-default: transparent;
@@ -5157,32 +5172,209 @@
5157
5172
  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5158
5173
  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5159
5174
  }
5160
- :root {
5161
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5162
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5163
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5164
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5165
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5166
- }
5167
5175
 
5168
- .x-picture--card.x-picture {
5169
- --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5170
- --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5171
- --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5172
- --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5173
- --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5176
+ .x-option-list {
5177
+ display: inline-flex;
5178
+ flex-flow: row nowrap;
5179
+ align-items: center;
5180
+ box-sizing: border-box;
5181
+ list-style-type: none;
5182
+ margin: 0;
5183
+ padding: 0;
5174
5184
  }
5175
- :root {
5176
- --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5177
- --x-color-text-option-list-button-bottom-selected-hover: var(
5178
- --x-color-text-option-list-button-bottom-selected
5185
+ [dir="ltr"] .x-option-list__item {
5186
+ border-right-width: var(--x-size-border-width-right-option-list-item-default);
5187
+ }
5188
+ [dir="rtl"] .x-option-list__item {
5189
+ border-left-width: var(--x-size-border-width-right-option-list-item-default);
5190
+ }
5191
+ [dir="ltr"] .x-option-list__item {
5192
+ border-left-width: var(--x-size-border-width-left-option-list-item-default);
5193
+ }
5194
+ [dir="rtl"] .x-option-list__item {
5195
+ border-right-width: var(--x-size-border-width-left-option-list-item-default);
5196
+ }
5197
+ .x-option-list__item {
5198
+ border-top-color: var(--x-color-border-top-option-list-item-default);
5199
+ border-right-color: var(--x-color-border-right-option-list-item-default);
5200
+ border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
5201
+ border-left-color: var(--x-color-border-left-option-list-item-default);
5202
+ border-style: solid;
5203
+ border-top-width: var(--x-size-border-width-top-option-list-item-default);
5204
+ border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default);
5205
+ }
5206
+ .x-option-list__item.x-option-list__item--is-selected {
5207
+ --x-color-border-option-list-item-default: var(
5208
+ --x-color-border-option-list-item-default-selected
5179
5209
  );
5180
- --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
5181
- --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
5182
- --x-color-border-option-list-item-bottom: transparent;
5183
- --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5184
- --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5185
- --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5210
+ --x-color-border-top-option-list-item-default: var(
5211
+ --x-color-border-top-option-list-item-default-selected
5212
+ );
5213
+ --x-color-border-right-option-list-item-default: var(
5214
+ --x-color-border-right-option-list-item-default-selected
5215
+ );
5216
+ --x-color-border-bottom-option-list-item-default: var(
5217
+ --x-color-border-bottom-option-list-item-default-selected
5218
+ );
5219
+ --x-color-border-left-option-list-item-default: var(
5220
+ --x-color-border-left-option-list-item-default-selected
5221
+ );
5222
+ --x-size-border-width-top-option-list-item-default: var(
5223
+ --x-size-border-width-top-option-list-item-default-selected
5224
+ );
5225
+ --x-size-border-width-right-option-list-item-default: var(
5226
+ --x-size-border-width-right-option-list-item-default-selected
5227
+ );
5228
+ --x-size-border-width-bottom-option-list-item-default: var(
5229
+ --x-size-border-width-bottom-option-list-item-default-selected
5230
+ );
5231
+ --x-size-border-width-left-option-list-item-default: var(
5232
+ --x-size-border-width-left-option-list-item-default-selected
5233
+ );
5234
+ }
5235
+ .x-option-list__item.x-option-list__item--is-selected .x-button {
5236
+ --x-color-background-button-default: var(
5237
+ --x-color-background-option-list-button-default-selected
5238
+ );
5239
+ --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
5240
+ --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
5241
+ --x-number-font-weight-option-list-button-default: var(
5242
+ --x-number-font-weight-option-list-button-default-selected
5243
+ );
5244
+ }
5245
+ .x-option-list__item.x-option-list__item--is-selected .x-button:hover {
5246
+ --x-color-background-button-default: var(
5247
+ --x-color-background-option-list-button-default-selected-hover
5248
+ );
5249
+ --x-color-border-button-default: var(
5250
+ --x-color-border-option-list-button-default-selected-hover
5251
+ );
5252
+ --x-color-text-button-default: var(
5253
+ --x-color-text-option-list-button-default-selected-hover
5254
+ );
5255
+ }
5256
+ .x-option-list__item:last-child {
5257
+ --x-size-border-width-option-list-item-default: 0;
5258
+ --x-size-border-width-top-option-list-item-default: 0;
5259
+ --x-size-border-width-right-option-list-item-default: 0;
5260
+ --x-size-border-width-bottom-option-list-item-default: 0;
5261
+ --x-size-border-width-left-option-list-item-default: 0;
5262
+ }
5263
+ .x-option-list__item .x-button {
5264
+ --x-color-background-button-default: var(--x-color-background-option-list-button-default);
5265
+ --x-color-border-button-default: var(--x-color-border-option-list-button-default);
5266
+ --x-color-text-button-default: var(--x-color-text-option-list-button-default);
5267
+ min-height: auto;
5268
+ --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
5269
+ --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
5270
+ --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
5271
+ --x-size-padding-bottom-button-default: var(
5272
+ --x-size-padding-bottom-option-list-button-default
5273
+ );
5274
+ --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
5275
+ --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
5276
+ --x-size-font-button-default: var(--x-size-font-option-list-button-default);
5277
+ }
5278
+ .x-option-list__item .x-button:hover {
5279
+ --x-color-background-button-default: var(
5280
+ --x-color-background-option-list-button-default-hover
5281
+ );
5282
+ --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
5283
+ --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
5284
+ -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5285
+ text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5286
+ }
5287
+ :root {
5288
+ --x-color-background-option-list-button-default: transparent;
5289
+ --x-color-border-option-list-button-default: transparent;
5290
+ --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
5291
+ --x-color-background-option-list-button-default-hover: var(
5292
+ --x-color-background-option-list-button-default
5293
+ );
5294
+ --x-color-border-option-list-button-default-hover: var(
5295
+ --x-color-border-option-list-button-default
5296
+ );
5297
+ --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
5298
+ --x-color-background-option-list-button-default-selected: var(
5299
+ --x-color-background-option-list-button-default
5300
+ );
5301
+ --x-color-border-option-list-button-default-selected: var(
5302
+ --x-color-border-option-list-button-default
5303
+ );
5304
+ --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
5305
+ --x-color-background-option-list-button-default-selected-hover: var(
5306
+ --x-color-background-option-list-button-default-selected
5307
+ );
5308
+ --x-color-border-option-list-button-default-selected-hover: var(
5309
+ --x-color-border-option-list-button-default-selected
5310
+ );
5311
+ --x-color-text-option-list-button-default-selected-hover: var(
5312
+ --x-color-text-option-list-button-default-selected
5313
+ );
5314
+ --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
5315
+ --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
5316
+ --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
5317
+ --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
5318
+ --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
5319
+ --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
5320
+ --x-color-border-top-option-list-item-default-selected: var(
5321
+ --x-color-border-option-list-item-default-selected
5322
+ );
5323
+ --x-color-border-right-option-list-item-default-selected: var(
5324
+ --x-color-border-option-list-item-default-selected
5325
+ );
5326
+ --x-color-border-bottom-option-list-item-default-selected: var(
5327
+ --x-color-border-option-list-item-default-selected
5328
+ );
5329
+ --x-color-border-left-option-list-item-default-selected: var(
5330
+ --x-color-border-option-list-item-default-selected
5331
+ );
5332
+ --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
5333
+ --x-size-border-width-top-option-list-item-default: 0;
5334
+ --x-size-border-width-right-option-list-item-default: var(
5335
+ --x-size-border-width-option-list-item-default
5336
+ );
5337
+ --x-size-border-width-bottom-option-list-item-default: 0;
5338
+ --x-size-border-width-left-option-list-item-default: 0;
5339
+ --x-size-border-width-top-option-list-item-default-selected: var(
5340
+ --x-size-border-width-top-option-list-item-default
5341
+ );
5342
+ --x-size-border-width-right-option-list-item-default-selected: var(
5343
+ --x-size-border-width-right-option-list-item-default
5344
+ );
5345
+ --x-size-border-width-bottom-option-list-item-default-selected: var(
5346
+ --x-size-border-width-bottom-option-list-item-default
5347
+ );
5348
+ --x-size-border-width-left-option-list-item-default-selected: var(
5349
+ --x-size-border-width-left-option-list-item-default
5350
+ );
5351
+ --x-size-padding-option-list-button-default: var(--x-size-base-02);
5352
+ --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
5353
+ --x-size-padding-right-option-list-button-default: var(
5354
+ --x-size-padding-option-list-button-default
5355
+ );
5356
+ --x-size-padding-bottom-option-list-button-default: var(
5357
+ --x-size-padding-option-list-button-default
5358
+ );
5359
+ --x-size-padding-left-option-list-button-default: var(
5360
+ --x-size-padding-option-list-button-default
5361
+ );
5362
+ --x-font-decoration-option-list-button-default-hover: underline;
5363
+ --x-size-font-option-list-button-default: var(--x-size-font-text);
5364
+ --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5365
+ --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5366
+ }
5367
+ :root {
5368
+ --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5369
+ --x-color-text-option-list-button-bottom-selected-hover: var(
5370
+ --x-color-text-option-list-button-bottom-selected
5371
+ );
5372
+ --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
5373
+ --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
5374
+ --x-color-border-option-list-item-bottom: transparent;
5375
+ --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5376
+ --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5377
+ --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5186
5378
  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5187
5379
  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
5188
5380
  --x-color-border-top-option-list-item-bottom-selected: var(
@@ -5337,208 +5529,16 @@
5337
5529
  --x-size-border-width-left-option-list-item-bottom-selected
5338
5530
  );
5339
5531
  --x-number-font-weight-option-list-button-default-selected: var(
5340
- --x-number-font-weight-option-list-button-bottom-selected
5341
- );
5342
- }
5343
- .x-option-list--bottom.x-option-list .x-option-list__item:last-child,
5344
- .x-option-list--bottom .x-option-list .x-option-list__item:last-child {
5345
- --x-size-border-width-option-list-item-default: inherit;
5346
- --x-size-border-width-top-option-list-item-default: inherit;
5347
- --x-size-border-width-right-option-list-item-default: inherit;
5348
- --x-size-border-width-bottom-option-list-item-default: inherit;
5349
- --x-size-border-width-left-option-list-item-default: inherit;
5350
- }
5351
- :root {
5352
- --x-color-background-option-list-button-default: transparent;
5353
- --x-color-border-option-list-button-default: transparent;
5354
- --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
5355
- --x-color-background-option-list-button-default-hover: var(
5356
- --x-color-background-option-list-button-default
5357
- );
5358
- --x-color-border-option-list-button-default-hover: var(
5359
- --x-color-border-option-list-button-default
5360
- );
5361
- --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
5362
- --x-color-background-option-list-button-default-selected: var(
5363
- --x-color-background-option-list-button-default
5364
- );
5365
- --x-color-border-option-list-button-default-selected: var(
5366
- --x-color-border-option-list-button-default
5367
- );
5368
- --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
5369
- --x-color-background-option-list-button-default-selected-hover: var(
5370
- --x-color-background-option-list-button-default-selected
5371
- );
5372
- --x-color-border-option-list-button-default-selected-hover: var(
5373
- --x-color-border-option-list-button-default-selected
5374
- );
5375
- --x-color-text-option-list-button-default-selected-hover: var(
5376
- --x-color-text-option-list-button-default-selected
5377
- );
5378
- --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
5379
- --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
5380
- --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
5381
- --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
5382
- --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
5383
- --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
5384
- --x-color-border-top-option-list-item-default-selected: var(
5385
- --x-color-border-option-list-item-default-selected
5386
- );
5387
- --x-color-border-right-option-list-item-default-selected: var(
5388
- --x-color-border-option-list-item-default-selected
5389
- );
5390
- --x-color-border-bottom-option-list-item-default-selected: var(
5391
- --x-color-border-option-list-item-default-selected
5392
- );
5393
- --x-color-border-left-option-list-item-default-selected: var(
5394
- --x-color-border-option-list-item-default-selected
5395
- );
5396
- --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
5397
- --x-size-border-width-top-option-list-item-default: 0;
5398
- --x-size-border-width-right-option-list-item-default: var(
5399
- --x-size-border-width-option-list-item-default
5400
- );
5401
- --x-size-border-width-bottom-option-list-item-default: 0;
5402
- --x-size-border-width-left-option-list-item-default: 0;
5403
- --x-size-border-width-top-option-list-item-default-selected: var(
5404
- --x-size-border-width-top-option-list-item-default
5405
- );
5406
- --x-size-border-width-right-option-list-item-default-selected: var(
5407
- --x-size-border-width-right-option-list-item-default
5408
- );
5409
- --x-size-border-width-bottom-option-list-item-default-selected: var(
5410
- --x-size-border-width-bottom-option-list-item-default
5411
- );
5412
- --x-size-border-width-left-option-list-item-default-selected: var(
5413
- --x-size-border-width-left-option-list-item-default
5414
- );
5415
- --x-size-padding-option-list-button-default: var(--x-size-base-02);
5416
- --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
5417
- --x-size-padding-right-option-list-button-default: var(
5418
- --x-size-padding-option-list-button-default
5419
- );
5420
- --x-size-padding-bottom-option-list-button-default: var(
5421
- --x-size-padding-option-list-button-default
5422
- );
5423
- --x-size-padding-left-option-list-button-default: var(
5424
- --x-size-padding-option-list-button-default
5425
- );
5426
- --x-font-decoration-option-list-button-default-hover: underline;
5427
- --x-size-font-option-list-button-default: var(--x-size-font-text);
5428
- --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5429
- --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5430
- }
5431
-
5432
- .x-option-list {
5433
- display: inline-flex;
5434
- flex-flow: row nowrap;
5435
- align-items: center;
5436
- box-sizing: border-box;
5437
- list-style-type: none;
5438
- margin: 0;
5439
- padding: 0;
5440
- }
5441
- [dir="ltr"] .x-option-list__item {
5442
- border-right-width: var(--x-size-border-width-right-option-list-item-default);
5443
- }
5444
- [dir="rtl"] .x-option-list__item {
5445
- border-left-width: var(--x-size-border-width-right-option-list-item-default);
5446
- }
5447
- [dir="ltr"] .x-option-list__item {
5448
- border-left-width: var(--x-size-border-width-left-option-list-item-default);
5449
- }
5450
- [dir="rtl"] .x-option-list__item {
5451
- border-right-width: var(--x-size-border-width-left-option-list-item-default);
5452
- }
5453
- .x-option-list__item {
5454
- border-top-color: var(--x-color-border-top-option-list-item-default);
5455
- border-right-color: var(--x-color-border-right-option-list-item-default);
5456
- border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
5457
- border-left-color: var(--x-color-border-left-option-list-item-default);
5458
- border-style: solid;
5459
- border-top-width: var(--x-size-border-width-top-option-list-item-default);
5460
- border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default);
5461
- }
5462
- .x-option-list__item.x-option-list__item--is-selected {
5463
- --x-color-border-option-list-item-default: var(
5464
- --x-color-border-option-list-item-default-selected
5465
- );
5466
- --x-color-border-top-option-list-item-default: var(
5467
- --x-color-border-top-option-list-item-default-selected
5468
- );
5469
- --x-color-border-right-option-list-item-default: var(
5470
- --x-color-border-right-option-list-item-default-selected
5471
- );
5472
- --x-color-border-bottom-option-list-item-default: var(
5473
- --x-color-border-bottom-option-list-item-default-selected
5474
- );
5475
- --x-color-border-left-option-list-item-default: var(
5476
- --x-color-border-left-option-list-item-default-selected
5477
- );
5478
- --x-size-border-width-top-option-list-item-default: var(
5479
- --x-size-border-width-top-option-list-item-default-selected
5480
- );
5481
- --x-size-border-width-right-option-list-item-default: var(
5482
- --x-size-border-width-right-option-list-item-default-selected
5483
- );
5484
- --x-size-border-width-bottom-option-list-item-default: var(
5485
- --x-size-border-width-bottom-option-list-item-default-selected
5486
- );
5487
- --x-size-border-width-left-option-list-item-default: var(
5488
- --x-size-border-width-left-option-list-item-default-selected
5489
- );
5490
- }
5491
- .x-option-list__item.x-option-list__item--is-selected .x-button {
5492
- --x-color-background-button-default: var(
5493
- --x-color-background-option-list-button-default-selected
5494
- );
5495
- --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
5496
- --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
5497
- --x-number-font-weight-option-list-button-default: var(
5498
- --x-number-font-weight-option-list-button-default-selected
5499
- );
5500
- }
5501
- .x-option-list__item.x-option-list__item--is-selected .x-button:hover {
5502
- --x-color-background-button-default: var(
5503
- --x-color-background-option-list-button-default-selected-hover
5504
- );
5505
- --x-color-border-button-default: var(
5506
- --x-color-border-option-list-button-default-selected-hover
5507
- );
5508
- --x-color-text-button-default: var(
5509
- --x-color-text-option-list-button-default-selected-hover
5510
- );
5511
- }
5512
- .x-option-list__item:last-child {
5513
- --x-size-border-width-option-list-item-default: 0;
5514
- --x-size-border-width-top-option-list-item-default: 0;
5515
- --x-size-border-width-right-option-list-item-default: 0;
5516
- --x-size-border-width-bottom-option-list-item-default: 0;
5517
- --x-size-border-width-left-option-list-item-default: 0;
5518
- }
5519
- .x-option-list__item .x-button {
5520
- --x-color-background-button-default: var(--x-color-background-option-list-button-default);
5521
- --x-color-border-button-default: var(--x-color-border-option-list-button-default);
5522
- --x-color-text-button-default: var(--x-color-text-option-list-button-default);
5523
- min-height: auto;
5524
- --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
5525
- --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
5526
- --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
5527
- --x-size-padding-bottom-button-default: var(
5528
- --x-size-padding-bottom-option-list-button-default
5529
- );
5530
- --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
5531
- --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
5532
- --x-size-font-button-default: var(--x-size-font-option-list-button-default);
5533
- }
5534
- .x-option-list__item .x-button:hover {
5535
- --x-color-background-button-default: var(
5536
- --x-color-background-option-list-button-default-hover
5537
- );
5538
- --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
5539
- --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
5540
- -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5541
- text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5532
+ --x-number-font-weight-option-list-button-bottom-selected
5533
+ );
5534
+ }
5535
+ .x-option-list--bottom.x-option-list .x-option-list__item:last-child,
5536
+ .x-option-list--bottom .x-option-list .x-option-list__item:last-child {
5537
+ --x-size-border-width-option-list-item-default: inherit;
5538
+ --x-size-border-width-top-option-list-item-default: inherit;
5539
+ --x-size-border-width-right-option-list-item-default: inherit;
5540
+ --x-size-border-width-bottom-option-list-item-default: inherit;
5541
+ --x-size-border-width-left-option-list-item-default: inherit;
5542
5542
  }
5543
5543
  :root {
5544
5544
  --x-modal-overlay-color: rgb(0, 0, 0);
@@ -5574,27 +5574,6 @@
5574
5574
  --x-size-font-message-default: var(--x-size-font-title3);
5575
5575
  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5576
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
- }
5598
5577
 
5599
5578
  [dir="ltr"] .x-message {
5600
5579
  border-left-width: var(--x-size-border-width-left-message-default);
@@ -5645,21 +5624,26 @@
5645
5624
  .x-message > p {
5646
5625
  margin: 0;
5647
5626
  }
5648
- /* @deprecated */
5649
5627
  :root {
5650
- --x-size-padding-list-01: var(--x-size-base-01);
5651
- --x-size-padding-list-02: var(--x-size-base-02);
5652
- --x-size-padding-list-03: var(--x-size-base-03);
5653
- --x-size-padding-list-04: var(--x-size-base-04);
5654
- --x-size-padding-list-05: var(--x-size-base-05);
5655
- --x-size-padding-list-06: var(--x-size-base-06);
5656
- --x-size-padding-list-07: var(--x-size-base-07);
5657
- --x-size-padding-list-08: var(--x-size-base-08);
5658
- --x-size-padding-list-09: var(--x-size-base-09);
5659
- --x-size-padding-list-10: var(--x-size-base-10);
5660
- --x-size-padding-list-11: var(--x-size-base-11);
5661
- --x-size-padding-list-12: var(--x-size-base-12);
5662
- --x-size-padding-list-13: var(--x-size-base-13);
5628
+ --x-string-justify-message-default: center;
5629
+ --x-size-gap-message-default: var(--x-size-base-03);
5630
+ --x-size-padding-message-default: var(--x-size-base-06);
5631
+ --x-color-background-message-default: var(--x-color-base-neutral-95);
5632
+ --x-color-border-message-default: var(--x-color-background-message-default);
5633
+ --x-color-text-message-default: var(--x-color-text-default);
5634
+ --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
5635
+ --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
5636
+ --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
5637
+ --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
5638
+ --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
5639
+ --x-size-border-width-message-default: var(--x-size-border-width-base);
5640
+ --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
5641
+ --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
5642
+ --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
5643
+ --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
5644
+ --x-font-family-message-default: var(--x-font-family-title3);
5645
+ --x-size-font-message-default: var(--x-size-font-title3);
5646
+ --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5663
5647
  }
5664
5648
  /* @deprecated */
5665
5649
  :root {
@@ -5961,223 +5945,83 @@
5961
5945
  .x-list--padding-12.x-list {
5962
5946
  padding: var(--x-size-padding-list-12);
5963
5947
  }
5964
-
5965
- .x-list--gap-.x-list {
5966
- gap: var(--x-size-gap-list-12);
5967
- }
5968
- @media not all and (min-resolution: 0.001dpcm) {
5969
- .x-list--gap-.x-list {
5970
- gap: 0;
5971
- }
5972
- .x-list--gap-.x-list > *:not(:last-child) {
5973
- margin-bottom: var(--x-size-gap-list-12);
5974
- }
5975
- .x-list--gap-.x-list.x-list--horizontal {
5976
- gap: 0;
5977
- }
5978
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5979
- margin-right: var(--x-size-gap-list-12);
5980
- }
5981
- }
5982
-
5983
- .x-list--padding-13.x-list {
5984
- padding: var(--x-size-padding-list-13);
5985
- }
5986
-
5987
- .x-list--gap-.x-list {
5988
- gap: var(--x-size-gap-list-13);
5989
- }
5990
- @media not all and (min-resolution: 0.001dpcm) {
5991
- .x-list--gap-.x-list {
5992
- gap: 0;
5993
- }
5994
- .x-list--gap-.x-list > *:not(:last-child) {
5995
- margin-bottom: var(--x-size-gap-list-13);
5996
- }
5997
- .x-list--gap-.x-list.x-list--horizontal {
5998
- gap: 0;
5999
- }
6000
- .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
6001
- margin-right: var(--x-size-gap-list-13);
6002
- }
6003
- }
6004
- :root {
6005
- --x-size-gap-list-01: var(--x-size-base-01);
6006
- --x-size-gap-list-02: var(--x-size-base-02);
6007
- --x-size-gap-list-03: var(--x-size-base-03);
6008
- --x-size-gap-list-04: var(--x-size-base-04);
6009
- --x-size-gap-list-05: var(--x-size-base-05);
6010
- --x-size-gap-list-06: var(--x-size-base-06);
6011
- --x-size-gap-list-07: var(--x-size-base-07);
6012
- --x-size-gap-list-08: var(--x-size-base-08);
6013
- --x-size-gap-list-09: var(--x-size-base-09);
6014
- --x-size-gap-list-10: var(--x-size-base-10);
6015
- --x-size-gap-list-11: var(--x-size-base-11);
6016
- --x-size-gap-list-12: var(--x-size-base-12);
6017
- --x-size-gap-list-13: var(--x-size-base-13);
6018
- --x-size-gap-list-14: var(--x-size-base-14);
6019
- --x-size-gap-list-15: var(--x-size-base-15);
6020
- --x-size-gap-list-16: var(--x-size-base-16);
6021
- --x-size-gap-list-17: var(--x-size-base-17);
6022
- --x-size-gap-list-18: var(--x-size-base-18);
6023
- --x-size-gap-list-19: var(--x-size-base-19);
6024
- --x-size-gap-list-20: var(--x-size-base-20);
6025
- }
6026
- :root {
6027
- --x-string-flow-list: column nowrap;
6028
- --x-size-padding-list: 0;
6029
- --x-size-gap-list: 0;
6030
- --x-size-justify-list: stretch;
6031
- --x-size-align-list: stretch;
6032
- --x-size-align-list-stretch: stretch;
6033
- }
6034
-
6035
- .x-list {
6036
- display: flex;
6037
- flex-flow: var(--x-string-flow-list);
6038
- list-style: none;
6039
- gap: var(--x-size-gap-list);
6040
- margin: 0;
6041
- padding: var(--x-size-padding-list);
6042
- justify-content: var(--x-size-justify-list);
6043
- align-items: var(--x-size-align-list);
6044
- min-width: 0;
6045
- }
6046
- @media not all and (min-resolution: 0.001dpcm) {
6047
- .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
6048
- gap: 0;
6049
- }
6050
- .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
6051
- margin-bottom: var(--x-size-gap-list);
6052
- }
6053
- .x-list.x-list--horizontal {
6054
- gap: 0;
6055
- }
6056
- .x-list.x-list--horizontal > *:not(:last-child) {
6057
- margin-right: var(--x-size-gap-list);
6058
- }
6059
- .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
6060
- gap: 0;
6061
- }
6062
- .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
6063
- margin-right: var(--x-size-gap-list);
6064
- margin-bottom: var(--x-size-gap-list);
6065
- }
6066
- }
6067
-
6068
- .x-list--vertical.x-list {
6069
- flex-flow: column nowrap;
6070
- }
6071
-
6072
- .x-list--horizontal.x-list {
6073
- flex-flow: row nowrap;
6074
- }
6075
-
6076
- .x-list--wrap.x-list {
6077
- flex-flow: row wrap;
6078
- }
6079
-
6080
- .x-list--wrap-reverse.x-list {
6081
- flex-flow: row wrap-reverse;
6082
- }
6083
-
6084
- .x-list--justify-stretch.x-list {
6085
- justify-content: stretch;
6086
- }
6087
-
6088
- .x-list--justify-center.x-list {
6089
- justify-content: center;
6090
- }
6091
-
6092
- .x-list--justify-end.x-list {
6093
- justify-content: flex-end;
6094
- }
6095
-
6096
- .x-list--justify-start.x-list {
6097
- justify-content: flex-start;
6098
- }
6099
-
6100
- .x-list--align-stretch.x-list {
6101
- align-items: stretch;
6102
- }
6103
-
6104
- .x-list--align-center.x-list {
6105
- align-items: center;
6106
- }
6107
-
6108
- .x-list--align-baseline.x-list {
6109
- align-items: baseline;
6110
- }
6111
-
6112
- .x-list--align-end.x-list {
6113
- align-items: flex-end;
6114
- }
6115
-
6116
- .x-list--align-start.x-list {
6117
- align-items: flex-start;
6118
- }
6119
-
6120
- .x-list > .x-list__item--expand {
6121
- flex: 1 1 auto;
6122
- }
6123
- .x-list > .x-list__item--no-expand {
6124
- flex: 0 0 auto;
6125
- }
6126
- .x-list.x-list--horizontal > .x-list__item--expand {
6127
- min-width: 0;
6128
- }
6129
- .x-list:not(.x-list--horizontal) > .x-list__item--expand {
6130
- min-height: 0;
6131
- }
6132
- .x-list > .x-list__item--stretch {
6133
- align-self: stretch;
6134
- }
6135
- .x-list > .x-list__item--flex-none {
6136
- flex: none;
6137
- }
6138
- .x-list > .x-list__item--01 {
6139
- flex: 1 12 auto;
6140
- }
6141
- .x-list > .x-list__item--02 {
6142
- flex: 2 11 auto;
6143
- }
6144
- .x-list > .x-list__item--03 {
6145
- flex: 3 10 auto;
6146
- }
6147
- .x-list > .x-list__item--04 {
6148
- flex: 4 9 auto;
6149
- }
6150
- .x-list > .x-list__item--05 {
6151
- flex: 5 8 auto;
6152
- }
6153
- .x-list > .x-list__item--06 {
6154
- flex: 6 7 auto;
6155
- }
6156
- .x-list > .x-list__item--07 {
6157
- flex: 7 6 auto;
5948
+
5949
+ .x-list--gap-.x-list {
5950
+ gap: var(--x-size-gap-list-12);
6158
5951
  }
6159
- .x-list > .x-list__item--08 {
6160
- flex: 8 5 auto;
5952
+ @media not all and (min-resolution: 0.001dpcm) {
5953
+ .x-list--gap-.x-list {
5954
+ gap: 0;
5955
+ }
5956
+ .x-list--gap-.x-list > *:not(:last-child) {
5957
+ margin-bottom: var(--x-size-gap-list-12);
5958
+ }
5959
+ .x-list--gap-.x-list.x-list--horizontal {
5960
+ gap: 0;
5961
+ }
5962
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5963
+ margin-right: var(--x-size-gap-list-12);
5964
+ }
6161
5965
  }
6162
- .x-list > .x-list__item--09 {
6163
- flex: 9 4 auto;
5966
+
5967
+ .x-list--padding-13.x-list {
5968
+ padding: var(--x-size-padding-list-13);
6164
5969
  }
6165
- .x-list > .x-list__item--10 {
6166
- flex: 10 3 auto;
5970
+
5971
+ .x-list--gap-.x-list {
5972
+ gap: var(--x-size-gap-list-13);
6167
5973
  }
6168
- .x-list > .x-list__item--11 {
6169
- flex: 11 2 auto;
5974
+ @media not all and (min-resolution: 0.001dpcm) {
5975
+ .x-list--gap-.x-list {
5976
+ gap: 0;
5977
+ }
5978
+ .x-list--gap-.x-list > *:not(:last-child) {
5979
+ margin-bottom: var(--x-size-gap-list-13);
5980
+ }
5981
+ .x-list--gap-.x-list.x-list--horizontal {
5982
+ gap: 0;
5983
+ }
5984
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
5985
+ margin-right: var(--x-size-gap-list-13);
5986
+ }
6170
5987
  }
6171
- .x-list > .x-list__item--12 {
6172
- flex: 12 1 auto;
5988
+ /* @deprecated */
5989
+ :root {
5990
+ --x-size-padding-list-01: var(--x-size-base-01);
5991
+ --x-size-padding-list-02: var(--x-size-base-02);
5992
+ --x-size-padding-list-03: var(--x-size-base-03);
5993
+ --x-size-padding-list-04: var(--x-size-base-04);
5994
+ --x-size-padding-list-05: var(--x-size-base-05);
5995
+ --x-size-padding-list-06: var(--x-size-base-06);
5996
+ --x-size-padding-list-07: var(--x-size-base-07);
5997
+ --x-size-padding-list-08: var(--x-size-base-08);
5998
+ --x-size-padding-list-09: var(--x-size-base-09);
5999
+ --x-size-padding-list-10: var(--x-size-base-10);
6000
+ --x-size-padding-list-11: var(--x-size-base-11);
6001
+ --x-size-padding-list-12: var(--x-size-base-12);
6002
+ --x-size-padding-list-13: var(--x-size-base-13);
6173
6003
  }
6174
6004
  :root {
6175
- --x-string-flow-list: column nowrap;
6176
- --x-size-padding-list: 0;
6177
- --x-size-gap-list: 0;
6178
- --x-size-justify-list: stretch;
6179
- --x-size-align-list: stretch;
6180
- --x-size-align-list-stretch: stretch;
6005
+ --x-size-gap-list-01: var(--x-size-base-01);
6006
+ --x-size-gap-list-02: var(--x-size-base-02);
6007
+ --x-size-gap-list-03: var(--x-size-base-03);
6008
+ --x-size-gap-list-04: var(--x-size-base-04);
6009
+ --x-size-gap-list-05: var(--x-size-base-05);
6010
+ --x-size-gap-list-06: var(--x-size-base-06);
6011
+ --x-size-gap-list-07: var(--x-size-base-07);
6012
+ --x-size-gap-list-08: var(--x-size-base-08);
6013
+ --x-size-gap-list-09: var(--x-size-base-09);
6014
+ --x-size-gap-list-10: var(--x-size-base-10);
6015
+ --x-size-gap-list-11: var(--x-size-base-11);
6016
+ --x-size-gap-list-12: var(--x-size-base-12);
6017
+ --x-size-gap-list-13: var(--x-size-base-13);
6018
+ --x-size-gap-list-14: var(--x-size-base-14);
6019
+ --x-size-gap-list-15: var(--x-size-base-15);
6020
+ --x-size-gap-list-16: var(--x-size-base-16);
6021
+ --x-size-gap-list-17: var(--x-size-base-17);
6022
+ --x-size-gap-list-18: var(--x-size-base-18);
6023
+ --x-size-gap-list-19: var(--x-size-base-19);
6024
+ --x-size-gap-list-20: var(--x-size-base-20);
6181
6025
  }
6182
6026
  :root {
6183
6027
  --x-size-gap-list-01: var(--x-size-base-01);
@@ -6702,13 +6546,160 @@
6702
6546
  }
6703
6547
  }
6704
6548
  :root {
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);
6549
+ --x-string-flow-list: column nowrap;
6550
+ --x-size-padding-list: 0;
6551
+ --x-size-gap-list: 0;
6552
+ --x-size-justify-list: stretch;
6553
+ --x-size-align-list: stretch;
6554
+ --x-size-align-list-stretch: stretch;
6555
+ }
6556
+
6557
+ .x-list {
6558
+ display: flex;
6559
+ flex-flow: var(--x-string-flow-list);
6560
+ list-style: none;
6561
+ gap: var(--x-size-gap-list);
6562
+ margin: 0;
6563
+ padding: var(--x-size-padding-list);
6564
+ justify-content: var(--x-size-justify-list);
6565
+ align-items: var(--x-size-align-list);
6566
+ min-width: 0;
6567
+ }
6568
+ @media not all and (min-resolution: 0.001dpcm) {
6569
+ .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
6570
+ gap: 0;
6571
+ }
6572
+ .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
6573
+ margin-bottom: var(--x-size-gap-list);
6574
+ }
6575
+ .x-list.x-list--horizontal {
6576
+ gap: 0;
6577
+ }
6578
+ .x-list.x-list--horizontal > *:not(:last-child) {
6579
+ margin-right: var(--x-size-gap-list);
6580
+ }
6581
+ .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
6582
+ gap: 0;
6583
+ }
6584
+ .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
6585
+ margin-right: var(--x-size-gap-list);
6586
+ margin-bottom: var(--x-size-gap-list);
6587
+ }
6588
+ }
6589
+
6590
+ .x-list--vertical.x-list {
6591
+ flex-flow: column nowrap;
6592
+ }
6593
+
6594
+ .x-list--horizontal.x-list {
6595
+ flex-flow: row nowrap;
6596
+ }
6597
+
6598
+ .x-list--wrap.x-list {
6599
+ flex-flow: row wrap;
6600
+ }
6601
+
6602
+ .x-list--wrap-reverse.x-list {
6603
+ flex-flow: row wrap-reverse;
6604
+ }
6605
+
6606
+ .x-list--justify-stretch.x-list {
6607
+ justify-content: stretch;
6608
+ }
6609
+
6610
+ .x-list--justify-center.x-list {
6611
+ justify-content: center;
6612
+ }
6613
+
6614
+ .x-list--justify-end.x-list {
6615
+ justify-content: flex-end;
6616
+ }
6617
+
6618
+ .x-list--justify-start.x-list {
6619
+ justify-content: flex-start;
6620
+ }
6621
+
6622
+ .x-list--align-stretch.x-list {
6623
+ align-items: stretch;
6624
+ }
6625
+
6626
+ .x-list--align-center.x-list {
6627
+ align-items: center;
6628
+ }
6629
+
6630
+ .x-list--align-baseline.x-list {
6631
+ align-items: baseline;
6632
+ }
6633
+
6634
+ .x-list--align-end.x-list {
6635
+ align-items: flex-end;
6636
+ }
6637
+
6638
+ .x-list--align-start.x-list {
6639
+ align-items: flex-start;
6640
+ }
6641
+
6642
+ .x-list > .x-list__item--expand {
6643
+ flex: 1 1 auto;
6644
+ }
6645
+ .x-list > .x-list__item--no-expand {
6646
+ flex: 0 0 auto;
6647
+ }
6648
+ .x-list.x-list--horizontal > .x-list__item--expand {
6649
+ min-width: 0;
6650
+ }
6651
+ .x-list:not(.x-list--horizontal) > .x-list__item--expand {
6652
+ min-height: 0;
6653
+ }
6654
+ .x-list > .x-list__item--stretch {
6655
+ align-self: stretch;
6656
+ }
6657
+ .x-list > .x-list__item--flex-none {
6658
+ flex: none;
6659
+ }
6660
+ .x-list > .x-list__item--01 {
6661
+ flex: 1 12 auto;
6662
+ }
6663
+ .x-list > .x-list__item--02 {
6664
+ flex: 2 11 auto;
6665
+ }
6666
+ .x-list > .x-list__item--03 {
6667
+ flex: 3 10 auto;
6668
+ }
6669
+ .x-list > .x-list__item--04 {
6670
+ flex: 4 9 auto;
6671
+ }
6672
+ .x-list > .x-list__item--05 {
6673
+ flex: 5 8 auto;
6674
+ }
6675
+ .x-list > .x-list__item--06 {
6676
+ flex: 6 7 auto;
6677
+ }
6678
+ .x-list > .x-list__item--07 {
6679
+ flex: 7 6 auto;
6680
+ }
6681
+ .x-list > .x-list__item--08 {
6682
+ flex: 8 5 auto;
6683
+ }
6684
+ .x-list > .x-list__item--09 {
6685
+ flex: 9 4 auto;
6686
+ }
6687
+ .x-list > .x-list__item--10 {
6688
+ flex: 10 3 auto;
6689
+ }
6690
+ .x-list > .x-list__item--11 {
6691
+ flex: 11 2 auto;
6692
+ }
6693
+ .x-list > .x-list__item--12 {
6694
+ flex: 12 1 auto;
6695
+ }
6696
+ :root {
6697
+ --x-string-flow-list: column nowrap;
6698
+ --x-size-padding-list: 0;
6699
+ --x-size-gap-list: 0;
6700
+ --x-size-justify-list: stretch;
6701
+ --x-size-align-list: stretch;
6702
+ --x-size-align-list-stretch: stretch;
6712
6703
  }
6713
6704
  :root {
6714
6705
  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
@@ -6736,6 +6727,15 @@
6736
6727
  --x-size-border-radius-bottom-left-input-group-pill
6737
6728
  );
6738
6729
  }
6730
+ :root {
6731
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6732
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6733
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6734
+ --x-size-border-radius-bottom-right-input-group-pill: var(
6735
+ --x-size-border-radius-input-group-pill
6736
+ );
6737
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6738
+ }
6739
6739
  :root {
6740
6740
  --x-size-padding-left-input-group-line: 0;
6741
6741
  --x-size-padding-right-input-group-line: 0;
@@ -6835,49 +6835,6 @@
6835
6835
  );
6836
6836
  --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6837
6837
  }
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
6838
 
6882
6839
  [dir="ltr"] .x-input-group {
6883
6840
  border-right-width: var(--x-size-border-width-right-input-group-default);
@@ -7012,6 +6969,49 @@
7012
6969
  [dir="rtl"] .x-input-group > .x-input-group__action:last-child {
7013
6970
  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
7014
6971
  }
6972
+ :root {
6973
+ --x-color-background-input-group-default: var(--x-color-background-input-default);
6974
+ --x-color-border-input-group-default: var(--x-color-border-input-default);
6975
+ --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
6976
+ --x-color-text-input-group-default: var(--x-color-text-input-default);
6977
+ --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
6978
+ --x-size-height-input-group-default: var(--x-size-height-input-default);
6979
+ --x-size-gap-input-group-default: var(--x-size-base-03);
6980
+ --x-size-padding-left-input-group-default: var(--x-size-base-06);
6981
+ --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
6982
+ --x-size-padding-input-group-default-action: var(--x-size-base-03);
6983
+ --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
6984
+ --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
6985
+ --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
6986
+ --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
6987
+ --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
6988
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
6989
+ --x-size-border-radius-top-left-input-group-default: var(
6990
+ --x-size-border-radius-input-group-default
6991
+ );
6992
+ --x-size-border-radius-top-right-input-group-default: var(
6993
+ --x-size-border-radius-input-group-default
6994
+ );
6995
+ --x-size-border-radius-bottom-right-input-group-default: var(
6996
+ --x-size-border-radius-input-group-default
6997
+ );
6998
+ --x-size-border-radius-bottom-left-input-group-default: var(
6999
+ --x-size-border-radius-input-group-default
7000
+ );
7001
+ --x-font-family-input-group-default: var(--x-font-family-input-default);
7002
+ --x-size-font-input-group-default: var(--x-size-font-input-default);
7003
+ --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
7004
+ --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
7005
+ --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
7006
+ --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
7007
+ --x-size-line-height-input-group-placeholder-default: var(
7008
+ --x-size-line-height-input-group-default
7009
+ );
7010
+ --x-number-font-weight-input-group-placeholder-default: var(
7011
+ --x-number-font-weight-input-group-default
7012
+ );
7013
+ --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
7014
+ }
7015
7015
  :root {
7016
7016
  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7017
7017
  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
@@ -7279,19 +7279,15 @@
7279
7279
  --x-size-width-icon-xl: var(--x-size-base-07);
7280
7280
  --x-size-height-icon-xl: var(--x-size-base-07);
7281
7281
  }
7282
- :root {
7283
- --x-size-width-icon-s: var(--x-size-base-03);
7284
- --x-size-height-icon-s: var(--x-size-base-03);
7285
- }
7286
- :root {
7287
- --x-size-width-icon-xl: var(--x-size-base-07);
7288
- --x-size-height-icon-xl: var(--x-size-base-07);
7289
- }
7290
7282
 
7291
7283
  .x-icon--xl {
7292
7284
  --x-size-width-icon-default: var(--x-size-width-icon-xl);
7293
7285
  --x-size-height-icon-default: var(--x-size-height-icon-xl);
7294
7286
  }
7287
+ :root {
7288
+ --x-size-width-icon-xl: var(--x-size-base-07);
7289
+ --x-size-height-icon-xl: var(--x-size-base-07);
7290
+ }
7295
7291
  :root {
7296
7292
  --x-size-width-icon-s: var(--x-size-base-03);
7297
7293
  --x-size-height-icon-s: var(--x-size-base-03);
@@ -7302,12 +7298,8 @@
7302
7298
  --x-size-height-icon-default: var(--x-size-height-icon-s);
7303
7299
  }
7304
7300
  :root {
7305
- --x-size-width-icon-m: var(--x-size-base-05);
7306
- --x-size-height-icon-m: var(--x-size-base-05);
7307
- }
7308
- :root {
7309
- --x-size-width-icon-l: var(--x-size-base-06);
7310
- --x-size-height-icon-l: var(--x-size-base-06);
7301
+ --x-size-width-icon-s: var(--x-size-base-03);
7302
+ --x-size-height-icon-s: var(--x-size-base-03);
7311
7303
  }
7312
7304
  :root {
7313
7305
  --x-size-width-icon-m: var(--x-size-base-05);
@@ -7319,13 +7311,12 @@
7319
7311
  --x-size-height-icon-default: var(--x-size-height-icon-m);
7320
7312
  }
7321
7313
  :root {
7322
- --x-color-stroke-icon-default: currentColor;
7323
- --x-color-fill-icon-default: none;
7324
- --x-size-width-icon-default: var(--x-size-width-icon-m);
7325
- --x-size-height-icon-default: var(--x-size-height-icon-m);
7326
- --x-string-stroke-linecap-icon-default: butt;
7327
- --x-string-stroke-linejoin-icon-default: mitter;
7328
- --x-size-stroke-width-icon-default: 1px;
7314
+ --x-size-width-icon-m: var(--x-size-base-05);
7315
+ --x-size-height-icon-m: var(--x-size-base-05);
7316
+ }
7317
+ :root {
7318
+ --x-size-width-icon-l: var(--x-size-base-06);
7319
+ --x-size-height-icon-l: var(--x-size-base-06);
7329
7320
  }
7330
7321
  :root {
7331
7322
  --x-size-width-icon-l: var(--x-size-base-06);
@@ -7345,6 +7336,15 @@
7345
7336
  --x-string-stroke-linejoin-icon-default: mitter;
7346
7337
  --x-size-stroke-width-icon-default: 1px;
7347
7338
  }
7339
+ :root {
7340
+ --x-color-stroke-icon-default: currentColor;
7341
+ --x-color-fill-icon-default: none;
7342
+ --x-size-width-icon-default: var(--x-size-width-icon-m);
7343
+ --x-size-height-icon-default: var(--x-size-height-icon-m);
7344
+ --x-string-stroke-linecap-icon-default: butt;
7345
+ --x-string-stroke-linejoin-icon-default: mitter;
7346
+ --x-size-stroke-width-icon-default: 1px;
7347
+ }
7348
7348
 
7349
7349
  .x-icon {
7350
7350
  stroke: var(--x-color-stroke-icon-default);
@@ -7371,6 +7371,11 @@
7371
7371
  --x-size-gap-grid: var(--x-size-base-03);
7372
7372
  --x-size-min-width-grid-item: 150px;
7373
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
+ }
7374
7379
 
7375
7380
  .x-grid-list {
7376
7381
  margin: 0;
@@ -7392,11 +7397,6 @@
7392
7397
  .x-grid-list--cols-auto .x-grid-list__item {
7393
7398
  min-width: var(--x-size-min-width-grid-item);
7394
7399
  }
7395
- :root {
7396
- --x-size-padding-grid: 0;
7397
- --x-size-gap-grid: var(--x-size-base-03);
7398
- --x-size-min-width-grid-item: 150px;
7399
- }
7400
7400
  :root {
7401
7401
  --x-size-margin-filter-children: 0;
7402
7402
  --x-size-padding-top-filter-children: 0;
@@ -7404,6 +7404,12 @@
7404
7404
  --x-size-padding-bottom-filter-children: 0;
7405
7405
  --x-size-padding-left-filter-children: var(--x-size-base-05);
7406
7406
  }
7407
+ .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7408
+ .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7409
+ .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7410
+ .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7411
+ margin-left: auto;
7412
+ }
7407
7413
  :root {
7408
7414
  --x-size-margin-filter-children: 0;
7409
7415
  --x-size-padding-top-filter-children: 0;
@@ -7436,12 +7442,6 @@
7436
7442
  .x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
7437
7443
  width: 100%;
7438
7444
  }
7439
- .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7440
- .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7441
- .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7442
- .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7443
- margin-left: auto;
7444
- }
7445
7445
  :root {
7446
7446
  --x-color-background-filter-default: transparent;
7447
7447
  --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -7932,6 +7932,13 @@
7932
7932
  :root {
7933
7933
  --x-size-width-dropdown-m: 130px;
7934
7934
  }
7935
+ :root {
7936
+ --x-size-width-dropdown-m: 130px;
7937
+ }
7938
+
7939
+ .x-dropdown.x-dropdown--m {
7940
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
7941
+ }
7935
7942
  :root {
7936
7943
  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7937
7944
  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -7956,13 +7963,6 @@
7956
7963
  --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7957
7964
  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7958
7965
  }
7959
- :root {
7960
- --x-size-width-dropdown-m: 130px;
7961
- }
7962
-
7963
- .x-dropdown.x-dropdown--m {
7964
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
7965
- }
7966
7966
  :root {
7967
7967
  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7968
7968
  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -8029,6 +8029,13 @@
8029
8029
  :root {
8030
8030
  --x-size-width-dropdown-l: 202px;
8031
8031
  }
8032
+ :root {
8033
+ --x-size-width-dropdown-l: 202px;
8034
+ }
8035
+
8036
+ .x-dropdown.x-dropdown--l {
8037
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
8038
+ }
8032
8039
  :root {
8033
8040
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8034
8041
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8102,13 +8109,6 @@
8102
8109
  --x-string-overflow-dropdown-toggle-default: hidden;
8103
8110
  --x-string-overflow-dropdown-list-default: hidden;
8104
8111
  }
8105
- :root {
8106
- --x-size-width-dropdown-l: 202px;
8107
- }
8108
-
8109
- .x-dropdown.x-dropdown--l {
8110
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
8111
- }
8112
8112
  :root {
8113
8113
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8114
8114
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8611,29 +8611,6 @@
8611
8611
  --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
8612
8612
  --x-size-line-height-button-default: var(--x-size-line-height-text);
8613
8613
  }
8614
- :root {
8615
- --x-color-background-button-default: var(--x-color-base-lead);
8616
- --x-color-border-button-default: var(--x-color-background-button-default);
8617
- --x-color-text-button-default: var(--x-color-base-neutral-100);
8618
- --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
8619
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
8620
- --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
8621
- --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
8622
- --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
8623
- --x-size-border-width-button-default: var(--x-size-border-width-base);
8624
- --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
8625
- --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
8626
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
8627
- --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
8628
- --x-size-height-button-default: var(--x-size-base-08);
8629
- --x-size-padding-right-button-default: var(--x-size-base-05);
8630
- --x-size-padding-left-button-default: var(--x-size-base-05);
8631
- --x-size-gap-button-default: var(--x-size-base-03);
8632
- --x-font-family-button-default: var(--x-font-family-text);
8633
- --x-size-font-button-default: var(--x-size-font-text);
8634
- --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
8635
- --x-size-line-height-button-default: var(--x-size-line-height-text);
8636
- }
8637
8614
 
8638
8615
  [dir="ltr"] .x-button {
8639
8616
  padding-right: var(--x-size-padding-right-button-default);
@@ -8697,14 +8674,34 @@
8697
8674
  }
8698
8675
  }
8699
8676
  :root {
8700
- --x-color-background-badge-default: var(--x-color-base-neutral-10);
8701
- --x-color-text-badge-default: var(--x-color-base-neutral-100);
8702
- --x-color-border-badge-default: var(--x-color-base-neutral-10);
8703
- --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8704
- --x-size-border-width-badge-default: 0;
8705
- --x-size-width-badge-default: 1.5em;
8706
- --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8707
- --x-size-font-badge-default: var(--x-size-font-base-xs);
8677
+ --x-color-background-button-default: var(--x-color-base-lead);
8678
+ --x-color-border-button-default: var(--x-color-background-button-default);
8679
+ --x-color-text-button-default: var(--x-color-base-neutral-100);
8680
+ --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
8681
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
8682
+ --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
8683
+ --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
8684
+ --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
8685
+ --x-size-border-width-button-default: var(--x-size-border-width-base);
8686
+ --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
8687
+ --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
8688
+ --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
8689
+ --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
8690
+ --x-size-height-button-default: var(--x-size-base-08);
8691
+ --x-size-padding-right-button-default: var(--x-size-base-05);
8692
+ --x-size-padding-left-button-default: var(--x-size-base-05);
8693
+ --x-size-gap-button-default: var(--x-size-base-03);
8694
+ --x-font-family-button-default: var(--x-font-family-text);
8695
+ --x-size-font-button-default: var(--x-size-font-text);
8696
+ --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
8697
+ --x-size-line-height-button-default: var(--x-size-line-height-text);
8698
+ }
8699
+ :root {
8700
+ --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8701
+ --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8702
+ --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8703
+ --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8704
+ --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8708
8705
  }
8709
8706
  :root {
8710
8707
  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
@@ -8728,13 +8725,6 @@
8728
8725
  --x-size-border-radius-bottom-left-button-card
8729
8726
  );
8730
8727
  }
8731
- :root {
8732
- --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8733
- --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8734
- --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8735
- --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8736
- --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8737
- }
8738
8728
  :root {
8739
8729
  --x-color-background-badge-default: var(--x-color-base-neutral-10);
8740
8730
  --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -8784,6 +8774,16 @@
8784
8774
  .x-badge-container {
8785
8775
  position: relative;
8786
8776
  }
8777
+ :root {
8778
+ --x-color-background-badge-default: var(--x-color-base-neutral-10);
8779
+ --x-color-text-badge-default: var(--x-color-base-neutral-100);
8780
+ --x-color-border-badge-default: var(--x-color-base-neutral-10);
8781
+ --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8782
+ --x-size-border-width-badge-default: 0;
8783
+ --x-size-width-badge-default: 1.5em;
8784
+ --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8785
+ --x-size-font-badge-default: var(--x-size-font-base-xs);
8786
+ }
8787
8787
  :root {
8788
8788
  --x-size-base-01: 2px;
8789
8789
  --x-size-base-02: 4px;