@aws-amplify/ui-react 6.3.1 → 6.5.0

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 (35) hide show
  1. package/dist/{ThemeStyle-b2dce96a.js → ThemeStyle-1fee4302.js} +19 -10
  2. package/dist/esm/PrimitiveCatalog.mjs +3 -0
  3. package/dist/esm/components/ThemeProvider/ComponentStyle.mjs +23 -0
  4. package/dist/esm/components/ThemeProvider/Style.mjs +64 -0
  5. package/dist/esm/components/ThemeProvider/ThemeStyle.mjs +2 -53
  6. package/dist/esm/primitives/Avatar/Avatar.mjs +5 -2
  7. package/dist/esm/server.mjs +1 -0
  8. package/dist/esm/version.mjs +1 -1
  9. package/dist/index.js +6 -4
  10. package/dist/internal.js +3 -0
  11. package/dist/server.js +49 -13
  12. package/dist/styles/avatar.css +20 -0
  13. package/dist/styles/avatar.layer.css +20 -0
  14. package/dist/styles/breadcrumbs.css +4 -2
  15. package/dist/styles/breadcrumbs.layer.css +4 -2
  16. package/dist/styles/button.css +19 -10
  17. package/dist/styles/button.layer.css +19 -10
  18. package/dist/styles/input.css +3 -2
  19. package/dist/styles/input.layer.css +3 -2
  20. package/dist/styles/link.css +10 -5
  21. package/dist/styles/link.layer.css +10 -5
  22. package/dist/styles/reset.css +4 -1
  23. package/dist/styles/reset.layer.css +4 -1
  24. package/dist/styles/sliderField.css +3 -2
  25. package/dist/styles/sliderField.layer.css +3 -2
  26. package/dist/styles/textArea.css +3 -2
  27. package/dist/styles/textArea.layer.css +3 -2
  28. package/dist/styles.css +62 -23
  29. package/dist/styles.layer.css +62 -23
  30. package/dist/types/components/ThemeProvider/ComponentStyle.d.ts +20 -0
  31. package/dist/types/components/ThemeProvider/Style.d.ts +11 -0
  32. package/dist/types/primitives/Avatar/types.d.ts +5 -0
  33. package/dist/types/server.d.ts +1 -0
  34. package/dist/types/version.d.ts +1 -1
  35. package/package.json +3 -3
package/dist/styles/button.layer.css CHANGED
@@ -35,8 +35,9 @@
35
35
  padding-inline-start: var(--amplify-components-button-padding-inline-start);
36
36
  padding-inline-end: var(--amplify-components-button-padding-inline-end);
37
37
  transition: all var(--amplify-components-button-transition-duration);
38
- -moz-user-select: none;
39
- user-select: none;
38
+ -webkit-user-select: none;
39
+ -moz-user-select: none;
40
+ user-select: none;
40
41
  --amplify-internal-button-disabled-color: var(
41
42
  --amplify-components-button-disabled-color
42
43
  );
@@ -1057,50 +1058,58 @@
1057
1058
  background-color: var(--amplify-internal-button-disabled-background-color);
1058
1059
  border-color: var(--amplify-internal-button-disabled-border-color);
1059
1060
  color: var(--amplify-internal-button-disabled-color);
1060
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1061
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1062
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1061
1063
  cursor: not-allowed;
1062
1064
  }
1063
1065
  .amplify-button--disabled:hover {
1064
1066
  background-color: var(--amplify-internal-button-disabled-background-color);
1065
1067
  border-color: var(--amplify-internal-button-disabled-border-color);
1066
1068
  color: var(--amplify-internal-button-disabled-color);
1067
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1069
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1070
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1068
1071
  }
1069
1072
  .amplify-button--disabled :focus {
1070
1073
  background-color: var(--amplify-internal-button-disabled-background-color);
1071
1074
  border-color: var(--amplify-internal-button-disabled-border-color);
1072
1075
  color: var(--amplify-internal-button-disabled-color);
1073
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1076
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1077
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1074
1078
  }
1075
1079
  .amplify-button--disabled:active {
1076
1080
  background-color: var(--amplify-internal-button-disabled-background-color);
1077
1081
  border-color: var(--amplify-internal-button-disabled-border-color);
1078
1082
  color: var(--amplify-internal-button-disabled-color);
1079
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1083
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1084
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1080
1085
  }
1081
1086
  .amplify-button--loading {
1082
1087
  background-color: var(--amplify-internal-button-loading-background-color);
1083
1088
  border-color: var(--amplify-internal-button-loading-border-color);
1084
1089
  color: var(--amplify-components-button-loading-color);
1085
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
1090
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
1091
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
1086
1092
  }
1087
1093
  .amplify-button--loading:hover {
1088
1094
  background-color: var(--amplify-internal-button-loading-background-color);
1089
1095
  border-color: var(--amplify-internal-button-loading-border-color);
1090
1096
  color: var(--amplify-components-button-loading-color);
1091
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
1097
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
1098
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
1092
1099
  }
1093
1100
  .amplify-button--loading:focus {
1094
1101
  background-color: var(--amplify-internal-button-loading-background-color);
1095
1102
  border-color: var(--amplify-internal-button-loading-border-color);
1096
1103
  color: var(--amplify-components-button-loading-color);
1097
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
1104
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
1105
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
1098
1106
  }
1099
1107
  .amplify-button--loading:active {
1100
1108
  background-color: var(--amplify-internal-button-loading-background-color);
1101
1109
  border-color: var(--amplify-internal-button-loading-border-color);
1102
1110
  color: var(--amplify-components-button-loading-color);
1103
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
1111
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
1112
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
1104
1113
  }
1105
1114
  .amplify-button__loader-wrapper {
1106
1115
  align-items: var(--amplify-components-button-loader-wrapper-align-items);
package/dist/styles/input.css CHANGED
@@ -17,8 +17,9 @@
17
17
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
18
18
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
19
19
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
20
- -moz-user-select: text;
21
- user-select: text;
20
+ -webkit-user-select: text;
21
+ -moz-user-select: text;
22
+ user-select: text;
22
23
  display: inline-block;
23
24
  --amplify-components-fieldcontrol-color: var(
24
25
  --amplify-components-input-color
package/dist/styles/input.layer.css CHANGED
@@ -18,8 +18,9 @@
18
18
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
19
19
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
20
20
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
21
- -moz-user-select: text;
22
- user-select: text;
21
+ -webkit-user-select: text;
22
+ -moz-user-select: text;
23
+ user-select: text;
23
24
  display: inline-block;
24
25
  --amplify-components-fieldcontrol-color: var(
25
26
  --amplify-components-input-color
package/dist/styles/link.css CHANGED
@@ -1,21 +1,26 @@
1
1
  .amplify-link {
2
2
  color: var(--amplify-components-link-color);
3
- text-decoration: var(--amplify-components-link-text-decoration);
3
+ -webkit-text-decoration: var(--amplify-components-link-text-decoration);
4
+ text-decoration: var(--amplify-components-link-text-decoration);
4
5
  cursor: pointer;
5
6
  }
6
7
  .amplify-link:visited {
7
8
  color: var(--amplify-components-link-visited-color);
8
- text-decoration: var(--amplify-components-link-visited-text-decoration);
9
+ -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
10
+ text-decoration: var(--amplify-components-link-visited-text-decoration);
9
11
  }
10
12
  .amplify-link:active {
11
13
  color: var(--amplify-components-link-active-color);
12
- text-decoration: var(--amplify-components-link-active-text-decoration);
14
+ -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
15
+ text-decoration: var(--amplify-components-link-active-text-decoration);
13
16
  }
14
17
  .amplify-link:focus {
15
18
  color: var(--amplify-components-link-focus-color);
16
- text-decoration: var(--amplify-components-link-focus-text-decoration);
19
+ -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
20
+ text-decoration: var(--amplify-components-link-focus-text-decoration);
17
21
  }
18
22
  .amplify-link:hover {
19
23
  color: var(--amplify-components-link-hover-color);
20
- text-decoration: var(--amplify-components-link-hover-text-decoration);
24
+ -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
25
+ text-decoration: var(--amplify-components-link-hover-text-decoration);
21
26
  }
package/dist/styles/link.layer.css CHANGED
@@ -1,23 +1,28 @@
1
1
  @layer amplify.components {
2
2
  .amplify-link {
3
3
  color: var(--amplify-components-link-color);
4
- text-decoration: var(--amplify-components-link-text-decoration);
4
+ -webkit-text-decoration: var(--amplify-components-link-text-decoration);
5
+ text-decoration: var(--amplify-components-link-text-decoration);
5
6
  cursor: pointer;
6
7
  }
7
8
  .amplify-link:visited {
8
9
  color: var(--amplify-components-link-visited-color);
9
- text-decoration: var(--amplify-components-link-visited-text-decoration);
10
+ -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
11
+ text-decoration: var(--amplify-components-link-visited-text-decoration);
10
12
  }
11
13
  .amplify-link:active {
12
14
  color: var(--amplify-components-link-active-color);
13
- text-decoration: var(--amplify-components-link-active-text-decoration);
15
+ -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
16
+ text-decoration: var(--amplify-components-link-active-text-decoration);
14
17
  }
15
18
  .amplify-link:focus {
16
19
  color: var(--amplify-components-link-focus-color);
17
- text-decoration: var(--amplify-components-link-focus-text-decoration);
20
+ -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
21
+ text-decoration: var(--amplify-components-link-focus-text-decoration);
18
22
  }
19
23
  .amplify-link:hover {
20
24
  color: var(--amplify-components-link-hover-color);
21
- text-decoration: var(--amplify-components-link-hover-text-decoration);
25
+ -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
26
+ text-decoration: var(--amplify-components-link-hover-text-decoration);
22
27
  }
23
28
  }
package/dist/styles/reset.css CHANGED
@@ -6,6 +6,8 @@
6
6
 
7
7
  html:focus-within {
8
8
  scroll-behavior: smooth;
9
+ -moz-text-size-adjust: none;
10
+ -webkit-text-size-adjust: none;
9
11
  text-size-adjust: none;
10
12
  }
11
13
 
@@ -52,7 +54,8 @@ picture {
52
54
  }
53
55
 
54
56
  a:not([class]) {
55
- text-decoration-skip-ink: auto;
57
+ -webkit-text-decoration-skip: ink;
58
+ text-decoration-skip-ink: auto;
56
59
  color: currentColor;
57
60
  }
58
61
 
package/dist/styles/reset.layer.css CHANGED
@@ -7,6 +7,8 @@
7
7
 
8
8
  html:focus-within {
9
9
  scroll-behavior: smooth;
10
+ -moz-text-size-adjust: none;
11
+ -webkit-text-size-adjust: none;
10
12
  text-size-adjust: none;
11
13
  }
12
14
 
@@ -53,7 +55,8 @@ picture {
53
55
  }
54
56
 
55
57
  a:not([class]) {
56
- text-decoration-skip-ink: auto;
58
+ -webkit-text-decoration-skip: ink;
59
+ text-decoration-skip-ink: auto;
57
60
  color: currentColor;
58
61
  }
59
62
 
package/dist/styles/sliderField.css CHANGED
@@ -14,8 +14,9 @@
14
14
  padding-block: var(--amplify-components-sliderfield-padding-block);
15
15
  position: relative;
16
16
  touch-action: none;
17
- -moz-user-select: none;
18
- user-select: none;
17
+ -webkit-user-select: none;
18
+ -moz-user-select: none;
19
+ user-select: none;
19
20
  --amplify-internal-sliderfield-root-height: var(
20
21
  --amplify-components-sliderfield-thumb-height
21
22
  );
package/dist/styles/sliderField.layer.css CHANGED
@@ -15,8 +15,9 @@
15
15
  padding-block: var(--amplify-components-sliderfield-padding-block);
16
16
  position: relative;
17
17
  touch-action: none;
18
- -moz-user-select: none;
19
- user-select: none;
18
+ -webkit-user-select: none;
19
+ -moz-user-select: none;
20
+ user-select: none;
20
21
  --amplify-internal-sliderfield-root-height: var(
21
22
  --amplify-components-sliderfield-thumb-height
22
23
  );
package/dist/styles/textArea.css CHANGED
@@ -17,8 +17,9 @@
17
17
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
18
18
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
19
19
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
20
- -moz-user-select: text;
21
- user-select: text;
20
+ -webkit-user-select: text;
21
+ -moz-user-select: text;
22
+ user-select: text;
22
23
  white-space: pre-wrap;
23
24
  }
24
25
  .amplify-textarea:focus {
package/dist/styles/textArea.layer.css CHANGED
@@ -18,8 +18,9 @@
18
18
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
19
19
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
20
20
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
21
- -moz-user-select: text;
22
- user-select: text;
21
+ -webkit-user-select: text;
22
+ -moz-user-select: text;
23
+ user-select: text;
23
24
  white-space: pre-wrap;
24
25
  }
25
26
  .amplify-textarea:focus {
package/dist/styles.css CHANGED
@@ -1730,8 +1730,9 @@ strong.amplify-text {
1730
1730
  padding-inline-start: var(--amplify-components-button-padding-inline-start);
1731
1731
  padding-inline-end: var(--amplify-components-button-padding-inline-end);
1732
1732
  transition: all var(--amplify-components-button-transition-duration);
1733
- -moz-user-select: none;
1734
- user-select: none;
1733
+ -webkit-user-select: none;
1734
+ -moz-user-select: none;
1735
+ user-select: none;
1735
1736
  --amplify-internal-button-disabled-color: var(
1736
1737
  --amplify-components-button-disabled-color
1737
1738
  );
@@ -2752,50 +2753,58 @@ strong.amplify-text {
2752
2753
  background-color: var(--amplify-internal-button-disabled-background-color);
2753
2754
  border-color: var(--amplify-internal-button-disabled-border-color);
2754
2755
  color: var(--amplify-internal-button-disabled-color);
2755
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2756
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2757
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2756
2758
  cursor: not-allowed;
2757
2759
  }
2758
2760
  .amplify-button--disabled:hover {
2759
2761
  background-color: var(--amplify-internal-button-disabled-background-color);
2760
2762
  border-color: var(--amplify-internal-button-disabled-border-color);
2761
2763
  color: var(--amplify-internal-button-disabled-color);
2762
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2764
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2765
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2763
2766
  }
2764
2767
  .amplify-button--disabled :focus {
2765
2768
  background-color: var(--amplify-internal-button-disabled-background-color);
2766
2769
  border-color: var(--amplify-internal-button-disabled-border-color);
2767
2770
  color: var(--amplify-internal-button-disabled-color);
2768
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2771
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2772
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2769
2773
  }
2770
2774
  .amplify-button--disabled:active {
2771
2775
  background-color: var(--amplify-internal-button-disabled-background-color);
2772
2776
  border-color: var(--amplify-internal-button-disabled-border-color);
2773
2777
  color: var(--amplify-internal-button-disabled-color);
2774
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2778
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2779
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2775
2780
  }
2776
2781
  .amplify-button--loading {
2777
2782
  background-color: var(--amplify-internal-button-loading-background-color);
2778
2783
  border-color: var(--amplify-internal-button-loading-border-color);
2779
2784
  color: var(--amplify-components-button-loading-color);
2780
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
2785
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
2786
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
2781
2787
  }
2782
2788
  .amplify-button--loading:hover {
2783
2789
  background-color: var(--amplify-internal-button-loading-background-color);
2784
2790
  border-color: var(--amplify-internal-button-loading-border-color);
2785
2791
  color: var(--amplify-components-button-loading-color);
2786
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
2792
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
2793
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
2787
2794
  }
2788
2795
  .amplify-button--loading:focus {
2789
2796
  background-color: var(--amplify-internal-button-loading-background-color);
2790
2797
  border-color: var(--amplify-internal-button-loading-border-color);
2791
2798
  color: var(--amplify-components-button-loading-color);
2792
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
2799
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
2800
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
2793
2801
  }
2794
2802
  .amplify-button--loading:active {
2795
2803
  background-color: var(--amplify-internal-button-loading-background-color);
2796
2804
  border-color: var(--amplify-internal-button-loading-border-color);
2797
2805
  color: var(--amplify-components-button-loading-color);
2798
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
2806
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
2807
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
2799
2808
  }
2800
2809
  .amplify-button__loader-wrapper {
2801
2810
  align-items: var(--amplify-components-button-loader-wrapper-align-items);
@@ -2943,8 +2952,9 @@ strong.amplify-text {
2943
2952
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
2944
2953
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
2945
2954
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
2946
- -moz-user-select: text;
2947
- user-select: text;
2955
+ -webkit-user-select: text;
2956
+ -moz-user-select: text;
2957
+ user-select: text;
2948
2958
  display: inline-block;
2949
2959
  --amplify-components-fieldcontrol-color: var(
2950
2960
  --amplify-components-input-color
@@ -3027,8 +3037,9 @@ strong.amplify-text {
3027
3037
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
3028
3038
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
3029
3039
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
3030
- -moz-user-select: text;
3031
- user-select: text;
3040
+ -webkit-user-select: text;
3041
+ -moz-user-select: text;
3042
+ user-select: text;
3032
3043
  white-space: pre-wrap;
3033
3044
  }
3034
3045
  .amplify-textarea:focus {
@@ -3092,24 +3103,29 @@ strong.amplify-text {
3092
3103
 
3093
3104
  .amplify-link {
3094
3105
  color: var(--amplify-components-link-color);
3095
- text-decoration: var(--amplify-components-link-text-decoration);
3106
+ -webkit-text-decoration: var(--amplify-components-link-text-decoration);
3107
+ text-decoration: var(--amplify-components-link-text-decoration);
3096
3108
  cursor: pointer;
3097
3109
  }
3098
3110
  .amplify-link:visited {
3099
3111
  color: var(--amplify-components-link-visited-color);
3100
- text-decoration: var(--amplify-components-link-visited-text-decoration);
3112
+ -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
3113
+ text-decoration: var(--amplify-components-link-visited-text-decoration);
3101
3114
  }
3102
3115
  .amplify-link:active {
3103
3116
  color: var(--amplify-components-link-active-color);
3104
- text-decoration: var(--amplify-components-link-active-text-decoration);
3117
+ -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
3118
+ text-decoration: var(--amplify-components-link-active-text-decoration);
3105
3119
  }
3106
3120
  .amplify-link:focus {
3107
3121
  color: var(--amplify-components-link-focus-color);
3108
- text-decoration: var(--amplify-components-link-focus-text-decoration);
3122
+ -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
3123
+ text-decoration: var(--amplify-components-link-focus-text-decoration);
3109
3124
  }
3110
3125
  .amplify-link:hover {
3111
3126
  color: var(--amplify-components-link-hover-color);
3112
- text-decoration: var(--amplify-components-link-hover-text-decoration);
3127
+ -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
3128
+ text-decoration: var(--amplify-components-link-hover-text-decoration);
3113
3129
  }
3114
3130
 
3115
3131
  .amplify-loader {
@@ -3519,6 +3535,7 @@ strong.amplify-text {
3519
3535
  --avatar-border-color: var(--amplify-components-avatar-border-color);
3520
3536
  --avatar-size: var(--amplify-components-avatar-width);
3521
3537
  --amplify-components-icon-height: 100%;
3538
+ position: relative;
3522
3539
  display: inline-flex;
3523
3540
  align-items: center;
3524
3541
  justify-content: center;
@@ -3569,6 +3586,9 @@ strong.amplify-text {
3569
3586
  --avatar-filled-color: var(
3570
3587
  --amplify-components-avatar-warning-background-color
3571
3588
  );
3589
+ --amplify-components-loader-stroke-filled: var(
3590
+ --amplify-components-avatar-warning-color
3591
+ );
3572
3592
  }
3573
3593
  .amplify-avatar--error {
3574
3594
  --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -3582,6 +3602,9 @@ strong.amplify-text {
3582
3602
  --avatar-filled-color: var(
3583
3603
  --amplify-components-avatar-error-background-color
3584
3604
  );
3605
+ --amplify-components-loader-stroke-filled: var(
3606
+ --amplify-components-avatar-error-color
3607
+ );
3585
3608
  }
3586
3609
  .amplify-avatar--info {
3587
3610
  --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -3595,6 +3618,9 @@ strong.amplify-text {
3595
3618
  --avatar-filled-color: var(
3596
3619
  --amplify-components-avatar-info-background-color
3597
3620
  );
3621
+ --amplify-components-loader-stroke-filled: var(
3622
+ --amplify-components-avatar-info-color
3623
+ );
3598
3624
  }
3599
3625
  .amplify-avatar--success {
3600
3626
  --avatar-border-color: var(
@@ -3610,6 +3636,9 @@ strong.amplify-text {
3610
3636
  --avatar-filled-color: var(
3611
3637
  --amplify-components-avatar-success-background-color
3612
3638
  );
3639
+ --amplify-components-loader-stroke-filled: var(
3640
+ --amplify-components-avatar-success-color
3641
+ );
3613
3642
  }
3614
3643
  .amplify-avatar__icon {
3615
3644
  display: flex;
@@ -3622,6 +3651,13 @@ strong.amplify-text {
3622
3651
  object-fit: cover;
3623
3652
  display: block;
3624
3653
  }
3654
+ .amplify-avatar__loader {
3655
+ position: absolute;
3656
+ inset: 0;
3657
+ width: 100%;
3658
+ height: 100%;
3659
+ stroke: transparent;
3660
+ }
3625
3661
 
3626
3662
  .amplify-breadcrumbs__list {
3627
3663
  display: flex;
@@ -3652,14 +3688,16 @@ strong.amplify-text {
3652
3688
  font-weight: var(--amplify-components-breadcrumbs-link-font-weight);
3653
3689
  padding-inline: var(--amplify-components-breadcrumbs-link-padding-inline);
3654
3690
  padding-block: var(--amplify-components-breadcrumbs-link-padding-block);
3655
- text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
3691
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
3692
+ text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
3656
3693
  }
3657
3694
 
3658
3695
  .amplify-breadcrumbs__link--current {
3659
3696
  color: var(--amplify-components-breadcrumbs-link-current-color);
3660
3697
  font-size: var(--amplify-components-breadcrumbs-link-current-font-size);
3661
3698
  font-weight: var(--amplify-components-breadcrumbs-link-current-font-weight);
3662
- text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
3699
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
3700
+ text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
3663
3701
  }
3664
3702
 
3665
3703
  .amplify-card {
@@ -5209,8 +5247,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
5209
5247
  padding-block: var(--amplify-components-sliderfield-padding-block);
5210
5248
  position: relative;
5211
5249
  touch-action: none;
5212
- -moz-user-select: none;
5213
- user-select: none;
5250
+ -webkit-user-select: none;
5251
+ -moz-user-select: none;
5252
+ user-select: none;
5214
5253
  --amplify-internal-sliderfield-root-height: var(
5215
5254
  --amplify-components-sliderfield-thumb-height
5216
5255
  );