@aws-amplify/ui 6.4.1 → 6.6.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 (33) hide show
  1. package/dist/esm/i18n/dictionaries/authenticator/es.mjs +17 -0
  2. package/dist/esm/i18n/dictionaries/authenticator/fr.mjs +14 -3
  3. package/dist/esm/index.mjs +1 -0
  4. package/dist/esm/theme/createTheme/createComponentCSS.mjs +2 -1
  5. package/dist/esm/theme/createTheme/createTheme.mjs +7 -1
  6. package/dist/esm/theme/createTheme/defineComponentTheme.mjs +8 -0
  7. package/dist/esm/types/primitives/componentClassName.mjs +1 -0
  8. package/dist/index.js +49 -5
  9. package/dist/styles/avatar.css +20 -0
  10. package/dist/styles/avatar.layer.css +20 -0
  11. package/dist/styles/breadcrumbs.css +4 -2
  12. package/dist/styles/breadcrumbs.layer.css +4 -2
  13. package/dist/styles/button.css +19 -10
  14. package/dist/styles/button.layer.css +19 -10
  15. package/dist/styles/input.css +3 -2
  16. package/dist/styles/input.layer.css +3 -2
  17. package/dist/styles/link.css +10 -5
  18. package/dist/styles/link.layer.css +10 -5
  19. package/dist/styles/reset.css +4 -1
  20. package/dist/styles/reset.layer.css +4 -1
  21. package/dist/styles/sliderField.css +3 -2
  22. package/dist/styles/sliderField.layer.css +3 -2
  23. package/dist/styles/textArea.css +3 -2
  24. package/dist/styles/textArea.layer.css +3 -2
  25. package/dist/styles.css +62 -23
  26. package/dist/styles.layer.css +62 -23
  27. package/dist/types/theme/components/avatar.d.ts +1 -0
  28. package/dist/types/theme/createTheme/createComponentCSS.d.ts +7 -2
  29. package/dist/types/theme/createTheme/defineComponentTheme.d.ts +4 -0
  30. package/dist/types/theme/createTheme/index.d.ts +1 -0
  31. package/dist/types/theme/index.d.ts +2 -1
  32. package/dist/types/types/primitives/componentClassName.d.ts +1 -0
  33. package/package.json +1 -1
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
  );
package/dist/styles.layer.css CHANGED
@@ -1731,8 +1731,9 @@ strong.amplify-text {
1731
1731
  padding-inline-start: var(--amplify-components-button-padding-inline-start);
1732
1732
  padding-inline-end: var(--amplify-components-button-padding-inline-end);
1733
1733
  transition: all var(--amplify-components-button-transition-duration);
1734
- -moz-user-select: none;
1735
- user-select: none;
1734
+ -webkit-user-select: none;
1735
+ -moz-user-select: none;
1736
+ user-select: none;
1736
1737
  --amplify-internal-button-disabled-color: var(
1737
1738
  --amplify-components-button-disabled-color
1738
1739
  );
@@ -2753,50 +2754,58 @@ strong.amplify-text {
2753
2754
  background-color: var(--amplify-internal-button-disabled-background-color);
2754
2755
  border-color: var(--amplify-internal-button-disabled-border-color);
2755
2756
  color: var(--amplify-internal-button-disabled-color);
2756
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2757
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2758
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2757
2759
  cursor: not-allowed;
2758
2760
  }
2759
2761
  .amplify-button--disabled:hover {
2760
2762
  background-color: var(--amplify-internal-button-disabled-background-color);
2761
2763
  border-color: var(--amplify-internal-button-disabled-border-color);
2762
2764
  color: var(--amplify-internal-button-disabled-color);
2763
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2765
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2766
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2764
2767
  }
2765
2768
  .amplify-button--disabled :focus {
2766
2769
  background-color: var(--amplify-internal-button-disabled-background-color);
2767
2770
  border-color: var(--amplify-internal-button-disabled-border-color);
2768
2771
  color: var(--amplify-internal-button-disabled-color);
2769
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2772
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2773
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2770
2774
  }
2771
2775
  .amplify-button--disabled:active {
2772
2776
  background-color: var(--amplify-internal-button-disabled-background-color);
2773
2777
  border-color: var(--amplify-internal-button-disabled-border-color);
2774
2778
  color: var(--amplify-internal-button-disabled-color);
2775
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2779
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2780
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2776
2781
  }
2777
2782
  .amplify-button--loading {
2778
2783
  background-color: var(--amplify-internal-button-loading-background-color);
2779
2784
  border-color: var(--amplify-internal-button-loading-border-color);
2780
2785
  color: var(--amplify-components-button-loading-color);
2781
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
2786
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
2787
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
2782
2788
  }
2783
2789
  .amplify-button--loading:hover {
2784
2790
  background-color: var(--amplify-internal-button-loading-background-color);
2785
2791
  border-color: var(--amplify-internal-button-loading-border-color);
2786
2792
  color: var(--amplify-components-button-loading-color);
2787
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
2793
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
2794
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
2788
2795
  }
2789
2796
  .amplify-button--loading:focus {
2790
2797
  background-color: var(--amplify-internal-button-loading-background-color);
2791
2798
  border-color: var(--amplify-internal-button-loading-border-color);
2792
2799
  color: var(--amplify-components-button-loading-color);
2793
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
2800
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
2801
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
2794
2802
  }
2795
2803
  .amplify-button--loading:active {
2796
2804
  background-color: var(--amplify-internal-button-loading-background-color);
2797
2805
  border-color: var(--amplify-internal-button-loading-border-color);
2798
2806
  color: var(--amplify-components-button-loading-color);
2799
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
2807
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
2808
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
2800
2809
  }
2801
2810
  .amplify-button__loader-wrapper {
2802
2811
  align-items: var(--amplify-components-button-loader-wrapper-align-items);
@@ -2944,8 +2953,9 @@ strong.amplify-text {
2944
2953
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
2945
2954
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
2946
2955
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
2947
- -moz-user-select: text;
2948
- user-select: text;
2956
+ -webkit-user-select: text;
2957
+ -moz-user-select: text;
2958
+ user-select: text;
2949
2959
  display: inline-block;
2950
2960
  --amplify-components-fieldcontrol-color: var(
2951
2961
  --amplify-components-input-color
@@ -3028,8 +3038,9 @@ strong.amplify-text {
3028
3038
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
3029
3039
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
3030
3040
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
3031
- -moz-user-select: text;
3032
- user-select: text;
3041
+ -webkit-user-select: text;
3042
+ -moz-user-select: text;
3043
+ user-select: text;
3033
3044
  white-space: pre-wrap;
3034
3045
  }
3035
3046
  .amplify-textarea:focus {
@@ -3093,24 +3104,29 @@ strong.amplify-text {
3093
3104
 
3094
3105
  .amplify-link {
3095
3106
  color: var(--amplify-components-link-color);
3096
- text-decoration: var(--amplify-components-link-text-decoration);
3107
+ -webkit-text-decoration: var(--amplify-components-link-text-decoration);
3108
+ text-decoration: var(--amplify-components-link-text-decoration);
3097
3109
  cursor: pointer;
3098
3110
  }
3099
3111
  .amplify-link:visited {
3100
3112
  color: var(--amplify-components-link-visited-color);
3101
- text-decoration: var(--amplify-components-link-visited-text-decoration);
3113
+ -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
3114
+ text-decoration: var(--amplify-components-link-visited-text-decoration);
3102
3115
  }
3103
3116
  .amplify-link:active {
3104
3117
  color: var(--amplify-components-link-active-color);
3105
- text-decoration: var(--amplify-components-link-active-text-decoration);
3118
+ -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
3119
+ text-decoration: var(--amplify-components-link-active-text-decoration);
3106
3120
  }
3107
3121
  .amplify-link:focus {
3108
3122
  color: var(--amplify-components-link-focus-color);
3109
- text-decoration: var(--amplify-components-link-focus-text-decoration);
3123
+ -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
3124
+ text-decoration: var(--amplify-components-link-focus-text-decoration);
3110
3125
  }
3111
3126
  .amplify-link:hover {
3112
3127
  color: var(--amplify-components-link-hover-color);
3113
- text-decoration: var(--amplify-components-link-hover-text-decoration);
3128
+ -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
3129
+ text-decoration: var(--amplify-components-link-hover-text-decoration);
3114
3130
  }
3115
3131
 
3116
3132
  .amplify-loader {
@@ -3520,6 +3536,7 @@ strong.amplify-text {
3520
3536
  --avatar-border-color: var(--amplify-components-avatar-border-color);
3521
3537
  --avatar-size: var(--amplify-components-avatar-width);
3522
3538
  --amplify-components-icon-height: 100%;
3539
+ position: relative;
3523
3540
  display: inline-flex;
3524
3541
  align-items: center;
3525
3542
  justify-content: center;
@@ -3570,6 +3587,9 @@ strong.amplify-text {
3570
3587
  --avatar-filled-color: var(
3571
3588
  --amplify-components-avatar-warning-background-color
3572
3589
  );
3590
+ --amplify-components-loader-stroke-filled: var(
3591
+ --amplify-components-avatar-warning-color
3592
+ );
3573
3593
  }
3574
3594
  .amplify-avatar--error {
3575
3595
  --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -3583,6 +3603,9 @@ strong.amplify-text {
3583
3603
  --avatar-filled-color: var(
3584
3604
  --amplify-components-avatar-error-background-color
3585
3605
  );
3606
+ --amplify-components-loader-stroke-filled: var(
3607
+ --amplify-components-avatar-error-color
3608
+ );
3586
3609
  }
3587
3610
  .amplify-avatar--info {
3588
3611
  --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -3596,6 +3619,9 @@ strong.amplify-text {
3596
3619
  --avatar-filled-color: var(
3597
3620
  --amplify-components-avatar-info-background-color
3598
3621
  );
3622
+ --amplify-components-loader-stroke-filled: var(
3623
+ --amplify-components-avatar-info-color
3624
+ );
3599
3625
  }
3600
3626
  .amplify-avatar--success {
3601
3627
  --avatar-border-color: var(
@@ -3611,6 +3637,9 @@ strong.amplify-text {
3611
3637
  --avatar-filled-color: var(
3612
3638
  --amplify-components-avatar-success-background-color
3613
3639
  );
3640
+ --amplify-components-loader-stroke-filled: var(
3641
+ --amplify-components-avatar-success-color
3642
+ );
3614
3643
  }
3615
3644
  .amplify-avatar__icon {
3616
3645
  display: flex;
@@ -3623,6 +3652,13 @@ strong.amplify-text {
3623
3652
  object-fit: cover;
3624
3653
  display: block;
3625
3654
  }
3655
+ .amplify-avatar__loader {
3656
+ position: absolute;
3657
+ inset: 0;
3658
+ width: 100%;
3659
+ height: 100%;
3660
+ stroke: transparent;
3661
+ }
3626
3662
 
3627
3663
  .amplify-breadcrumbs__list {
3628
3664
  display: flex;
@@ -3653,14 +3689,16 @@ strong.amplify-text {
3653
3689
  font-weight: var(--amplify-components-breadcrumbs-link-font-weight);
3654
3690
  padding-inline: var(--amplify-components-breadcrumbs-link-padding-inline);
3655
3691
  padding-block: var(--amplify-components-breadcrumbs-link-padding-block);
3656
- text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
3692
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
3693
+ text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
3657
3694
  }
3658
3695
 
3659
3696
  .amplify-breadcrumbs__link--current {
3660
3697
  color: var(--amplify-components-breadcrumbs-link-current-color);
3661
3698
  font-size: var(--amplify-components-breadcrumbs-link-current-font-size);
3662
3699
  font-weight: var(--amplify-components-breadcrumbs-link-current-font-weight);
3663
- text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
3700
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
3701
+ text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
3664
3702
  }
3665
3703
 
3666
3704
  .amplify-card {
@@ -5210,8 +5248,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
5210
5248
  padding-block: var(--amplify-components-sliderfield-padding-block);
5211
5249
  position: relative;
5212
5250
  touch-action: none;
5213
- -moz-user-select: none;
5214
- user-select: none;
5251
+ -webkit-user-select: none;
5252
+ -moz-user-select: none;
5253
+ user-select: none;
5215
5254
  --amplify-internal-sliderfield-root-height: var(
5216
5255
  --amplify-components-sliderfield-thumb-height
5217
5256
  );
package/dist/types/theme/components/avatar.d.ts CHANGED
@@ -2,4 +2,5 @@ import { Modifiers, ComponentStyles, Elements, ColorTheme, Size } from './utils'
2
2
  export type AvatarTheme<Required extends boolean = false> = ComponentStyles & Modifiers<Size | ColorTheme | 'filled' | 'outlined', Required> & Elements<{
3
3
  icon?: ComponentStyles;
4
4
  image?: ComponentStyles;
5
+ loader?: ComponentStyles;
5
6
  }, Required>;
package/dist/types/theme/createTheme/createComponentCSS.d.ts CHANGED
@@ -1,7 +1,12 @@
1
- import { DefaultTheme, WebTheme } from '../types';
1
+ import { WebTheme } from '../types';
2
2
  import { ComponentsTheme } from '../components';
3
+ interface CreateComponentCSSParams {
4
+ theme: Pick<WebTheme, 'tokens' | 'breakpoints' | 'name'>;
5
+ components: Array<ComponentsTheme>;
6
+ }
3
7
  /**
4
8
  * This will take a component theme and create the appropriate CSS for it.
5
9
  *
6
10
  */
7
- export declare function createComponentCSS(themeName: string, components: Array<ComponentsTheme>, tokens: WebTheme['tokens'], breakpoints: DefaultTheme['breakpoints']): string;
11
+ export declare function createComponentCSS({ theme, components, }: CreateComponentCSSParams): string;
12
+ export {};
package/dist/types/theme/createTheme/defineComponentTheme.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { ComponentThemeFromName, ComponentsTheme } from '../components';
2
2
  import { BaseTheme, ComponentTheme, ComponentThemeOverride } from '../components/utils';
3
3
  import { WebTokens } from '../tokens';
4
+ import { WebTheme } from '../types';
4
5
  import { ClassNameFunction } from './createComponentClasses';
5
6
  type CreateComponentThemeProps<TokensType extends WebTokens = WebTokens, ThemeType extends BaseTheme = BaseTheme, NameType extends string = string, OverridesType extends BaseTheme = BaseTheme> = {
6
7
  name: NameType;
@@ -50,5 +51,8 @@ export declare function defineComponentTheme<ThemeType extends BaseTheme = BaseT
50
51
  theme: typeof theme;
51
52
  name: string;
52
53
  overrides?: typeof overrides;
54
+ cssText: (props: {
55
+ theme: Pick<WebTheme, 'tokens' | 'breakpoints' | 'name'>;
56
+ }) => string;
53
57
  };
54
58
  export {};