@empathyco/x-components 5.0.0-alpha.35 → 5.0.0-alpha.37

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 (3) hide show
  1. package/CHANGELOG.md +16 -5
  2. package/design-system/deprecated-full-theme.css +538 -538
  3. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [5.0.0-alpha.35](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.34...@empathyco/x-components@5.0.0-alpha.35) (2024-06-07)
6
+ ## [5.0.0-alpha.37](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.34...@empathyco/x-components@5.0.0-alpha.37) (2024-06-10)
7
7
 
8
8
 
9
9
  ### Bug Fixes
@@ -11,13 +11,24 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
11
11
  * **semantic-queries:** cancel track no results query on QueryPreviewUnmounted event (#1507) ([cc6518e](https://github.com/empathyco/x/commit/cc6518efe8e00bf02240ca54e39ef77d05a3139f))
12
12
 
13
13
 
14
+ ### Continuous Integration
14
15
 
15
- ## [5.0.0-alpha.34](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.33...@empathyco/x-components@5.0.0-alpha.34) (2024-06-06)
16
+ * add token to checkout action (#1511) ([c7cd70a](https://github.com/empathyco/x/commit/c7cd70a5b6df5701b5e46b4558b82485bc40f953))
17
+
18
+
19
+
20
+ ## [5.0.0-alpha.36](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.35...@empathyco/x-components@5.0.0-alpha.36) (2024-06-10)
16
21
 
17
22
  **Note:** Version bump only for package @empathyco/x-components
18
23
 
24
+ ## [5.0.0-alpha.35](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.34...@empathyco/x-components@5.0.0-alpha.35) (2024-06-07)
25
+
26
+ **Note:** Version bump only for package @empathyco/x-components
19
27
 
20
28
 
29
+ ## [5.0.0-alpha.34](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.33...@empathyco/x-components@5.0.0-alpha.34) (2024-06-06)
30
+
31
+ **Note:** Version bump only for package @empathyco/x-components
21
32
 
22
33
 
23
34
  ## [5.0.0-alpha.33](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.32...@empathyco/x-components@5.0.0-alpha.33) (2024-06-05)
@@ -281,10 +292,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
281
292
 
282
293
  ### ⚠ BREAKING CHANGES
283
294
 
284
- * **ColumnPickerMixin:** `BaseColumnPickerDropdown` component will no longer emit the `change` event, use `update:modelValue` instead.
295
+ * **ColumnPickerMixin:** `BaseColumnPickerDropdown` component will no longer emit the `change` event, use `update:modelValue` instead.
285
296
  `BaseColumnPickerDropdown` prop for the selected columns was renamed from `value` to `modelValue`.
286
297
 
287
- `BaseColumnPickerList` component will no longer emit the `change` event, use `update:modelValue` instead.
298
+ `BaseColumnPickerList` component will no longer emit the `change` event, use `update:modelValue` instead.
288
299
  `BaseColumnPickerList` prop for the selected columns was renamed from `value` to `modelValue`.
289
300
 
290
301
  `ColumnPickerMixin` has been removed.
@@ -353,7 +364,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
353
364
 
354
365
  ### ⚠ BREAKING CHANGES
355
366
 
356
- * **sort-mixin:** base-dropdown component will no longer emit the `change` event, use `update:modelValue` instead.
367
+ * **sort-mixin:** base-dropdown component will no longer emit the `change` event, use `update:modelValue` instead.
357
368
  base-dropdown prop for the selected item was renamed from `value` to `modelValue`.
358
369
 
359
370
  ### Code Refactoring
package/design-system/deprecated-full-theme.css CHANGED
@@ -1,4 +1,5 @@
1
1
 
2
+
2
3
  .x-uppercase {
3
4
  text-transform: uppercase;
4
5
  }
@@ -52,7 +53,6 @@
52
53
  .x-sticky {
53
54
  position: sticky !important;
54
55
  }
55
-
56
56
  .x-padding--00 {
57
57
  padding: 0 !important;
58
58
  }
@@ -979,15 +979,6 @@
979
979
  .x-line-height--loose {
980
980
  line-height: 2 !important;
981
981
  }
982
- .x-font-weight--light {
983
- font-weight: var(--x-number-font-weight-base-light) !important;
984
- }
985
- .x-font-weight--regular {
986
- font-weight: var(--x-number-font-weight-base-regular) !important;
987
- }
988
- .x-font-weight--bold {
989
- font-weight: var(--x-number-font-weight-base-bold) !important;
990
- }
991
982
  .x-line-clamp--2 {
992
983
  overflow: hidden !important;
993
984
  display: -webkit-box !important;
@@ -1022,48 +1013,14 @@
1022
1013
  -webkit-box-orient: vertical !important;
1023
1014
  -webkit-line-clamp: 6 !important;
1024
1015
  }
1025
- .x-font-color--lead {
1026
- color: var(--x-color-base-lead) !important;
1027
- }
1028
-
1029
- .x-font-color--auxiliary {
1030
- color: var(--x-color-base-auxiliary) !important;
1031
- }
1032
-
1033
- .x-font-color--neutral-10 {
1034
- color: var(--x-color-base-neutral-10) !important;
1035
- }
1036
-
1037
- .x-font-color--neutral-35 {
1038
- color: var(--x-color-base-neutral-35) !important;
1039
- }
1040
-
1041
- .x-font-color--neutral-70 {
1042
- color: var(--x-color-base-neutral-70) !important;
1043
- }
1044
-
1045
- .x-font-color--neutral-95 {
1046
- color: var(--x-color-base-neutral-95) !important;
1047
- }
1048
-
1049
- .x-font-color--neutral-100 {
1050
- color: var(--x-color-base-neutral-100) !important;
1051
- }
1052
-
1053
- .x-font-color--accent {
1054
- color: var(--x-color-base-accent) !important;
1055
- }
1056
-
1057
- .x-font-color--enable {
1058
- color: var(--x-color-base-enable) !important;
1016
+ .x-font-weight--light {
1017
+ font-weight: var(--x-number-font-weight-base-light) !important;
1059
1018
  }
1060
-
1061
- .x-font-color--disable {
1062
- color: var(--x-color-base-disable) !important;
1019
+ .x-font-weight--regular {
1020
+ font-weight: var(--x-number-font-weight-base-regular) !important;
1063
1021
  }
1064
-
1065
- .x-font-color--transparent {
1066
- color: var(--x-color-base-transparent) !important;
1022
+ .x-font-weight--bold {
1023
+ font-weight: var(--x-number-font-weight-base-bold) !important;
1067
1024
  }
1068
1025
  .x-font-size--01 {
1069
1026
  font-size: var(--x-size-base-01) !important;
@@ -1145,6 +1102,49 @@
1145
1102
  font-size: var(--x-size-base-20) !important;
1146
1103
  line-height: 1.5;
1147
1104
  }
1105
+ .x-font-color--lead {
1106
+ color: var(--x-color-base-lead) !important;
1107
+ }
1108
+
1109
+ .x-font-color--auxiliary {
1110
+ color: var(--x-color-base-auxiliary) !important;
1111
+ }
1112
+
1113
+ .x-font-color--neutral-10 {
1114
+ color: var(--x-color-base-neutral-10) !important;
1115
+ }
1116
+
1117
+ .x-font-color--neutral-35 {
1118
+ color: var(--x-color-base-neutral-35) !important;
1119
+ }
1120
+
1121
+ .x-font-color--neutral-70 {
1122
+ color: var(--x-color-base-neutral-70) !important;
1123
+ }
1124
+
1125
+ .x-font-color--neutral-95 {
1126
+ color: var(--x-color-base-neutral-95) !important;
1127
+ }
1128
+
1129
+ .x-font-color--neutral-100 {
1130
+ color: var(--x-color-base-neutral-100) !important;
1131
+ }
1132
+
1133
+ .x-font-color--accent {
1134
+ color: var(--x-color-base-accent) !important;
1135
+ }
1136
+
1137
+ .x-font-color--enable {
1138
+ color: var(--x-color-base-enable) !important;
1139
+ }
1140
+
1141
+ .x-font-color--disable {
1142
+ color: var(--x-color-base-disable) !important;
1143
+ }
1144
+
1145
+ .x-font-color--transparent {
1146
+ color: var(--x-color-base-transparent) !important;
1147
+ }
1148
1148
  .x-flex-1 {
1149
1149
  flex: 1 1 0% !important;
1150
1150
  }
@@ -3390,6 +3390,9 @@
3390
3390
  :root {
3391
3391
  --x-color-text-secondary: var(--x-color-base-neutral-35);
3392
3392
  }
3393
+ .x-text--secondary {
3394
+ --x-color-text-default: var(--x-color-text-secondary);
3395
+ }
3393
3396
  .x-text--light.x-text {
3394
3397
  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3395
3398
  }
@@ -3405,9 +3408,6 @@
3405
3408
  .x-text--light.x-small {
3406
3409
  --x-number-font-weight-small: var(--x-number-font-weight-base-light);
3407
3410
  }
3408
- .x-text--secondary {
3409
- --x-color-text-default: var(--x-color-text-secondary);
3410
- }
3411
3411
  :root {
3412
3412
  --x-font-family-base: "Montserrat", sans-serif;
3413
3413
  --x-size-font-base-xs: 12px;
@@ -3608,6 +3608,36 @@
3608
3608
  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3609
3609
  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3610
3610
  }
3611
+ :root {
3612
+ --x-color-background-tag-ghost: transparent;
3613
+ --x-color-border-tag-ghost: transparent;
3614
+ --x-color-background-tag-selected-ghost: transparent;
3615
+ --x-color-border-tag-selected-ghost: transparent;
3616
+ --x-color-background-tag-curated-ghost: transparent;
3617
+ --x-color-border-tag-curated-ghost: transparent;
3618
+ --x-color-background-tag-curated-selected-ghost: transparent;
3619
+ --x-color-border-tag-curated-selected-ghost: transparent;
3620
+ --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3621
+ --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3622
+ }
3623
+
3624
+ .x-tag--ghost.x-tag,
3625
+ .x-tag--ghost .x-tag {
3626
+ --x-color-background-tag-default: var(--x-color-background-tag-ghost);
3627
+ --x-color-border-tag-default: var(--x-color-border-tag-ghost);
3628
+ --x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
3629
+ --x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
3630
+ --x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
3631
+ --x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
3632
+ --x-color-background-tag-default-curated-selected: var(
3633
+ --x-color-background-tag-curated-selected-ghost
3634
+ );
3635
+ --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
3636
+ --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
3637
+ --x-number-font-weight-tag-default-curated-selected: var(
3638
+ --x-number-font-weight-tag-curated-selected-ghost
3639
+ );
3640
+ }
3611
3641
  :root {
3612
3642
  --x-color-background-tag-default: var(--x-color-base-neutral-100);
3613
3643
  --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -3654,36 +3684,6 @@
3654
3684
  --x-number-font-weight-tag-default-selected
3655
3685
  );
3656
3686
  }
3657
- :root {
3658
- --x-color-background-tag-ghost: transparent;
3659
- --x-color-border-tag-ghost: transparent;
3660
- --x-color-background-tag-selected-ghost: transparent;
3661
- --x-color-border-tag-selected-ghost: transparent;
3662
- --x-color-background-tag-curated-ghost: transparent;
3663
- --x-color-border-tag-curated-ghost: transparent;
3664
- --x-color-background-tag-curated-selected-ghost: transparent;
3665
- --x-color-border-tag-curated-selected-ghost: transparent;
3666
- --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3667
- --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3668
- }
3669
-
3670
- .x-tag--ghost.x-tag,
3671
- .x-tag--ghost .x-tag {
3672
- --x-color-background-tag-default: var(--x-color-background-tag-ghost);
3673
- --x-color-border-tag-default: var(--x-color-border-tag-ghost);
3674
- --x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
3675
- --x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
3676
- --x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
3677
- --x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
3678
- --x-color-background-tag-default-curated-selected: var(
3679
- --x-color-background-tag-curated-selected-ghost
3680
- );
3681
- --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
3682
- --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
3683
- --x-number-font-weight-tag-default-curated-selected: var(
3684
- --x-number-font-weight-tag-curated-selected-ghost
3685
- );
3686
- }
3687
3687
  :root {
3688
3688
  --x-color-background-tag-default: var(--x-color-base-neutral-100);
3689
3689
  --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -3912,6 +3912,24 @@
3912
3912
  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3913
3913
  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3914
3914
  }
3915
+ :root {
3916
+ --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3917
+ --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3918
+ --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3919
+ --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3920
+ --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3921
+ }
3922
+
3923
+ .x-tag--card.x-tag,
3924
+ .x-tag--card .x-tag {
3925
+ --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-card);
3926
+ --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-card);
3927
+ --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-card);
3928
+ --x-size-border-radius-bottom-right-tag-default: var(
3929
+ --x-size-border-radius-bottom-right-tag-card
3930
+ );
3931
+ --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
3932
+ }
3915
3933
  :root {
3916
3934
  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3917
3935
  --x-color-text-suggestion-group-matching-part-default: var(
@@ -3954,65 +3972,253 @@
3954
3972
  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
3955
3973
  }
3956
3974
  :root {
3957
- --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3958
- --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3959
- --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3960
- --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3961
- --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3962
- }
3963
-
3964
- .x-tag--card.x-tag,
3965
- .x-tag--card .x-tag {
3966
- --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-card);
3967
- --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-card);
3968
- --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-card);
3969
- --x-size-border-radius-bottom-right-tag-default: var(
3970
- --x-size-border-radius-bottom-right-tag-card
3971
- );
3972
- --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
3973
- }
3974
- :root {
3975
- --x-string-align-items-suggestion-default: center;
3976
- --x-color-text-suggestion-default: var(--x-color-text-default);
3977
- --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
3978
- --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
3979
- --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
3980
- --x-color-background-suggestion-default: transparent;
3981
- --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
3982
- --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
3983
- --x-color-text-suggestion-matching-part-default-curated: var(
3975
+ --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3976
+ --x-color-text-suggestion-group-matching-part-default: var(
3984
3977
  --x-color-text-suggestion-matching-part-default
3985
3978
  );
3986
- --x-color-text-suggestion-default-matching-curated: var(
3987
- --x-color-text-suggestion-default-matching
3979
+ --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
3980
+ --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
3981
+ --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
3982
+ --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
3983
+ --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
3984
+ --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
3985
+ --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
3986
+ --x-size-border-width-suggestion-group-default: 0;
3987
+ --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
3988
+ --x-size-border-width-right-suggestion-group-default: var(
3989
+ --x-size-border-width-suggestion-default
3988
3990
  );
3989
- --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
3990
- --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
3991
- --x-size-padding-top-suggestion-default: var(--x-size-base-01);
3992
- --x-size-padding-right-suggestion-default: 0;
3993
- --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
3994
- --x-size-padding-left-suggestion-default: 0;
3995
- --x-size-gap-suggestion-default: var(--x-size-base-03);
3996
- --x-size-border-width-suggestion-default: 0;
3997
- --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
3998
- --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
3999
- --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
4000
- --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
4001
- --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
4002
- --x-size-border-radius-top-left-suggestion-default: var(
3991
+ --x-size-border-width-bottom-suggestion-group-default: var(
3992
+ --x-size-border-width-suggestion-default
3993
+ );
3994
+ --x-size-border-width-left-suggestion-group-default: var(
3995
+ --x-size-border-width-suggestion-default
3996
+ );
3997
+ --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
3998
+ --x-size-border-radius-top-left-suggestion-group-default: var(
4003
3999
  --x-size-border-radius-suggestion-default
4004
4000
  );
4005
- --x-size-border-radius-top-right-suggestion-default: var(
4001
+ --x-size-border-radius-top-right-suggestion-group-default: var(
4006
4002
  --x-size-border-radius-suggestion-default
4007
4003
  );
4008
- --x-size-border-radius-bottom-right-suggestion-default: var(
4004
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(
4009
4005
  --x-size-border-radius-suggestion-default
4010
4006
  );
4011
- --x-size-border-radius-bottom-left-suggestion-default: var(
4007
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(
4012
4008
  --x-size-border-radius-suggestion-default
4013
4009
  );
4014
- --x-font-family-suggestion-default: var(--x-font-family-text);
4015
- --x-size-font-suggestion-default: var(--x-size-font-text);
4010
+ --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
4011
+ --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
4012
+ --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
4013
+ --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
4014
+ }
4015
+
4016
+ [dir="ltr"] .x-suggestion-group {
4017
+ padding-left: var(--x-size-padding-left-suggestion-group-default);
4018
+ }
4019
+
4020
+ [dir="rtl"] .x-suggestion-group {
4021
+ padding-right: var(--x-size-padding-left-suggestion-group-default);
4022
+ }
4023
+
4024
+ [dir="ltr"] .x-suggestion-group {
4025
+ padding-right: var(--x-size-padding-right-suggestion-group-default);
4026
+ }
4027
+
4028
+ [dir="rtl"] .x-suggestion-group {
4029
+ padding-left: var(--x-size-padding-right-suggestion-group-default);
4030
+ }
4031
+
4032
+ [dir="ltr"] .x-suggestion-group {
4033
+ border-left-width: var(--x-size-border-width-left-suggestion-group-default);
4034
+ }
4035
+
4036
+ [dir="rtl"] .x-suggestion-group {
4037
+ border-right-width: var(--x-size-border-width-left-suggestion-group-default);
4038
+ }
4039
+
4040
+ [dir="ltr"] .x-suggestion-group {
4041
+ border-right-width: var(--x-size-border-width-right-suggestion-group-default);
4042
+ }
4043
+
4044
+ [dir="rtl"] .x-suggestion-group {
4045
+ border-left-width: var(--x-size-border-width-right-suggestion-group-default);
4046
+ }
4047
+
4048
+ .x-suggestion-group {
4049
+ display: flex;
4050
+ flex-flow: row nowrap;
4051
+ box-sizing: border-box;
4052
+ background-color: var(--x-color-background-suggestion-group-default);
4053
+ color: var(--x-color-text-suggestion-group-default);
4054
+ border-color: var(--x-color-border-suggestion-group-default);
4055
+ font-family: var(--x-font-family-suggestion-group-default);
4056
+ font-size: var(--x-size-font-suggestion-group-default);
4057
+ line-height: var(--x-size-line-height-suggestion-group-default);
4058
+ font-weight: var(--x-number-font-weight-suggestion-group-default);
4059
+ cursor: pointer;
4060
+ padding-top: var(--x-size-padding-top-suggestion-group-default);
4061
+ padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
4062
+ gap: var(--x-size-gap-suggestion-group-default);
4063
+ border-style: solid;
4064
+ border-top-width: var(--x-size-border-width-top-suggestion-group-default);
4065
+ border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
4066
+ border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
4067
+ }
4068
+ @media not all and (min-resolution: 0.001dpcm) {
4069
+ .x-suggestion-group {
4070
+ gap: 0;
4071
+ }
4072
+ .x-suggestion-group > *:not(:last-child) {
4073
+ margin-right: var(--x-size-gap-suggestion-group-default);
4074
+ }
4075
+ }
4076
+ .x-suggestion-group .x-suggestion {
4077
+ padding: 0;
4078
+ flex: 1 1 auto;
4079
+ border: none;
4080
+ }
4081
+ .x-suggestion-group .x-button {
4082
+ --x-color-background-button-default: transparent;
4083
+ --x-color-border-button-default: transparent;
4084
+ --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
4085
+ --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
4086
+ --x-size-padding-right-button-default: 0;
4087
+ --x-size-padding-left-button-default: 0;
4088
+ border: none;
4089
+ }
4090
+ :root {
4091
+ --x-string-align-items-suggestion-default: center;
4092
+ --x-color-text-suggestion-default: var(--x-color-text-default);
4093
+ --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
4094
+ --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
4095
+ --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
4096
+ --x-color-background-suggestion-default: transparent;
4097
+ --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
4098
+ --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
4099
+ --x-color-text-suggestion-matching-part-default-curated: var(
4100
+ --x-color-text-suggestion-matching-part-default
4101
+ );
4102
+ --x-color-text-suggestion-default-matching-curated: var(
4103
+ --x-color-text-suggestion-default-matching
4104
+ );
4105
+ --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
4106
+ --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
4107
+ --x-size-padding-top-suggestion-default: var(--x-size-base-01);
4108
+ --x-size-padding-right-suggestion-default: 0;
4109
+ --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
4110
+ --x-size-padding-left-suggestion-default: 0;
4111
+ --x-size-gap-suggestion-default: var(--x-size-base-03);
4112
+ --x-size-border-width-suggestion-default: 0;
4113
+ --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
4114
+ --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
4115
+ --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
4116
+ --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
4117
+ --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
4118
+ --x-size-border-radius-top-left-suggestion-default: var(
4119
+ --x-size-border-radius-suggestion-default
4120
+ );
4121
+ --x-size-border-radius-top-right-suggestion-default: var(
4122
+ --x-size-border-radius-suggestion-default
4123
+ );
4124
+ --x-size-border-radius-bottom-right-suggestion-default: var(
4125
+ --x-size-border-radius-suggestion-default
4126
+ );
4127
+ --x-size-border-radius-bottom-left-suggestion-default: var(
4128
+ --x-size-border-radius-suggestion-default
4129
+ );
4130
+ --x-font-family-suggestion-default: var(--x-font-family-text);
4131
+ --x-size-font-suggestion-default: var(--x-size-font-text);
4132
+ --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
4133
+ --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
4134
+ --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
4135
+ --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
4136
+ --x-size-line-height-suggestion-matching-part-default: var(
4137
+ --x-size-line-height-suggestion-default
4138
+ );
4139
+ --x-number-font-weight-suggestion-matching-part-default: var(
4140
+ --x-number-font-weight-suggestion-default
4141
+ );
4142
+ --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
4143
+ --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
4144
+ --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
4145
+ --x-number-font-weight-suggestion-default-matching: var(
4146
+ --x-number-font-weight-suggestion-default
4147
+ );
4148
+ --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
4149
+ --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
4150
+ --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
4151
+ --x-number-font-weight-suggestion-filter-default: var(--x-number-font-weight-suggestion-default);
4152
+ --x-text-transform-suggestion-filter-default: none;
4153
+ --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
4154
+ --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
4155
+ --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
4156
+ --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
4157
+ --x-font-family-suggestion-matching-part-default-curated: var(
4158
+ --x-font-family-suggestion-matching-part-default
4159
+ );
4160
+ --x-size-font-suggestion-matching-part-default-curated: var(
4161
+ --x-size-font-suggestion-matching-part-default
4162
+ );
4163
+ --x-size-line-height-suggestion-matching-part-default-curated: var(
4164
+ --x-size-line-height-suggestion-matching-part-default
4165
+ );
4166
+ --x-number-font-weight-suggestion-matching-part-default-curated: var(
4167
+ --x-number-font-weight-suggestion-matching-part-default
4168
+ );
4169
+ --x-font-family-suggestion-default-matching-curated: var(
4170
+ --x-font-family-suggestion-default-matching
4171
+ );
4172
+ --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
4173
+ --x-size-line-height-suggestion-default-matching-curated: var(
4174
+ --x-size-line-height-suggestion-default-matching
4175
+ );
4176
+ --x-number-font-weight-suggestion-default-matching-curated: var(
4177
+ --x-number-font-weight-suggestion-default-matching
4178
+ );
4179
+ }
4180
+ :root {
4181
+ --x-string-align-items-suggestion-default: center;
4182
+ --x-color-text-suggestion-default: var(--x-color-text-default);
4183
+ --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
4184
+ --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
4185
+ --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
4186
+ --x-color-background-suggestion-default: transparent;
4187
+ --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
4188
+ --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
4189
+ --x-color-text-suggestion-matching-part-default-curated: var(
4190
+ --x-color-text-suggestion-matching-part-default
4191
+ );
4192
+ --x-color-text-suggestion-default-matching-curated: var(
4193
+ --x-color-text-suggestion-default-matching
4194
+ );
4195
+ --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
4196
+ --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
4197
+ --x-size-padding-top-suggestion-default: var(--x-size-base-01);
4198
+ --x-size-padding-right-suggestion-default: 0;
4199
+ --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
4200
+ --x-size-padding-left-suggestion-default: 0;
4201
+ --x-size-gap-suggestion-default: var(--x-size-base-03);
4202
+ --x-size-border-width-suggestion-default: 0;
4203
+ --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
4204
+ --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
4205
+ --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
4206
+ --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
4207
+ --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
4208
+ --x-size-border-radius-top-left-suggestion-default: var(
4209
+ --x-size-border-radius-suggestion-default
4210
+ );
4211
+ --x-size-border-radius-top-right-suggestion-default: var(
4212
+ --x-size-border-radius-suggestion-default
4213
+ );
4214
+ --x-size-border-radius-bottom-right-suggestion-default: var(
4215
+ --x-size-border-radius-suggestion-default
4216
+ );
4217
+ --x-size-border-radius-bottom-left-suggestion-default: var(
4218
+ --x-size-border-radius-suggestion-default
4219
+ );
4220
+ --x-font-family-suggestion-default: var(--x-font-family-text);
4221
+ --x-size-font-suggestion-default: var(--x-size-font-text);
4016
4222
  --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
4017
4223
  --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
4018
4224
  --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
@@ -4044,21 +4250,153 @@
4044
4250
  --x-size-font-suggestion-matching-part-default-curated: var(
4045
4251
  --x-size-font-suggestion-matching-part-default
4046
4252
  );
4047
- --x-size-line-height-suggestion-matching-part-default-curated: var(
4048
- --x-size-line-height-suggestion-matching-part-default
4253
+ --x-size-line-height-suggestion-matching-part-default-curated: var(
4254
+ --x-size-line-height-suggestion-matching-part-default
4255
+ );
4256
+ --x-number-font-weight-suggestion-matching-part-default-curated: var(
4257
+ --x-number-font-weight-suggestion-matching-part-default
4258
+ );
4259
+ --x-font-family-suggestion-default-matching-curated: var(
4260
+ --x-font-family-suggestion-default-matching
4261
+ );
4262
+ --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
4263
+ --x-size-line-height-suggestion-default-matching-curated: var(
4264
+ --x-size-line-height-suggestion-default-matching
4265
+ );
4266
+ --x-number-font-weight-suggestion-default-matching-curated: var(
4267
+ --x-number-font-weight-suggestion-default-matching
4268
+ );
4269
+ }
4270
+
4271
+ [dir="ltr"] .x-suggestion {
4272
+ text-align: left;
4273
+ }
4274
+
4275
+ [dir="rtl"] .x-suggestion {
4276
+ text-align: right;
4277
+ }
4278
+
4279
+ [dir="ltr"] .x-suggestion {
4280
+ padding-left: var(--x-size-padding-left-suggestion-default);
4281
+ }
4282
+
4283
+ [dir="rtl"] .x-suggestion {
4284
+ padding-right: var(--x-size-padding-left-suggestion-default);
4285
+ }
4286
+
4287
+ [dir="ltr"] .x-suggestion {
4288
+ padding-right: var(--x-size-padding-right-suggestion-default);
4289
+ }
4290
+
4291
+ [dir="rtl"] .x-suggestion {
4292
+ padding-left: var(--x-size-padding-right-suggestion-default);
4293
+ }
4294
+
4295
+ [dir="ltr"] .x-suggestion {
4296
+ border-left-width: var(--x-size-border-width-left-suggestion-default);
4297
+ }
4298
+
4299
+ [dir="rtl"] .x-suggestion {
4300
+ border-right-width: var(--x-size-border-width-left-suggestion-default);
4301
+ }
4302
+
4303
+ [dir="ltr"] .x-suggestion {
4304
+ border-right-width: var(--x-size-border-width-right-suggestion-default);
4305
+ }
4306
+
4307
+ [dir="rtl"] .x-suggestion {
4308
+ border-left-width: var(--x-size-border-width-right-suggestion-default);
4309
+ }
4310
+
4311
+ .x-suggestion {
4312
+ display: flex;
4313
+ flex-flow: row nowrap;
4314
+ box-sizing: border-box;
4315
+ align-items: var(--x-string-align-items-suggestion-default);
4316
+ background-color: var(--x-color-background-suggestion-default);
4317
+ color: var(--x-color-text-suggestion-default);
4318
+ border-color: var(--x-color-border-suggestion-default);
4319
+ font-family: var(--x-font-family-suggestion-default);
4320
+ font-size: var(--x-size-font-suggestion-default);
4321
+ line-height: var(--x-size-line-height-suggestion-default);
4322
+ font-weight: var(--x-number-font-weight-suggestion-default);
4323
+ cursor: pointer;
4324
+ padding-top: var(--x-size-padding-top-suggestion-default);
4325
+ padding-bottom: var(--x-size-padding-bottom-suggestion-default);
4326
+ gap: var(--x-size-gap-suggestion-default);
4327
+ border-style: solid;
4328
+ border-top-width: var(--x-size-border-width-top-suggestion-default);
4329
+ border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
4330
+ border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default);
4331
+ }
4332
+ @media not all and (min-resolution: 0.001dpcm) {
4333
+ .x-suggestion {
4334
+ gap: 0;
4335
+ }
4336
+ .x-suggestion > *:not(:last-child) {
4337
+ margin-right: var(--x-size-gap-suggestion-default);
4338
+ }
4339
+ }
4340
+ .x-suggestion__matching-part,
4341
+ .x-suggestion .x-identifier-result__matching-part {
4342
+ font-family: var(--x-font-family-suggestion-matching-part-default);
4343
+ font-size: var(--x-size-font-suggestion-matching-part-default);
4344
+ line-height: var(--x-size-line-height-suggestion-matching-part-default);
4345
+ font-weight: var(--x-number-font-weight-suggestion-matching-part-default);
4346
+ color: var(--x-color-text-suggestion-matching-part-default);
4347
+ }
4348
+ .x-suggestion__filter {
4349
+ font-family: var(--x-font-family-suggestion-filter-default);
4350
+ font-size: var(--x-size-font-suggestion-filter-default);
4351
+ line-height: var(--x-size-line-height-suggestion-filter-default);
4352
+ font-weight: var(--x-number-font-weight-suggestion-filter-default);
4353
+ text-transform: var(--x-text-transform-suggestion-filter-default);
4354
+ color: var(--x-color-text-suggestion-filter-default);
4355
+ }
4356
+ .x-suggestion--matching {
4357
+ --x-font-family-suggestion-default: var(--x-font-family-suggestion-default-matching);
4358
+ --x-size-font-suggestion-default: var(--x-size-font-suggestion-default-matching);
4359
+ --x-size-line-height-suggestion-default: var(--x-size-line-height-suggestion-default-matching);
4360
+ --x-number-font-weight-suggestion-default: var(
4361
+ --x-number-font-weight-suggestion-default-matching
4362
+ );
4363
+ --x-color-text-suggestion-default: var(--x-color-text-suggestion-default-matching);
4364
+ }
4365
+ .x-suggestion > .x-identifier-result {
4366
+ flex: none;
4367
+ }
4368
+ .x-suggestion.x-suggestion.x-suggestion--is-curated {
4369
+ background-color: var(--x-color-background-suggestion-default-curated);
4370
+ color: var(--x-color-text-suggestion-default-curated);
4371
+ border-color: var(--x-color-border-suggestion-default-curated);
4372
+ font-family: var(--x-font-family-suggestion-default-curated);
4373
+ font-size: var(--x-size-font-suggestion-default-curated);
4374
+ line-height: var(--x-size-line-height-suggestion-default-curated);
4375
+ font-weight: var(--x-number-font-weight-suggestion-default-curated);
4376
+ }
4377
+ .x-suggestion.x-suggestion.x-suggestion--is-curated .x-suggestion__matching-part,
4378
+ .x-suggestion.x-suggestion.x-suggestion--is-curated .x-identifier-result__matching-part {
4379
+ font-family: var(--x-font-family-suggestion-matching-part-default-curated);
4380
+ font-size: var(--x-size-font-suggestion-matching-part-default-curated);
4381
+ line-height: var(--x-size-line-height-suggestion-matching-part-default-curated);
4382
+ font-weight: var(--x-number-font-weight-suggestion-matching-part-default-curated);
4383
+ color: var(--x-color-text-suggestion-matching-part-default-curated);
4384
+ }
4385
+ .x-suggestion.x-suggestion.x-suggestion--is-curated.x-suggestion--matching {
4386
+ --x-font-family-suggestion-default-curated: var(
4387
+ --x-font-family-suggestion-default-matching-curated
4049
4388
  );
4050
- --x-number-font-weight-suggestion-matching-part-default-curated: var(
4051
- --x-number-font-weight-suggestion-matching-part-default
4389
+ --x-size-font-suggestion-default-curated: var(
4390
+ --x-size-font-suggestion-default-matching-curated
4052
4391
  );
4053
- --x-font-family-suggestion-default-matching-curated: var(
4054
- --x-font-family-suggestion-default-matching
4392
+ --x-size-line-height-suggestion-default-curated: var(
4393
+ --x-size-line-height-suggestion-default-matching-curated
4055
4394
  );
4056
- --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
4057
- --x-size-line-height-suggestion-default-matching-curated: var(
4058
- --x-size-line-height-suggestion-default-matching
4395
+ --x-number-font-weight-suggestion-default-curated: var(
4396
+ --x-number-font-weight-suggestion-default-matching-curated
4059
4397
  );
4060
- --x-number-font-weight-suggestion-default-matching-curated: var(
4061
- --x-number-font-weight-suggestion-default-matching
4398
+ --x-color-text-suggestion-default-curated: var(
4399
+ --x-color-text-suggestion-default-matching-curated
4062
4400
  );
4063
4401
  }
4064
4402
  :root {
@@ -5288,278 +5626,56 @@
5288
5626
 
5289
5627
  [dir="rtl"] .x-message {
5290
5628
  border-left-width: var(--x-size-border-width-right-message-default);
5291
- }
5292
-
5293
- .x-message {
5294
- display: flex;
5295
- flex-flow: column nowrap;
5296
- justify-content: var(--x-string-justify-message-default);
5297
- align-items: center;
5298
- box-sizing: border-box;
5299
- gap: var(--x-size-gap-message-default);
5300
- padding: var(--x-size-padding-message-default);
5301
- background-color: var(--x-color-background-message-default);
5302
- border-color: var(--x-color-border-message-default);
5303
- border-style: solid;
5304
- border-top-width: var(--x-size-border-width-top-message-default);
5305
- border-bottom-width: var(--x-size-border-width-bottom-message-default);
5306
- border-radius: var(--x-size-border-radius-top-left-message-default) var(--x-size-border-radius-top-right-message-default) var(--x-size-border-radius-bottom-right-message-default) var(--x-size-border-radius-bottom-left-message-default);
5307
- font-family: var(--x-font-family-message-default);
5308
- font-size: var(--x-size-font-message-default);
5309
- font-weight: var(--x-number-font-weight-message-default);
5310
- }
5311
- @media not all and (min-resolution: 0.001dpcm) {
5312
- .x-message {
5313
- gap: 0;
5314
- }
5315
- .x-message > *:not(:last-child) {
5316
- margin-right: var(--x-size-gap-message-default);
5317
- }
5318
- }
5319
- .x-message,
5320
- .x-message > a {
5321
- color: var(--x-color-text-message-default);
5322
- }
5323
- .x-message > p {
5324
- margin: 0;
5325
- }
5326
- /* @deprecated */
5327
- :root {
5328
- --x-size-padding-list-01: var(--x-size-base-01);
5329
- --x-size-padding-list-02: var(--x-size-base-02);
5330
- --x-size-padding-list-03: var(--x-size-base-03);
5331
- --x-size-padding-list-04: var(--x-size-base-04);
5332
- --x-size-padding-list-05: var(--x-size-base-05);
5333
- --x-size-padding-list-06: var(--x-size-base-06);
5334
- --x-size-padding-list-07: var(--x-size-base-07);
5335
- --x-size-padding-list-08: var(--x-size-base-08);
5336
- --x-size-padding-list-09: var(--x-size-base-09);
5337
- --x-size-padding-list-10: var(--x-size-base-10);
5338
- --x-size-padding-list-11: var(--x-size-base-11);
5339
- --x-size-padding-list-12: var(--x-size-base-12);
5340
- --x-size-padding-list-13: var(--x-size-base-13);
5341
- }
5342
- :root {
5343
- --x-string-align-items-suggestion-default: center;
5344
- --x-color-text-suggestion-default: var(--x-color-text-default);
5345
- --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
5346
- --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
5347
- --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
5348
- --x-color-background-suggestion-default: transparent;
5349
- --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
5350
- --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
5351
- --x-color-text-suggestion-matching-part-default-curated: var(
5352
- --x-color-text-suggestion-matching-part-default
5353
- );
5354
- --x-color-text-suggestion-default-matching-curated: var(
5355
- --x-color-text-suggestion-default-matching
5356
- );
5357
- --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
5358
- --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
5359
- --x-size-padding-top-suggestion-default: var(--x-size-base-01);
5360
- --x-size-padding-right-suggestion-default: 0;
5361
- --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
5362
- --x-size-padding-left-suggestion-default: 0;
5363
- --x-size-gap-suggestion-default: var(--x-size-base-03);
5364
- --x-size-border-width-suggestion-default: 0;
5365
- --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
5366
- --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
5367
- --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
5368
- --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
5369
- --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
5370
- --x-size-border-radius-top-left-suggestion-default: var(
5371
- --x-size-border-radius-suggestion-default
5372
- );
5373
- --x-size-border-radius-top-right-suggestion-default: var(
5374
- --x-size-border-radius-suggestion-default
5375
- );
5376
- --x-size-border-radius-bottom-right-suggestion-default: var(
5377
- --x-size-border-radius-suggestion-default
5378
- );
5379
- --x-size-border-radius-bottom-left-suggestion-default: var(
5380
- --x-size-border-radius-suggestion-default
5381
- );
5382
- --x-font-family-suggestion-default: var(--x-font-family-text);
5383
- --x-size-font-suggestion-default: var(--x-size-font-text);
5384
- --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
5385
- --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
5386
- --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
5387
- --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
5388
- --x-size-line-height-suggestion-matching-part-default: var(
5389
- --x-size-line-height-suggestion-default
5390
- );
5391
- --x-number-font-weight-suggestion-matching-part-default: var(
5392
- --x-number-font-weight-suggestion-default
5393
- );
5394
- --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
5395
- --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
5396
- --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
5397
- --x-number-font-weight-suggestion-default-matching: var(
5398
- --x-number-font-weight-suggestion-default
5399
- );
5400
- --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
5401
- --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
5402
- --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
5403
- --x-number-font-weight-suggestion-filter-default: var(--x-number-font-weight-suggestion-default);
5404
- --x-text-transform-suggestion-filter-default: none;
5405
- --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
5406
- --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
5407
- --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
5408
- --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
5409
- --x-font-family-suggestion-matching-part-default-curated: var(
5410
- --x-font-family-suggestion-matching-part-default
5411
- );
5412
- --x-size-font-suggestion-matching-part-default-curated: var(
5413
- --x-size-font-suggestion-matching-part-default
5414
- );
5415
- --x-size-line-height-suggestion-matching-part-default-curated: var(
5416
- --x-size-line-height-suggestion-matching-part-default
5417
- );
5418
- --x-number-font-weight-suggestion-matching-part-default-curated: var(
5419
- --x-number-font-weight-suggestion-matching-part-default
5420
- );
5421
- --x-font-family-suggestion-default-matching-curated: var(
5422
- --x-font-family-suggestion-default-matching
5423
- );
5424
- --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
5425
- --x-size-line-height-suggestion-default-matching-curated: var(
5426
- --x-size-line-height-suggestion-default-matching
5427
- );
5428
- --x-number-font-weight-suggestion-default-matching-curated: var(
5429
- --x-number-font-weight-suggestion-default-matching
5430
- );
5431
- }
5432
-
5433
- [dir="ltr"] .x-suggestion {
5434
- text-align: left;
5435
- }
5436
-
5437
- [dir="rtl"] .x-suggestion {
5438
- text-align: right;
5439
- }
5440
-
5441
- [dir="ltr"] .x-suggestion {
5442
- padding-left: var(--x-size-padding-left-suggestion-default);
5443
- }
5444
-
5445
- [dir="rtl"] .x-suggestion {
5446
- padding-right: var(--x-size-padding-left-suggestion-default);
5447
- }
5448
-
5449
- [dir="ltr"] .x-suggestion {
5450
- padding-right: var(--x-size-padding-right-suggestion-default);
5451
- }
5452
-
5453
- [dir="rtl"] .x-suggestion {
5454
- padding-left: var(--x-size-padding-right-suggestion-default);
5455
- }
5456
-
5457
- [dir="ltr"] .x-suggestion {
5458
- border-left-width: var(--x-size-border-width-left-suggestion-default);
5459
- }
5460
-
5461
- [dir="rtl"] .x-suggestion {
5462
- border-right-width: var(--x-size-border-width-left-suggestion-default);
5463
- }
5464
-
5465
- [dir="ltr"] .x-suggestion {
5466
- border-right-width: var(--x-size-border-width-right-suggestion-default);
5467
- }
5468
-
5469
- [dir="rtl"] .x-suggestion {
5470
- border-left-width: var(--x-size-border-width-right-suggestion-default);
5471
- }
5472
-
5473
- .x-suggestion {
5474
- display: flex;
5475
- flex-flow: row nowrap;
5476
- box-sizing: border-box;
5477
- align-items: var(--x-string-align-items-suggestion-default);
5478
- background-color: var(--x-color-background-suggestion-default);
5479
- color: var(--x-color-text-suggestion-default);
5480
- border-color: var(--x-color-border-suggestion-default);
5481
- font-family: var(--x-font-family-suggestion-default);
5482
- font-size: var(--x-size-font-suggestion-default);
5483
- line-height: var(--x-size-line-height-suggestion-default);
5484
- font-weight: var(--x-number-font-weight-suggestion-default);
5485
- cursor: pointer;
5486
- padding-top: var(--x-size-padding-top-suggestion-default);
5487
- padding-bottom: var(--x-size-padding-bottom-suggestion-default);
5488
- gap: var(--x-size-gap-suggestion-default);
5629
+ }
5630
+
5631
+ .x-message {
5632
+ display: flex;
5633
+ flex-flow: column nowrap;
5634
+ justify-content: var(--x-string-justify-message-default);
5635
+ align-items: center;
5636
+ box-sizing: border-box;
5637
+ gap: var(--x-size-gap-message-default);
5638
+ padding: var(--x-size-padding-message-default);
5639
+ background-color: var(--x-color-background-message-default);
5640
+ border-color: var(--x-color-border-message-default);
5489
5641
  border-style: solid;
5490
- border-top-width: var(--x-size-border-width-top-suggestion-default);
5491
- border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
5492
- border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default);
5642
+ border-top-width: var(--x-size-border-width-top-message-default);
5643
+ border-bottom-width: var(--x-size-border-width-bottom-message-default);
5644
+ border-radius: var(--x-size-border-radius-top-left-message-default) var(--x-size-border-radius-top-right-message-default) var(--x-size-border-radius-bottom-right-message-default) var(--x-size-border-radius-bottom-left-message-default);
5645
+ font-family: var(--x-font-family-message-default);
5646
+ font-size: var(--x-size-font-message-default);
5647
+ font-weight: var(--x-number-font-weight-message-default);
5493
5648
  }
5494
5649
  @media not all and (min-resolution: 0.001dpcm) {
5495
- .x-suggestion {
5650
+ .x-message {
5496
5651
  gap: 0;
5497
5652
  }
5498
- .x-suggestion > *:not(:last-child) {
5499
- margin-right: var(--x-size-gap-suggestion-default);
5653
+ .x-message > *:not(:last-child) {
5654
+ margin-right: var(--x-size-gap-message-default);
5500
5655
  }
5501
5656
  }
5502
- .x-suggestion__matching-part,
5503
- .x-suggestion .x-identifier-result__matching-part {
5504
- font-family: var(--x-font-family-suggestion-matching-part-default);
5505
- font-size: var(--x-size-font-suggestion-matching-part-default);
5506
- line-height: var(--x-size-line-height-suggestion-matching-part-default);
5507
- font-weight: var(--x-number-font-weight-suggestion-matching-part-default);
5508
- color: var(--x-color-text-suggestion-matching-part-default);
5509
- }
5510
- .x-suggestion__filter {
5511
- font-family: var(--x-font-family-suggestion-filter-default);
5512
- font-size: var(--x-size-font-suggestion-filter-default);
5513
- line-height: var(--x-size-line-height-suggestion-filter-default);
5514
- font-weight: var(--x-number-font-weight-suggestion-filter-default);
5515
- text-transform: var(--x-text-transform-suggestion-filter-default);
5516
- color: var(--x-color-text-suggestion-filter-default);
5517
- }
5518
- .x-suggestion--matching {
5519
- --x-font-family-suggestion-default: var(--x-font-family-suggestion-default-matching);
5520
- --x-size-font-suggestion-default: var(--x-size-font-suggestion-default-matching);
5521
- --x-size-line-height-suggestion-default: var(--x-size-line-height-suggestion-default-matching);
5522
- --x-number-font-weight-suggestion-default: var(
5523
- --x-number-font-weight-suggestion-default-matching
5524
- );
5525
- --x-color-text-suggestion-default: var(--x-color-text-suggestion-default-matching);
5526
- }
5527
- .x-suggestion > .x-identifier-result {
5528
- flex: none;
5529
- }
5530
- .x-suggestion.x-suggestion.x-suggestion--is-curated {
5531
- background-color: var(--x-color-background-suggestion-default-curated);
5532
- color: var(--x-color-text-suggestion-default-curated);
5533
- border-color: var(--x-color-border-suggestion-default-curated);
5534
- font-family: var(--x-font-family-suggestion-default-curated);
5535
- font-size: var(--x-size-font-suggestion-default-curated);
5536
- line-height: var(--x-size-line-height-suggestion-default-curated);
5537
- font-weight: var(--x-number-font-weight-suggestion-default-curated);
5657
+ .x-message,
5658
+ .x-message > a {
5659
+ color: var(--x-color-text-message-default);
5538
5660
  }
5539
- .x-suggestion.x-suggestion.x-suggestion--is-curated .x-suggestion__matching-part,
5540
- .x-suggestion.x-suggestion.x-suggestion--is-curated .x-identifier-result__matching-part {
5541
- font-family: var(--x-font-family-suggestion-matching-part-default-curated);
5542
- font-size: var(--x-size-font-suggestion-matching-part-default-curated);
5543
- line-height: var(--x-size-line-height-suggestion-matching-part-default-curated);
5544
- font-weight: var(--x-number-font-weight-suggestion-matching-part-default-curated);
5545
- color: var(--x-color-text-suggestion-matching-part-default-curated);
5661
+ .x-message > p {
5662
+ margin: 0;
5546
5663
  }
5547
- .x-suggestion.x-suggestion.x-suggestion--is-curated.x-suggestion--matching {
5548
- --x-font-family-suggestion-default-curated: var(
5549
- --x-font-family-suggestion-default-matching-curated
5550
- );
5551
- --x-size-font-suggestion-default-curated: var(
5552
- --x-size-font-suggestion-default-matching-curated
5553
- );
5554
- --x-size-line-height-suggestion-default-curated: var(
5555
- --x-size-line-height-suggestion-default-matching-curated
5556
- );
5557
- --x-number-font-weight-suggestion-default-curated: var(
5558
- --x-number-font-weight-suggestion-default-matching-curated
5559
- );
5560
- --x-color-text-suggestion-default-curated: var(
5561
- --x-color-text-suggestion-default-matching-curated
5562
- );
5664
+ /* @deprecated */
5665
+ :root {
5666
+ --x-size-padding-list-01: var(--x-size-base-01);
5667
+ --x-size-padding-list-02: var(--x-size-base-02);
5668
+ --x-size-padding-list-03: var(--x-size-base-03);
5669
+ --x-size-padding-list-04: var(--x-size-base-04);
5670
+ --x-size-padding-list-05: var(--x-size-base-05);
5671
+ --x-size-padding-list-06: var(--x-size-base-06);
5672
+ --x-size-padding-list-07: var(--x-size-base-07);
5673
+ --x-size-padding-list-08: var(--x-size-base-08);
5674
+ --x-size-padding-list-09: var(--x-size-base-09);
5675
+ --x-size-padding-list-10: var(--x-size-base-10);
5676
+ --x-size-padding-list-11: var(--x-size-base-11);
5677
+ --x-size-padding-list-12: var(--x-size-base-12);
5678
+ --x-size-padding-list-13: var(--x-size-base-13);
5563
5679
  }
5564
5680
  /* @deprecated */
5565
5681
  :root {
@@ -7929,6 +8045,13 @@
7929
8045
  :root {
7930
8046
  --x-size-width-dropdown-l: 202px;
7931
8047
  }
8048
+ :root {
8049
+ --x-size-width-dropdown-l: 202px;
8050
+ }
8051
+
8052
+ .x-dropdown.x-dropdown--l {
8053
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
8054
+ }
7932
8055
  :root {
7933
8056
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
7934
8057
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8002,13 +8125,6 @@
8002
8125
  --x-string-overflow-dropdown-toggle-default: hidden;
8003
8126
  --x-string-overflow-dropdown-list-default: hidden;
8004
8127
  }
8005
- :root {
8006
- --x-size-width-dropdown-l: 202px;
8007
- }
8008
-
8009
- .x-dropdown.x-dropdown--l {
8010
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
8011
- }
8012
8128
  :root {
8013
8129
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8014
8130
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8411,6 +8527,16 @@
8411
8527
  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8412
8528
  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8413
8529
  }
8530
+ :root {
8531
+ --x-color-background-button-primary: var(--x-color-background-button-default);
8532
+ --x-color-border-button-primary: var(--x-color-border-button-default);
8533
+ --x-color-text-button-primary: var(--x-color-text-button-default);
8534
+ --x-size-border-width-button-primary: var(--x-size-border-width-base);
8535
+ --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
8536
+ --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
8537
+ --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8538
+ --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8539
+ }
8414
8540
 
8415
8541
  .x-button--primary.x-button,
8416
8542
  .x-button--primary .x-button {
@@ -8422,16 +8548,6 @@
8422
8548
  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
8423
8549
  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
8424
8550
  }
8425
- :root {
8426
- --x-color-background-button-primary: var(--x-color-background-button-default);
8427
- --x-color-border-button-primary: var(--x-color-border-button-default);
8428
- --x-color-text-button-primary: var(--x-color-text-button-default);
8429
- --x-size-border-width-button-primary: var(--x-size-border-width-base);
8430
- --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
8431
- --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
8432
- --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8433
- --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8434
- }
8435
8551
  :root {
8436
8552
  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8437
8553
  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
@@ -8725,120 +8841,4 @@
8725
8841
  --x-size-border-radius-base-m: var(--x-size-base-06);
8726
8842
  --x-size-border-radius-base-pill: 99999px;
8727
8843
  --x-size-border-width-base: 1px;
8728
- }
8729
- :root {
8730
- --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
8731
- --x-color-text-suggestion-group-matching-part-default: var(
8732
- --x-color-text-suggestion-matching-part-default
8733
- );
8734
- --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
8735
- --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
8736
- --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
8737
- --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
8738
- --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
8739
- --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
8740
- --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
8741
- --x-size-border-width-suggestion-group-default: 0;
8742
- --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
8743
- --x-size-border-width-right-suggestion-group-default: var(
8744
- --x-size-border-width-suggestion-default
8745
- );
8746
- --x-size-border-width-bottom-suggestion-group-default: var(
8747
- --x-size-border-width-suggestion-default
8748
- );
8749
- --x-size-border-width-left-suggestion-group-default: var(
8750
- --x-size-border-width-suggestion-default
8751
- );
8752
- --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
8753
- --x-size-border-radius-top-left-suggestion-group-default: var(
8754
- --x-size-border-radius-suggestion-default
8755
- );
8756
- --x-size-border-radius-top-right-suggestion-group-default: var(
8757
- --x-size-border-radius-suggestion-default
8758
- );
8759
- --x-size-border-radius-bottom-right-suggestion-group-default: var(
8760
- --x-size-border-radius-suggestion-default
8761
- );
8762
- --x-size-border-radius-bottom-left-suggestion-group-default: var(
8763
- --x-size-border-radius-suggestion-default
8764
- );
8765
- --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
8766
- --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
8767
- --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
8768
- --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
8769
- }
8770
-
8771
- [dir="ltr"] .x-suggestion-group {
8772
- padding-left: var(--x-size-padding-left-suggestion-group-default);
8773
- }
8774
-
8775
- [dir="rtl"] .x-suggestion-group {
8776
- padding-right: var(--x-size-padding-left-suggestion-group-default);
8777
- }
8778
-
8779
- [dir="ltr"] .x-suggestion-group {
8780
- padding-right: var(--x-size-padding-right-suggestion-group-default);
8781
- }
8782
-
8783
- [dir="rtl"] .x-suggestion-group {
8784
- padding-left: var(--x-size-padding-right-suggestion-group-default);
8785
- }
8786
-
8787
- [dir="ltr"] .x-suggestion-group {
8788
- border-left-width: var(--x-size-border-width-left-suggestion-group-default);
8789
- }
8790
-
8791
- [dir="rtl"] .x-suggestion-group {
8792
- border-right-width: var(--x-size-border-width-left-suggestion-group-default);
8793
- }
8794
-
8795
- [dir="ltr"] .x-suggestion-group {
8796
- border-right-width: var(--x-size-border-width-right-suggestion-group-default);
8797
- }
8798
-
8799
- [dir="rtl"] .x-suggestion-group {
8800
- border-left-width: var(--x-size-border-width-right-suggestion-group-default);
8801
- }
8802
-
8803
- .x-suggestion-group {
8804
- display: flex;
8805
- flex-flow: row nowrap;
8806
- box-sizing: border-box;
8807
- background-color: var(--x-color-background-suggestion-group-default);
8808
- color: var(--x-color-text-suggestion-group-default);
8809
- border-color: var(--x-color-border-suggestion-group-default);
8810
- font-family: var(--x-font-family-suggestion-group-default);
8811
- font-size: var(--x-size-font-suggestion-group-default);
8812
- line-height: var(--x-size-line-height-suggestion-group-default);
8813
- font-weight: var(--x-number-font-weight-suggestion-group-default);
8814
- cursor: pointer;
8815
- padding-top: var(--x-size-padding-top-suggestion-group-default);
8816
- padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
8817
- gap: var(--x-size-gap-suggestion-group-default);
8818
- border-style: solid;
8819
- border-top-width: var(--x-size-border-width-top-suggestion-group-default);
8820
- border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
8821
- border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
8822
- }
8823
- @media not all and (min-resolution: 0.001dpcm) {
8824
- .x-suggestion-group {
8825
- gap: 0;
8826
- }
8827
- .x-suggestion-group > *:not(:last-child) {
8828
- margin-right: var(--x-size-gap-suggestion-group-default);
8829
- }
8830
- }
8831
- .x-suggestion-group .x-suggestion {
8832
- padding: 0;
8833
- flex: 1 1 auto;
8834
- border: none;
8835
- }
8836
- .x-suggestion-group .x-button {
8837
- --x-color-background-button-default: transparent;
8838
- --x-color-border-button-default: transparent;
8839
- --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
8840
- --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
8841
- --x-size-padding-right-button-default: 0;
8842
- --x-size-padding-left-button-default: 0;
8843
- border: none;
8844
8844
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "5.0.0-alpha.35",
3
+ "version": "5.0.0-alpha.37",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -143,5 +143,5 @@
143
143
  "access": "public",
144
144
  "directory": "dist"
145
145
  },
146
- "gitHead": "793f0c98d0af617b8d7ba5f6de21148eb34c0d84"
146
+ "gitHead": "989c35e14b4b8a2b8c47f778d8a065fbbe1bef41"
147
147
  }