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

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 +8 -0
  2. package/design-system/deprecated-full-theme.css +421 -420
  3. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [6.0.0-alpha.14](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.13...@empathyco/x-components@6.0.0-alpha.14) (2024-11-20)
7
+
8
+ **Note:** Version bump only for package @empathyco/x-components
9
+
10
+
11
+
12
+
13
+
6
14
  ## [6.0.0-alpha.13](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.12...@empathyco/x-components@6.0.0-alpha.13) (2024-11-13)
7
15
 
8
16
 
package/design-system/deprecated-full-theme.css CHANGED
@@ -1,3 +1,5 @@
1
+
2
+
1
3
  .x-uppercase {
2
4
  text-transform: uppercase;
3
5
  }
@@ -13,7 +15,6 @@
13
15
  .x-normal-case {
14
16
  text-transform: none;
15
17
  }
16
-
17
18
  .x-underline {
18
19
  -webkit-text-decoration-line: underline;
19
20
  text-decoration-line: underline;
@@ -3958,6 +3959,47 @@
3958
3959
  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
3959
3960
  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
3960
3961
  }
3962
+ :root {
3963
+ --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3964
+ --x-color-text-suggestion-group-matching-part-default: var(
3965
+ --x-color-text-suggestion-matching-part-default
3966
+ );
3967
+ --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
3968
+ --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
3969
+ --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
3970
+ --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
3971
+ --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
3972
+ --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
3973
+ --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
3974
+ --x-size-border-width-suggestion-group-default: 0;
3975
+ --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
3976
+ --x-size-border-width-right-suggestion-group-default: var(
3977
+ --x-size-border-width-suggestion-default
3978
+ );
3979
+ --x-size-border-width-bottom-suggestion-group-default: var(
3980
+ --x-size-border-width-suggestion-default
3981
+ );
3982
+ --x-size-border-width-left-suggestion-group-default: var(
3983
+ --x-size-border-width-suggestion-default
3984
+ );
3985
+ --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
3986
+ --x-size-border-radius-top-left-suggestion-group-default: var(
3987
+ --x-size-border-radius-suggestion-default
3988
+ );
3989
+ --x-size-border-radius-top-right-suggestion-group-default: var(
3990
+ --x-size-border-radius-suggestion-default
3991
+ );
3992
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(
3993
+ --x-size-border-radius-suggestion-default
3994
+ );
3995
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(
3996
+ --x-size-border-radius-suggestion-default
3997
+ );
3998
+ --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
3999
+ --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
4000
+ --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
4001
+ --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
4002
+ }
3961
4003
 
3962
4004
  [dir="ltr"] .x-suggestion-group {
3963
4005
  padding-left: var(--x-size-padding-left-suggestion-group-default);
@@ -4033,47 +4075,6 @@
4033
4075
  --x-size-padding-left-button-default: 0;
4034
4076
  border: none;
4035
4077
  }
4036
- :root {
4037
- --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
4038
- --x-color-text-suggestion-group-matching-part-default: var(
4039
- --x-color-text-suggestion-matching-part-default
4040
- );
4041
- --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
4042
- --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
4043
- --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
4044
- --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
4045
- --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
4046
- --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
4047
- --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
4048
- --x-size-border-width-suggestion-group-default: 0;
4049
- --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
4050
- --x-size-border-width-right-suggestion-group-default: var(
4051
- --x-size-border-width-suggestion-default
4052
- );
4053
- --x-size-border-width-bottom-suggestion-group-default: var(
4054
- --x-size-border-width-suggestion-default
4055
- );
4056
- --x-size-border-width-left-suggestion-group-default: var(
4057
- --x-size-border-width-suggestion-default
4058
- );
4059
- --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
4060
- --x-size-border-radius-top-left-suggestion-group-default: var(
4061
- --x-size-border-radius-suggestion-default
4062
- );
4063
- --x-size-border-radius-top-right-suggestion-group-default: var(
4064
- --x-size-border-radius-suggestion-default
4065
- );
4066
- --x-size-border-radius-bottom-right-suggestion-group-default: var(
4067
- --x-size-border-radius-suggestion-default
4068
- );
4069
- --x-size-border-radius-bottom-left-suggestion-group-default: var(
4070
- --x-size-border-radius-suggestion-default
4071
- );
4072
- --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
4073
- --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
4074
- --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
4075
- --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
4076
- }
4077
4078
  :root {
4078
4079
  --x-string-align-items-suggestion-default: center;
4079
4080
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4453,6 +4454,13 @@
4453
4454
  --x-color-background-scroll-bar-hover: transparent;
4454
4455
  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4455
4456
  }
4457
+ :root {
4458
+ --x-string-overflow-scroll: auto;
4459
+ --x-color-background-scroll-bar: transparent;
4460
+ --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4461
+ --x-color-background-scroll-bar-hover: transparent;
4462
+ --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4463
+ }
4456
4464
 
4457
4465
  .x-scroll {
4458
4466
  overflow-y: var(--x-string-overflow-scroll);
@@ -4484,13 +4492,6 @@
4484
4492
  .x-base-scroll {
4485
4493
  overflow-y: var(--x-string-overflow-scroll, auto);
4486
4494
  }
4487
- :root {
4488
- --x-string-overflow-scroll: auto;
4489
- --x-color-background-scroll-bar: transparent;
4490
- --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
4491
- --x-color-background-scroll-bar-hover: transparent;
4492
- --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
4493
- }
4494
4495
  /* @deprecated */
4495
4496
  :root {
4496
4497
  --x-size-padding-row-02: var(--x-size-base-02);
@@ -4550,6 +4551,28 @@
4550
4551
  --x-size-gap-row-19: var(--x-size-base-19);
4551
4552
  --x-size-gap-row-20: var(--x-size-base-20);
4552
4553
  }
4554
+ :root {
4555
+ --x-size-gap-row-01: var(--x-size-base-01);
4556
+ --x-size-gap-row-02: var(--x-size-base-02);
4557
+ --x-size-gap-row-03: var(--x-size-base-03);
4558
+ --x-size-gap-row-04: var(--x-size-base-04);
4559
+ --x-size-gap-row-05: var(--x-size-base-05);
4560
+ --x-size-gap-row-06: var(--x-size-base-06);
4561
+ --x-size-gap-row-07: var(--x-size-base-07);
4562
+ --x-size-gap-row-08: var(--x-size-base-08);
4563
+ --x-size-gap-row-09: var(--x-size-base-09);
4564
+ --x-size-gap-row-10: var(--x-size-base-10);
4565
+ --x-size-gap-row-11: var(--x-size-base-11);
4566
+ --x-size-gap-row-12: var(--x-size-base-12);
4567
+ --x-size-gap-row-13: var(--x-size-base-13);
4568
+ --x-size-gap-row-14: var(--x-size-base-14);
4569
+ --x-size-gap-row-15: var(--x-size-base-15);
4570
+ --x-size-gap-row-16: var(--x-size-base-16);
4571
+ --x-size-gap-row-17: var(--x-size-base-17);
4572
+ --x-size-gap-row-18: var(--x-size-base-18);
4573
+ --x-size-gap-row-19: var(--x-size-base-19);
4574
+ --x-size-gap-row-20: var(--x-size-base-20);
4575
+ }
4553
4576
 
4554
4577
  .x-row--gap-01 {
4555
4578
  --x-size-gap-row: var(--x-size-gap-row-01);
@@ -4630,28 +4653,6 @@
4630
4653
  .x-row--gap-20 {
4631
4654
  --x-size-gap-row: var(--x-size-gap-row-20);
4632
4655
  }
4633
- :root {
4634
- --x-size-gap-row-01: var(--x-size-base-01);
4635
- --x-size-gap-row-02: var(--x-size-base-02);
4636
- --x-size-gap-row-03: var(--x-size-base-03);
4637
- --x-size-gap-row-04: var(--x-size-base-04);
4638
- --x-size-gap-row-05: var(--x-size-base-05);
4639
- --x-size-gap-row-06: var(--x-size-base-06);
4640
- --x-size-gap-row-07: var(--x-size-base-07);
4641
- --x-size-gap-row-08: var(--x-size-base-08);
4642
- --x-size-gap-row-09: var(--x-size-base-09);
4643
- --x-size-gap-row-10: var(--x-size-base-10);
4644
- --x-size-gap-row-11: var(--x-size-base-11);
4645
- --x-size-gap-row-12: var(--x-size-base-12);
4646
- --x-size-gap-row-13: var(--x-size-base-13);
4647
- --x-size-gap-row-14: var(--x-size-base-14);
4648
- --x-size-gap-row-15: var(--x-size-base-15);
4649
- --x-size-gap-row-16: var(--x-size-base-16);
4650
- --x-size-gap-row-17: var(--x-size-base-17);
4651
- --x-size-gap-row-18: var(--x-size-base-18);
4652
- --x-size-gap-row-19: var(--x-size-base-19);
4653
- --x-size-gap-row-20: var(--x-size-base-20);
4654
- }
4655
4656
  :root {
4656
4657
  --x-size-gap-row: 0;
4657
4658
  --x-size-padding-row: 0;
@@ -4805,6 +4806,23 @@
4805
4806
  --x-size-border-width-result-description-default: 0;
4806
4807
  --x-size-border-width-result-picture-default: 0;
4807
4808
  }
4809
+ :root {
4810
+ --x-color-border-result-default: var(--x-color-base-lead);
4811
+ --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4812
+ --x-color-border-result-description-default: var(--x-color-border-result-default);
4813
+ --x-color-border-result-picture-default: var(--x-color-border-result-default);
4814
+ --x-color-background-result-default: transparent;
4815
+ --x-size-padding-result-default: 0;
4816
+ --x-size-padding-result-overlay-default: 0;
4817
+ --x-size-padding-result-description-default: 0;
4818
+ --x-size-gap-result-default: var(--x-size-base-03);
4819
+ --x-size-padding-result-picture-default: 0;
4820
+ --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4821
+ --x-size-border-width-result-default: 0;
4822
+ --x-size-border-width-result-overlay-default: 0;
4823
+ --x-size-border-width-result-description-default: 0;
4824
+ --x-size-border-width-result-picture-default: 0;
4825
+ }
4808
4826
 
4809
4827
  .x-result {
4810
4828
  display: grid;
@@ -4858,23 +4876,6 @@
4858
4876
  opacity: 1;
4859
4877
  }
4860
4878
  }
4861
- :root {
4862
- --x-color-border-result-default: var(--x-color-base-lead);
4863
- --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4864
- --x-color-border-result-description-default: var(--x-color-border-result-default);
4865
- --x-color-border-result-picture-default: var(--x-color-border-result-default);
4866
- --x-color-background-result-default: transparent;
4867
- --x-size-padding-result-default: 0;
4868
- --x-size-padding-result-overlay-default: 0;
4869
- --x-size-padding-result-description-default: 0;
4870
- --x-size-gap-result-default: var(--x-size-base-03);
4871
- --x-size-padding-result-picture-default: 0;
4872
- --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4873
- --x-size-border-width-result-default: 0;
4874
- --x-size-border-width-result-overlay-default: 0;
4875
- --x-size-border-width-result-description-default: 0;
4876
- --x-size-border-width-result-picture-default: 0;
4877
- }
4878
4879
  :root {
4879
4880
  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4880
4881
  }
@@ -4895,6 +4896,15 @@
4895
4896
  --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
4896
4897
  --x-size-border-width-progress-bar-default: 0;
4897
4898
  }
4899
+ :root {
4900
+ --x-size-height-progress-bar-line-default: var(--x-size-base-02);
4901
+ --x-size-width-progress-bar-line-default: var(--x-size-base-20);
4902
+ --x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
4903
+ --x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
4904
+ --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
4905
+ --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
4906
+ --x-size-border-width-progress-bar-default: 0;
4907
+ }
4898
4908
 
4899
4909
  .x-progress-bar {
4900
4910
  display: inline-block;
@@ -4911,15 +4921,6 @@
4911
4921
  border-radius: var(--x-size-border-radius-progress-bar-default);
4912
4922
  background-color: var(--x-color-background-progress-bar-line-default);
4913
4923
  }
4914
- :root {
4915
- --x-size-height-progress-bar-line-default: var(--x-size-base-02);
4916
- --x-size-width-progress-bar-line-default: var(--x-size-base-20);
4917
- --x-color-background-progress-bar-default: var(--x-color-base-neutral-70);
4918
- --x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
4919
- --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
4920
- --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
4921
- --x-size-border-width-progress-bar-default: 0;
4922
- }
4923
4924
  :root {
4924
4925
  --x-number-zoom-scale-picture: 1.1;
4925
4926
  --x-number-zoom-duration-picture: 0.3s;
@@ -4938,14 +4939,14 @@
4938
4939
  :root {
4939
4940
  --x-number-aspect-ratio-picture: 1;
4940
4941
  }
4942
+ :root {
4943
+ --x-number-aspect-ratio-picture: 1;
4944
+ }
4941
4945
 
4942
4946
  .x-picture--fixed-ratio.x-picture {
4943
4947
  aspect-ratio: var(--x-number-aspect-ratio-picture);
4944
4948
  width: 100%;
4945
4949
  }
4946
- :root {
4947
- --x-number-aspect-ratio-picture: 1;
4948
- }
4949
4950
  :root {
4950
4951
  --x-size-border-radius-picture-default: 0;
4951
4952
  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -5024,6 +5025,10 @@
5024
5025
  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5025
5026
  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5026
5027
  }
5028
+ :root {
5029
+ --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5030
+ --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5031
+ }
5027
5032
 
5028
5033
  .x-picture--cover.x-picture {
5029
5034
  position: relative;
@@ -5040,10 +5045,6 @@
5040
5045
  width: 100%;
5041
5046
  height: 100%;
5042
5047
  }
5043
- :root {
5044
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5045
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5046
- }
5047
5048
  :root {
5048
5049
  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5049
5050
  --x-mix-blend-mode-picture-colored: multiply;
@@ -5076,6 +5077,13 @@
5076
5077
  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5077
5078
  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5078
5079
  }
5080
+ :root {
5081
+ --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5082
+ --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5083
+ --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5084
+ --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5085
+ --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5086
+ }
5079
5087
 
5080
5088
  .x-picture--card.x-picture {
5081
5089
  --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
@@ -5084,13 +5092,6 @@
5084
5092
  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5085
5093
  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5086
5094
  }
5087
- :root {
5088
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5089
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5090
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5091
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5092
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5093
- }
5094
5095
  :root {
5095
5096
  --x-color-background-option-list-button-default: transparent;
5096
5097
  --x-color-border-option-list-button-default: transparent;
@@ -5408,24 +5409,69 @@
5408
5409
  --x-number-font-weight-base-regular
5409
5410
  );
5410
5411
  }
5411
-
5412
- .x-option-list--bottom.x-option-list,
5413
- .x-option-list--bottom .x-option-list {
5414
- --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
5415
- --x-color-text-option-list-button-default-hover: var(
5416
- --x-color-text-option-list-button-bottom-hover
5412
+ :root {
5413
+ --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5414
+ --x-color-text-option-list-button-bottom-selected-hover: var(
5415
+ --x-color-text-option-list-button-bottom-selected
5417
5416
  );
5418
- --x-color-border-option-list-item-default: var(--x-color-border-option-list-item-bottom);
5419
- --x-color-border-top-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
5420
- --x-color-border-right-option-list-item-default: var(
5421
- --x-color-border-top-option-list-item-bottom
5417
+ --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
5418
+ --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
5419
+ --x-color-border-option-list-item-bottom: transparent;
5420
+ --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5421
+ --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5422
+ --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5423
+ --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5424
+ --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
5425
+ --x-color-border-top-option-list-item-bottom-selected: var(
5426
+ --x-color-border-option-list-item-bottom
5422
5427
  );
5423
- --x-color-border-bottom-option-list-item-default: var(
5424
- --x-color-border-top-option-list-item-bottom
5428
+ --x-color-border-right-option-list-item-bottom-selected: var(
5429
+ --x-color-border-option-list-item-bottom
5425
5430
  );
5426
- --x-color-border-left-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
5427
- --x-size-border-width-option-list-item-default: var(
5428
- --x-size-border-width-option-list-item-bottom
5431
+ --x-color-border-bottom-option-list-item-bottom-selected: var(
5432
+ --x-color-border-option-list-item-bottom-selected
5433
+ );
5434
+ --x-color-border-left-option-list-item-bottom-selected: var(
5435
+ --x-color-border-option-list-item-bottom
5436
+ );
5437
+ --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
5438
+ --x-size-border-width-top-option-list-item-bottom: 0;
5439
+ --x-size-border-width-right-option-list-item-bottom: 0;
5440
+ --x-size-border-width-bottom-option-list-item-bottom: var(
5441
+ --x-size-border-width-option-list-item-bottom
5442
+ );
5443
+ --x-size-border-width-left-option-list-item-bottom: 0;
5444
+ --x-size-border-width-top-option-list-item-bottom-selected: 0;
5445
+ --x-size-border-width-right-option-list-item-bottom-selected: 0;
5446
+ --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5447
+ --x-size-border-width-option-list-item-bottom
5448
+ );
5449
+ --x-size-border-width-left-option-list-item-bottom-selected: 0;
5450
+ --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5451
+ --x-font-decoration-option-list-button-bottom-hover: none;
5452
+ --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5453
+ --x-number-font-weight-option-list-button-bottom-selected: var(
5454
+ --x-number-font-weight-base-regular
5455
+ );
5456
+ }
5457
+
5458
+ .x-option-list--bottom.x-option-list,
5459
+ .x-option-list--bottom .x-option-list {
5460
+ --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
5461
+ --x-color-text-option-list-button-default-hover: var(
5462
+ --x-color-text-option-list-button-bottom-hover
5463
+ );
5464
+ --x-color-border-option-list-item-default: var(--x-color-border-option-list-item-bottom);
5465
+ --x-color-border-top-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
5466
+ --x-color-border-right-option-list-item-default: var(
5467
+ --x-color-border-top-option-list-item-bottom
5468
+ );
5469
+ --x-color-border-bottom-option-list-item-default: var(
5470
+ --x-color-border-top-option-list-item-bottom
5471
+ );
5472
+ --x-color-border-left-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
5473
+ --x-size-border-width-option-list-item-default: var(
5474
+ --x-size-border-width-option-list-item-bottom
5429
5475
  );
5430
5476
  --x-size-border-width-top-option-list-item-default: var(
5431
5477
  --x-size-border-width-top-option-list-item-bottom
@@ -5494,51 +5540,6 @@
5494
5540
  --x-size-border-width-bottom-option-list-item-default: inherit;
5495
5541
  --x-size-border-width-left-option-list-item-default: inherit;
5496
5542
  }
5497
- :root {
5498
- --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5499
- --x-color-text-option-list-button-bottom-selected-hover: var(
5500
- --x-color-text-option-list-button-bottom-selected
5501
- );
5502
- --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
5503
- --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
5504
- --x-color-border-option-list-item-bottom: transparent;
5505
- --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5506
- --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5507
- --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5508
- --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
5509
- --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
5510
- --x-color-border-top-option-list-item-bottom-selected: var(
5511
- --x-color-border-option-list-item-bottom
5512
- );
5513
- --x-color-border-right-option-list-item-bottom-selected: var(
5514
- --x-color-border-option-list-item-bottom
5515
- );
5516
- --x-color-border-bottom-option-list-item-bottom-selected: var(
5517
- --x-color-border-option-list-item-bottom-selected
5518
- );
5519
- --x-color-border-left-option-list-item-bottom-selected: var(
5520
- --x-color-border-option-list-item-bottom
5521
- );
5522
- --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
5523
- --x-size-border-width-top-option-list-item-bottom: 0;
5524
- --x-size-border-width-right-option-list-item-bottom: 0;
5525
- --x-size-border-width-bottom-option-list-item-bottom: var(
5526
- --x-size-border-width-option-list-item-bottom
5527
- );
5528
- --x-size-border-width-left-option-list-item-bottom: 0;
5529
- --x-size-border-width-top-option-list-item-bottom-selected: 0;
5530
- --x-size-border-width-right-option-list-item-bottom-selected: 0;
5531
- --x-size-border-width-bottom-option-list-item-bottom-selected: var(
5532
- --x-size-border-width-option-list-item-bottom
5533
- );
5534
- --x-size-border-width-left-option-list-item-bottom-selected: 0;
5535
- --x-size-font-option-list-button-bottom: var(--x-size-font-text);
5536
- --x-font-decoration-option-list-button-bottom-hover: none;
5537
- --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
5538
- --x-number-font-weight-option-list-button-bottom-selected: var(
5539
- --x-number-font-weight-base-regular
5540
- );
5541
- }
5542
5543
  :root {
5543
5544
  --x-modal-overlay-color: rgb(0, 0, 0);
5544
5545
  --x-modal-overlay-opacity: 0.7;
@@ -5573,6 +5574,27 @@
5573
5574
  --x-size-font-message-default: var(--x-size-font-title3);
5574
5575
  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5575
5576
  }
5577
+ :root {
5578
+ --x-string-justify-message-default: center;
5579
+ --x-size-gap-message-default: var(--x-size-base-03);
5580
+ --x-size-padding-message-default: var(--x-size-base-06);
5581
+ --x-color-background-message-default: var(--x-color-base-neutral-95);
5582
+ --x-color-border-message-default: var(--x-color-background-message-default);
5583
+ --x-color-text-message-default: var(--x-color-text-default);
5584
+ --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
5585
+ --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
5586
+ --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
5587
+ --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
5588
+ --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
5589
+ --x-size-border-width-message-default: var(--x-size-border-width-base);
5590
+ --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
5591
+ --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
5592
+ --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
5593
+ --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
5594
+ --x-font-family-message-default: var(--x-font-family-title3);
5595
+ --x-size-font-message-default: var(--x-size-font-title3);
5596
+ --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5597
+ }
5576
5598
 
5577
5599
  [dir="ltr"] .x-message {
5578
5600
  border-left-width: var(--x-size-border-width-left-message-default);
@@ -5623,27 +5645,6 @@
5623
5645
  .x-message > p {
5624
5646
  margin: 0;
5625
5647
  }
5626
- :root {
5627
- --x-string-justify-message-default: center;
5628
- --x-size-gap-message-default: var(--x-size-base-03);
5629
- --x-size-padding-message-default: var(--x-size-base-06);
5630
- --x-color-background-message-default: var(--x-color-base-neutral-95);
5631
- --x-color-border-message-default: var(--x-color-background-message-default);
5632
- --x-color-text-message-default: var(--x-color-text-default);
5633
- --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
5634
- --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
5635
- --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
5636
- --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
5637
- --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
5638
- --x-size-border-width-message-default: var(--x-size-border-width-base);
5639
- --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
5640
- --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
5641
- --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
5642
- --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
5643
- --x-font-family-message-default: var(--x-font-family-title3);
5644
- --x-size-font-message-default: var(--x-size-font-title3);
5645
- --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5646
- }
5647
5648
  /* @deprecated */
5648
5649
  :root {
5649
5650
  --x-size-padding-list-01: var(--x-size-base-01);
@@ -6022,6 +6023,28 @@
6022
6023
  --x-size-gap-list-19: var(--x-size-base-19);
6023
6024
  --x-size-gap-list-20: var(--x-size-base-20);
6024
6025
  }
6026
+ :root {
6027
+ --x-size-gap-list-01: var(--x-size-base-01);
6028
+ --x-size-gap-list-02: var(--x-size-base-02);
6029
+ --x-size-gap-list-03: var(--x-size-base-03);
6030
+ --x-size-gap-list-04: var(--x-size-base-04);
6031
+ --x-size-gap-list-05: var(--x-size-base-05);
6032
+ --x-size-gap-list-06: var(--x-size-base-06);
6033
+ --x-size-gap-list-07: var(--x-size-base-07);
6034
+ --x-size-gap-list-08: var(--x-size-base-08);
6035
+ --x-size-gap-list-09: var(--x-size-base-09);
6036
+ --x-size-gap-list-10: var(--x-size-base-10);
6037
+ --x-size-gap-list-11: var(--x-size-base-11);
6038
+ --x-size-gap-list-12: var(--x-size-base-12);
6039
+ --x-size-gap-list-13: var(--x-size-base-13);
6040
+ --x-size-gap-list-14: var(--x-size-base-14);
6041
+ --x-size-gap-list-15: var(--x-size-base-15);
6042
+ --x-size-gap-list-16: var(--x-size-base-16);
6043
+ --x-size-gap-list-17: var(--x-size-base-17);
6044
+ --x-size-gap-list-18: var(--x-size-base-18);
6045
+ --x-size-gap-list-19: var(--x-size-base-19);
6046
+ --x-size-gap-list-20: var(--x-size-base-20);
6047
+ }
6025
6048
 
6026
6049
  .x-list--gap-01.x-list {
6027
6050
  gap: var(--x-size-gap-list-01);
@@ -6523,26 +6546,12 @@
6523
6546
  }
6524
6547
  }
6525
6548
  :root {
6526
- --x-size-gap-list-01: var(--x-size-base-01);
6527
- --x-size-gap-list-02: var(--x-size-base-02);
6528
- --x-size-gap-list-03: var(--x-size-base-03);
6529
- --x-size-gap-list-04: var(--x-size-base-04);
6530
- --x-size-gap-list-05: var(--x-size-base-05);
6531
- --x-size-gap-list-06: var(--x-size-base-06);
6532
- --x-size-gap-list-07: var(--x-size-base-07);
6533
- --x-size-gap-list-08: var(--x-size-base-08);
6534
- --x-size-gap-list-09: var(--x-size-base-09);
6535
- --x-size-gap-list-10: var(--x-size-base-10);
6536
- --x-size-gap-list-11: var(--x-size-base-11);
6537
- --x-size-gap-list-12: var(--x-size-base-12);
6538
- --x-size-gap-list-13: var(--x-size-base-13);
6539
- --x-size-gap-list-14: var(--x-size-base-14);
6540
- --x-size-gap-list-15: var(--x-size-base-15);
6541
- --x-size-gap-list-16: var(--x-size-base-16);
6542
- --x-size-gap-list-17: var(--x-size-base-17);
6543
- --x-size-gap-list-18: var(--x-size-base-18);
6544
- --x-size-gap-list-19: var(--x-size-base-19);
6545
- --x-size-gap-list-20: var(--x-size-base-20);
6549
+ --x-string-flow-list: column nowrap;
6550
+ --x-size-padding-list: 0;
6551
+ --x-size-gap-list: 0;
6552
+ --x-size-justify-list: stretch;
6553
+ --x-size-align-list: stretch;
6554
+ --x-size-align-list-stretch: stretch;
6546
6555
  }
6547
6556
  :root {
6548
6557
  --x-string-flow-list: column nowrap;
@@ -6693,12 +6702,13 @@
6693
6702
  flex: 12 1 auto;
6694
6703
  }
6695
6704
  :root {
6696
- --x-string-flow-list: column nowrap;
6697
- --x-size-padding-list: 0;
6698
- --x-size-gap-list: 0;
6699
- --x-size-justify-list: stretch;
6700
- --x-size-align-list: stretch;
6701
- --x-size-align-list-stretch: stretch;
6705
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6706
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6707
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6708
+ --x-size-border-radius-bottom-right-input-group-pill: var(
6709
+ --x-size-border-radius-input-group-pill
6710
+ );
6711
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6702
6712
  }
6703
6713
  :root {
6704
6714
  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
@@ -6727,13 +6737,13 @@
6727
6737
  );
6728
6738
  }
6729
6739
  :root {
6730
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6731
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6732
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6733
- --x-size-border-radius-bottom-right-input-group-pill: var(
6734
- --x-size-border-radius-input-group-pill
6735
- );
6736
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6740
+ --x-size-padding-left-input-group-line: 0;
6741
+ --x-size-padding-right-input-group-line: 0;
6742
+ --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6743
+ --x-size-border-width-top-input-group-line: 0;
6744
+ --x-size-border-width-right-input-group-line: 0;
6745
+ --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6746
+ --x-size-border-width-left-input-group-line: 0;
6737
6747
  }
6738
6748
  :root {
6739
6749
  --x-size-padding-left-input-group-line: 0;
@@ -6782,15 +6792,6 @@
6782
6792
  margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6783
6793
  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6784
6794
  }
6785
- :root {
6786
- --x-size-padding-left-input-group-line: 0;
6787
- --x-size-padding-right-input-group-line: 0;
6788
- --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6789
- --x-size-border-width-top-input-group-line: 0;
6790
- --x-size-border-width-right-input-group-line: 0;
6791
- --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6792
- --x-size-border-width-left-input-group-line: 0;
6793
- }
6794
6795
  :root {
6795
6796
  --x-color-background-input-group-default: var(--x-color-background-input-default);
6796
6797
  --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7020,6 +7021,15 @@
7020
7021
  );
7021
7022
  --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7022
7023
  }
7024
+ :root {
7025
+ --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7026
+ --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
7027
+ --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
7028
+ --x-size-border-radius-bottom-right-input-group-card: var(
7029
+ --x-size-border-radius-input-group-card
7030
+ );
7031
+ --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7032
+ }
7023
7033
 
7024
7034
  .x-input-group--card.x-input-group,
7025
7035
  .x-input-group--card .x-input-group {
@@ -7047,15 +7057,6 @@
7047
7057
  --x-size-border-radius-top-left-input-group-default: 0;
7048
7058
  --x-size-border-radius-bottom-left-input-group-default: 0;
7049
7059
  }
7050
- :root {
7051
- --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7052
- --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
7053
- --x-size-border-radius-top-right-input-group-card: var(--x-size-border-radius-input-group-card);
7054
- --x-size-border-radius-bottom-right-input-group-card: var(
7055
- --x-size-border-radius-input-group-card
7056
- );
7057
- --x-size-border-radius-bottom-left-input-group-card: var(--x-size-border-radius-input-group-card);
7058
- }
7059
7060
  :root {
7060
7061
  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
7061
7062
  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
@@ -7089,6 +7090,16 @@
7089
7090
  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7090
7091
  --x-size-border-width-left-input-line: 0;
7091
7092
  }
7093
+ :root {
7094
+ --x-size-padding-top-input-line: var(--x-size-base-03);
7095
+ --x-size-padding-right-input-line: 0;
7096
+ --x-size-padding-bottom-input-line: var(--x-size-base-03);
7097
+ --x-size-padding-left-input-line: 0;
7098
+ --x-size-border-width-top-input-line: 0;
7099
+ --x-size-border-width-right-input-line: 0;
7100
+ --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7101
+ --x-size-border-width-left-input-line: 0;
7102
+ }
7092
7103
 
7093
7104
  .x-input--line .x-input,
7094
7105
  .x-input--line.x-input {
@@ -7101,16 +7112,6 @@
7101
7112
  --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
7102
7113
  --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
7103
7114
  }
7104
- :root {
7105
- --x-size-padding-top-input-line: var(--x-size-base-03);
7106
- --x-size-padding-right-input-line: 0;
7107
- --x-size-padding-bottom-input-line: var(--x-size-base-03);
7108
- --x-size-padding-left-input-line: 0;
7109
- --x-size-border-width-top-input-line: 0;
7110
- --x-size-border-width-right-input-line: 0;
7111
- --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7112
- --x-size-border-width-left-input-line: 0;
7113
- }
7114
7115
  :root {
7115
7116
  --x-color-background-input-default: var(--x-color-base-neutral-100);
7116
7117
  --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7139,11 +7140,39 @@
7139
7140
  --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7140
7141
  --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7141
7142
  }
7142
-
7143
- [dir="ltr"] .x-input {
7144
- padding-left: var(--x-size-padding-left-input-default);
7145
- }
7146
-
7143
+ :root {
7144
+ --x-color-background-input-default: var(--x-color-base-neutral-100);
7145
+ --x-color-border-input-default: var(--x-color-base-neutral-70);
7146
+ --x-color-border-input-default-focus: var(--x-color-base-lead);
7147
+ --x-color-text-input-default: var(--x-color-text-default);
7148
+ --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7149
+ --x-size-border-width-input-default: var(--x-size-border-width-base);
7150
+ --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7151
+ --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7152
+ --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7153
+ --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7154
+ --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7155
+ --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7156
+ --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7157
+ --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7158
+ --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7159
+ --x-size-height-input-default: var(--x-size-base-07);
7160
+ --x-size-padding-right-input-default: var(--x-size-base-04);
7161
+ --x-size-padding-left-input-default: var(--x-size-base-04);
7162
+ --x-font-family-input-default: var(--x-font-family-text);
7163
+ --x-size-font-input-default: var(--x-size-font-text);
7164
+ --x-size-line-height-input-default: var(--x-size-line-height-text);
7165
+ --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7166
+ --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7167
+ --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7168
+ --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7169
+ --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7170
+ }
7171
+
7172
+ [dir="ltr"] .x-input {
7173
+ padding-left: var(--x-size-padding-left-input-default);
7174
+ }
7175
+
7147
7176
  [dir="rtl"] .x-input {
7148
7177
  padding-right: var(--x-size-padding-left-input-default);
7149
7178
  }
@@ -7220,32 +7249,11 @@
7220
7249
  line-height: var(--x-size-line-height-input-placeholder-default);
7221
7250
  }
7222
7251
  :root {
7223
- --x-color-background-input-default: var(--x-color-base-neutral-100);
7224
- --x-color-border-input-default: var(--x-color-base-neutral-70);
7225
- --x-color-border-input-default-focus: var(--x-color-base-lead);
7226
- --x-color-text-input-default: var(--x-color-text-default);
7227
- --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7228
- --x-size-border-width-input-default: var(--x-size-border-width-base);
7229
- --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7230
- --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7231
- --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7232
- --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7233
- --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7234
- --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7235
- --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7236
- --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7237
- --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7238
- --x-size-height-input-default: var(--x-size-base-07);
7239
- --x-size-padding-right-input-default: var(--x-size-base-04);
7240
- --x-size-padding-left-input-default: var(--x-size-base-04);
7241
- --x-font-family-input-default: var(--x-font-family-text);
7242
- --x-size-font-input-default: var(--x-size-font-text);
7243
- --x-size-line-height-input-default: var(--x-size-line-height-text);
7244
- --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7245
- --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7246
- --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7247
- --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7248
- --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7252
+ --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7253
+ --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7254
+ --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7255
+ --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7256
+ --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7249
7257
  }
7250
7258
  :root {
7251
7259
  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
@@ -7267,13 +7275,6 @@
7267
7275
  --x-size-border-radius-bottom-left-input-card
7268
7276
  );
7269
7277
  }
7270
- :root {
7271
- --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7272
- --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
7273
- --x-size-border-radius-top-right-input-card: var(--x-size-border-radius-input-card);
7274
- --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7275
- --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7276
- }
7277
7278
  :root {
7278
7279
  --x-size-width-icon-xl: var(--x-size-base-07);
7279
7280
  --x-size-height-icon-xl: var(--x-size-base-07);
@@ -7304,15 +7305,15 @@
7304
7305
  --x-size-width-icon-m: var(--x-size-base-05);
7305
7306
  --x-size-height-icon-m: var(--x-size-base-05);
7306
7307
  }
7308
+ :root {
7309
+ --x-size-width-icon-m: var(--x-size-base-05);
7310
+ --x-size-height-icon-m: var(--x-size-base-05);
7311
+ }
7307
7312
 
7308
7313
  .x-icon--m {
7309
7314
  --x-size-width-icon-default: var(--x-size-width-icon-m);
7310
7315
  --x-size-height-icon-default: var(--x-size-height-icon-m);
7311
7316
  }
7312
- :root {
7313
- --x-size-width-icon-m: var(--x-size-base-05);
7314
- --x-size-height-icon-m: var(--x-size-base-05);
7315
- }
7316
7317
  :root {
7317
7318
  --x-size-width-icon-l: var(--x-size-base-06);
7318
7319
  --x-size-height-icon-l: var(--x-size-base-06);
@@ -7370,6 +7371,11 @@
7370
7371
  --x-size-gap-grid: var(--x-size-base-03);
7371
7372
  --x-size-min-width-grid-item: 150px;
7372
7373
  }
7374
+ :root {
7375
+ --x-size-padding-grid: 0;
7376
+ --x-size-gap-grid: var(--x-size-base-03);
7377
+ --x-size-min-width-grid-item: 150px;
7378
+ }
7373
7379
 
7374
7380
  .x-grid-list {
7375
7381
  margin: 0;
@@ -7391,10 +7397,18 @@
7391
7397
  .x-grid-list--cols-auto .x-grid-list__item {
7392
7398
  min-width: var(--x-size-min-width-grid-item);
7393
7399
  }
7400
+ .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7401
+ .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7402
+ .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7403
+ .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7404
+ margin-left: auto;
7405
+ }
7394
7406
  :root {
7395
- --x-size-padding-grid: 0;
7396
- --x-size-gap-grid: var(--x-size-base-03);
7397
- --x-size-min-width-grid-item: 150px;
7407
+ --x-size-margin-filter-children: 0;
7408
+ --x-size-padding-top-filter-children: 0;
7409
+ --x-size-padding-right-filter-children: 0;
7410
+ --x-size-padding-bottom-filter-children: 0;
7411
+ --x-size-padding-left-filter-children: var(--x-size-base-05);
7398
7412
  }
7399
7413
  :root {
7400
7414
  --x-size-margin-filter-children: 0;
@@ -7403,11 +7417,30 @@
7403
7417
  --x-size-padding-bottom-filter-children: 0;
7404
7418
  --x-size-padding-left-filter-children: var(--x-size-base-05);
7405
7419
  }
7406
- .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
7407
- .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
7408
- .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
7409
- .x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
7410
- margin-left: auto;
7420
+
7421
+ .x-hierarchical-filter-container {
7422
+ list-style: none;
7423
+ }
7424
+ [dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7425
+ padding-left: var(--x-size-padding-left-filter-children);
7426
+ }
7427
+ [dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7428
+ padding-right: var(--x-size-padding-left-filter-children);
7429
+ }
7430
+ [dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7431
+ padding-right: var(--x-size-padding-right-filter-children);
7432
+ }
7433
+ [dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7434
+ padding-left: var(--x-size-padding-right-filter-children);
7435
+ }
7436
+ .x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7437
+ margin: var(--x-size-margin-filter-children);
7438
+ padding-top: var(--x-size-padding-top-filter-children);
7439
+ padding-bottom: var(--x-size-padding-bottom-filter-children);
7440
+ }
7441
+ .x-hierarchical-filter-container .x-hierarchical-filter-container,
7442
+ .x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
7443
+ width: 100%;
7411
7444
  }
7412
7445
  :root {
7413
7446
  --x-color-background-filter-default: transparent;
@@ -7441,38 +7474,6 @@
7441
7474
  );
7442
7475
  --x-size-line-height-filter-default: var(--x-size-line-height-text);
7443
7476
  }
7444
- :root {
7445
- --x-size-margin-filter-children: 0;
7446
- --x-size-padding-top-filter-children: 0;
7447
- --x-size-padding-right-filter-children: 0;
7448
- --x-size-padding-bottom-filter-children: 0;
7449
- --x-size-padding-left-filter-children: var(--x-size-base-05);
7450
- }
7451
-
7452
- .x-hierarchical-filter-container {
7453
- list-style: none;
7454
- }
7455
- [dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7456
- padding-left: var(--x-size-padding-left-filter-children);
7457
- }
7458
- [dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7459
- padding-right: var(--x-size-padding-left-filter-children);
7460
- }
7461
- [dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7462
- padding-right: var(--x-size-padding-right-filter-children);
7463
- }
7464
- [dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7465
- padding-left: var(--x-size-padding-right-filter-children);
7466
- }
7467
- .x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
7468
- margin: var(--x-size-margin-filter-children);
7469
- padding-top: var(--x-size-padding-top-filter-children);
7470
- padding-bottom: var(--x-size-padding-bottom-filter-children);
7471
- }
7472
- .x-hierarchical-filter-container .x-hierarchical-filter-container,
7473
- .x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
7474
- width: 100%;
7475
- }
7476
7477
  :root {
7477
7478
  --x-color-background-filter-default: transparent;
7478
7479
  --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -8610,91 +8611,6 @@
8610
8611
  --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
8611
8612
  --x-size-line-height-button-default: var(--x-size-line-height-text);
8612
8613
  }
8613
- :root {
8614
- --x-color-background-button-default: var(--x-color-base-lead);
8615
- --x-color-border-button-default: var(--x-color-background-button-default);
8616
- --x-color-text-button-default: var(--x-color-base-neutral-100);
8617
- --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
8618
- --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
8619
- --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
8620
- --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
8621
- --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
8622
- --x-size-border-width-button-default: var(--x-size-border-width-base);
8623
- --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
8624
- --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
8625
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
8626
- --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
8627
- --x-size-height-button-default: var(--x-size-base-08);
8628
- --x-size-padding-right-button-default: var(--x-size-base-05);
8629
- --x-size-padding-left-button-default: var(--x-size-base-05);
8630
- --x-size-gap-button-default: var(--x-size-base-03);
8631
- --x-font-family-button-default: var(--x-font-family-text);
8632
- --x-size-font-button-default: var(--x-size-font-text);
8633
- --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
8634
- --x-size-line-height-button-default: var(--x-size-line-height-text);
8635
- }
8636
-
8637
- [dir="ltr"] .x-button {
8638
- padding-right: var(--x-size-padding-right-button-default);
8639
- }
8640
-
8641
- [dir="rtl"] .x-button {
8642
- padding-left: var(--x-size-padding-right-button-default);
8643
- }
8644
-
8645
- [dir="ltr"] .x-button {
8646
- padding-left: var(--x-size-padding-left-button-default);
8647
- }
8648
-
8649
- [dir="rtl"] .x-button {
8650
- padding-right: var(--x-size-padding-left-button-default);
8651
- }
8652
-
8653
- [dir="ltr"] .x-button {
8654
- border-left-width: var(--x-size-border-width-left-button-default);
8655
- }
8656
-
8657
- [dir="rtl"] .x-button {
8658
- border-right-width: var(--x-size-border-width-left-button-default);
8659
- }
8660
-
8661
- [dir="ltr"] .x-button {
8662
- border-right-width: var(--x-size-border-width-right-button-default);
8663
- }
8664
-
8665
- [dir="rtl"] .x-button {
8666
- border-left-width: var(--x-size-border-width-right-button-default);
8667
- }
8668
-
8669
- .x-button {
8670
- display: inline-flex;
8671
- justify-content: center;
8672
- align-items: center;
8673
- box-sizing: border-box;
8674
- margin: 0;
8675
- gap: var(--x-size-gap-button-default);
8676
- min-height: var(--x-size-height-button-default);
8677
- background-color: var(--x-color-background-button-default);
8678
- border-color: var(--x-color-border-button-default);
8679
- color: var(--x-color-text-button-default);
8680
- border-style: solid;
8681
- border-top-width: var(--x-size-border-width-top-button-default);
8682
- border-bottom-width: var(--x-size-border-width-bottom-button-default);
8683
- border-radius: var(--x-size-border-radius-top-left-button-default) var(--x-size-border-radius-top-right-button-default) var(--x-size-border-radius-bottom-right-button-default) var(--x-size-border-radius-bottom-left-button-default);
8684
- font-family: var(--x-font-family-button-default);
8685
- font-size: var(--x-size-font-button-default);
8686
- font-weight: var(--x-number-font-weight-button-default);
8687
- line-height: var(--x-size-line-height-button-default);
8688
- cursor: pointer;
8689
- }
8690
- @media not all and (min-resolution: 0.001dpcm) {
8691
- .x-button {
8692
- gap: 0;
8693
- }
8694
- .x-button > *:not(:last-child) {
8695
- margin-right: var(--x-size-gap-button-default);
8696
- }
8697
- }
8698
8614
  :root {
8699
8615
  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8700
8616
  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
@@ -8825,3 +8741,88 @@
8825
8741
  --x-size-border-radius-base-pill: 99999px;
8826
8742
  --x-size-border-width-base: 1px;
8827
8743
  }
8744
+ :root {
8745
+ --x-color-background-button-default: var(--x-color-base-lead);
8746
+ --x-color-border-button-default: var(--x-color-background-button-default);
8747
+ --x-color-text-button-default: var(--x-color-base-neutral-100);
8748
+ --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
8749
+ --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
8750
+ --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
8751
+ --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
8752
+ --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
8753
+ --x-size-border-width-button-default: var(--x-size-border-width-base);
8754
+ --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
8755
+ --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
8756
+ --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
8757
+ --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
8758
+ --x-size-height-button-default: var(--x-size-base-08);
8759
+ --x-size-padding-right-button-default: var(--x-size-base-05);
8760
+ --x-size-padding-left-button-default: var(--x-size-base-05);
8761
+ --x-size-gap-button-default: var(--x-size-base-03);
8762
+ --x-font-family-button-default: var(--x-font-family-text);
8763
+ --x-size-font-button-default: var(--x-size-font-text);
8764
+ --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
8765
+ --x-size-line-height-button-default: var(--x-size-line-height-text);
8766
+ }
8767
+
8768
+ [dir="ltr"] .x-button {
8769
+ padding-right: var(--x-size-padding-right-button-default);
8770
+ }
8771
+
8772
+ [dir="rtl"] .x-button {
8773
+ padding-left: var(--x-size-padding-right-button-default);
8774
+ }
8775
+
8776
+ [dir="ltr"] .x-button {
8777
+ padding-left: var(--x-size-padding-left-button-default);
8778
+ }
8779
+
8780
+ [dir="rtl"] .x-button {
8781
+ padding-right: var(--x-size-padding-left-button-default);
8782
+ }
8783
+
8784
+ [dir="ltr"] .x-button {
8785
+ border-left-width: var(--x-size-border-width-left-button-default);
8786
+ }
8787
+
8788
+ [dir="rtl"] .x-button {
8789
+ border-right-width: var(--x-size-border-width-left-button-default);
8790
+ }
8791
+
8792
+ [dir="ltr"] .x-button {
8793
+ border-right-width: var(--x-size-border-width-right-button-default);
8794
+ }
8795
+
8796
+ [dir="rtl"] .x-button {
8797
+ border-left-width: var(--x-size-border-width-right-button-default);
8798
+ }
8799
+
8800
+ .x-button {
8801
+ display: inline-flex;
8802
+ justify-content: center;
8803
+ align-items: center;
8804
+ box-sizing: border-box;
8805
+ margin: 0;
8806
+ gap: var(--x-size-gap-button-default);
8807
+ min-height: var(--x-size-height-button-default);
8808
+ background-color: var(--x-color-background-button-default);
8809
+ border-color: var(--x-color-border-button-default);
8810
+ color: var(--x-color-text-button-default);
8811
+ border-style: solid;
8812
+ border-top-width: var(--x-size-border-width-top-button-default);
8813
+ border-bottom-width: var(--x-size-border-width-bottom-button-default);
8814
+ border-radius: var(--x-size-border-radius-top-left-button-default) var(--x-size-border-radius-top-right-button-default) var(--x-size-border-radius-bottom-right-button-default) var(--x-size-border-radius-bottom-left-button-default);
8815
+ font-family: var(--x-font-family-button-default);
8816
+ font-size: var(--x-size-font-button-default);
8817
+ font-weight: var(--x-number-font-weight-button-default);
8818
+ line-height: var(--x-size-line-height-button-default);
8819
+ cursor: pointer;
8820
+ }
8821
+ @media not all and (min-resolution: 0.001dpcm) {
8822
+ .x-button {
8823
+ gap: 0;
8824
+ }
8825
+ .x-button > *:not(:last-child) {
8826
+ margin-right: var(--x-size-gap-button-default);
8827
+ }
8828
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "6.0.0-alpha.13",
3
+ "version": "6.0.0-alpha.14",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -92,7 +92,7 @@
92
92
  "devDependencies": {
93
93
  "@badeball/cypress-cucumber-preprocessor": "~20.0.0",
94
94
  "@bahmutov/cypress-esbuild-preprocessor": "~2.2.0",
95
- "@empathyco/x-tailwindcss": "^1.2.0-alpha.7",
95
+ "@empathyco/x-tailwindcss": "^2.0.0-alpha.0",
96
96
  "@microsoft/api-documenter": "~7.23.0",
97
97
  "@microsoft/api-extractor": "~7.39.0",
98
98
  "@testing-library/jest-dom": "~5.17.0",
@@ -138,5 +138,5 @@
138
138
  "access": "public",
139
139
  "directory": "dist"
140
140
  },
141
- "gitHead": "f0c59600ffe3896e7deace3d445b055875947c2c"
141
+ "gitHead": "2a3ee53a17b9b384d9484e12de4690598cab3aa2"
142
142
  }