@aws-amplify/ui 6.4.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 (9) hide show
  1. package/dist/esm/types/primitives/componentClassName.mjs +1 -0
  2. package/dist/index.js +1 -0
  3. package/dist/styles/avatar.css +20 -0
  4. package/dist/styles/avatar.layer.css +20 -0
  5. package/dist/styles.css +20 -0
  6. package/dist/styles.layer.css +20 -0
  7. package/dist/types/theme/components/avatar.d.ts +1 -0
  8. package/dist/types/types/primitives/componentClassName.d.ts +1 -0
  9. package/package.json +1 -1
package/dist/esm/types/primitives/componentClassName.mjs CHANGED
@@ -20,6 +20,7 @@ const ComponentClassName = {
20
20
  Avatar: 'amplify-avatar',
21
21
  AvatarIcon: 'amplify-avatar__icon',
22
22
  AvatarImage: 'amplify-avatar__image',
23
+ AvatarLoader: 'amplify-avatar__loader',
23
24
  AIConversation: 'amplify-ai-conversation',
24
25
  AIConversationAttachment: 'amplify-ai-conversation__attachment',
25
26
  AIConversationAttachmentList: 'amplify-ai-conversation__attachment__list',
package/dist/index.js CHANGED
@@ -2871,6 +2871,7 @@ const ComponentClassName = {
2871
2871
  Avatar: 'amplify-avatar',
2872
2872
  AvatarIcon: 'amplify-avatar__icon',
2873
2873
  AvatarImage: 'amplify-avatar__image',
2874
+ AvatarLoader: 'amplify-avatar__loader',
2874
2875
  AIConversation: 'amplify-ai-conversation',
2875
2876
  AIConversationAttachment: 'amplify-ai-conversation__attachment',
2876
2877
  AIConversationAttachmentList: 'amplify-ai-conversation__attachment__list',
package/dist/styles/avatar.css CHANGED
@@ -6,6 +6,7 @@
6
6
  --avatar-border-color: var(--amplify-components-avatar-border-color);
7
7
  --avatar-size: var(--amplify-components-avatar-width);
8
8
  --amplify-components-icon-height: 100%;
9
+ position: relative;
9
10
  display: inline-flex;
10
11
  align-items: center;
11
12
  justify-content: center;
@@ -56,6 +57,9 @@
56
57
  --avatar-filled-color: var(
57
58
  --amplify-components-avatar-warning-background-color
58
59
  );
60
+ --amplify-components-loader-stroke-filled: var(
61
+ --amplify-components-avatar-warning-color
62
+ );
59
63
  }
60
64
  .amplify-avatar--error {
61
65
  --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -69,6 +73,9 @@
69
73
  --avatar-filled-color: var(
70
74
  --amplify-components-avatar-error-background-color
71
75
  );
76
+ --amplify-components-loader-stroke-filled: var(
77
+ --amplify-components-avatar-error-color
78
+ );
72
79
  }
73
80
  .amplify-avatar--info {
74
81
  --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -82,6 +89,9 @@
82
89
  --avatar-filled-color: var(
83
90
  --amplify-components-avatar-info-background-color
84
91
  );
92
+ --amplify-components-loader-stroke-filled: var(
93
+ --amplify-components-avatar-info-color
94
+ );
85
95
  }
86
96
  .amplify-avatar--success {
87
97
  --avatar-border-color: var(
@@ -97,6 +107,9 @@
97
107
  --avatar-filled-color: var(
98
108
  --amplify-components-avatar-success-background-color
99
109
  );
110
+ --amplify-components-loader-stroke-filled: var(
111
+ --amplify-components-avatar-success-color
112
+ );
100
113
  }
101
114
  .amplify-avatar__icon {
102
115
  display: flex;
@@ -108,4 +121,11 @@
108
121
  -o-object-fit: cover;
109
122
  object-fit: cover;
110
123
  display: block;
124
+ }
125
+ .amplify-avatar__loader {
126
+ position: absolute;
127
+ inset: 0;
128
+ width: 100%;
129
+ height: 100%;
130
+ stroke: transparent;
111
131
  }
package/dist/styles/avatar.layer.css CHANGED
@@ -7,6 +7,7 @@
7
7
  --avatar-border-color: var(--amplify-components-avatar-border-color);
8
8
  --avatar-size: var(--amplify-components-avatar-width);
9
9
  --amplify-components-icon-height: 100%;
10
+ position: relative;
10
11
  display: inline-flex;
11
12
  align-items: center;
12
13
  justify-content: center;
@@ -57,6 +58,9 @@
57
58
  --avatar-filled-color: var(
58
59
  --amplify-components-avatar-warning-background-color
59
60
  );
61
+ --amplify-components-loader-stroke-filled: var(
62
+ --amplify-components-avatar-warning-color
63
+ );
60
64
  }
61
65
  .amplify-avatar--error {
62
66
  --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -70,6 +74,9 @@
70
74
  --avatar-filled-color: var(
71
75
  --amplify-components-avatar-error-background-color
72
76
  );
77
+ --amplify-components-loader-stroke-filled: var(
78
+ --amplify-components-avatar-error-color
79
+ );
73
80
  }
74
81
  .amplify-avatar--info {
75
82
  --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -83,6 +90,9 @@
83
90
  --avatar-filled-color: var(
84
91
  --amplify-components-avatar-info-background-color
85
92
  );
93
+ --amplify-components-loader-stroke-filled: var(
94
+ --amplify-components-avatar-info-color
95
+ );
86
96
  }
87
97
  .amplify-avatar--success {
88
98
  --avatar-border-color: var(
@@ -98,6 +108,9 @@
98
108
  --avatar-filled-color: var(
99
109
  --amplify-components-avatar-success-background-color
100
110
  );
111
+ --amplify-components-loader-stroke-filled: var(
112
+ --amplify-components-avatar-success-color
113
+ );
101
114
  }
102
115
  .amplify-avatar__icon {
103
116
  display: flex;
@@ -110,4 +123,11 @@
110
123
  object-fit: cover;
111
124
  display: block;
112
125
  }
126
+ .amplify-avatar__loader {
127
+ position: absolute;
128
+ inset: 0;
129
+ width: 100%;
130
+ height: 100%;
131
+ stroke: transparent;
132
+ }
113
133
  }
package/dist/styles.css CHANGED
@@ -3519,6 +3519,7 @@ strong.amplify-text {
3519
3519
  --avatar-border-color: var(--amplify-components-avatar-border-color);
3520
3520
  --avatar-size: var(--amplify-components-avatar-width);
3521
3521
  --amplify-components-icon-height: 100%;
3522
+ position: relative;
3522
3523
  display: inline-flex;
3523
3524
  align-items: center;
3524
3525
  justify-content: center;
@@ -3569,6 +3570,9 @@ strong.amplify-text {
3569
3570
  --avatar-filled-color: var(
3570
3571
  --amplify-components-avatar-warning-background-color
3571
3572
  );
3573
+ --amplify-components-loader-stroke-filled: var(
3574
+ --amplify-components-avatar-warning-color
3575
+ );
3572
3576
  }
3573
3577
  .amplify-avatar--error {
3574
3578
  --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -3582,6 +3586,9 @@ strong.amplify-text {
3582
3586
  --avatar-filled-color: var(
3583
3587
  --amplify-components-avatar-error-background-color
3584
3588
  );
3589
+ --amplify-components-loader-stroke-filled: var(
3590
+ --amplify-components-avatar-error-color
3591
+ );
3585
3592
  }
3586
3593
  .amplify-avatar--info {
3587
3594
  --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -3595,6 +3602,9 @@ strong.amplify-text {
3595
3602
  --avatar-filled-color: var(
3596
3603
  --amplify-components-avatar-info-background-color
3597
3604
  );
3605
+ --amplify-components-loader-stroke-filled: var(
3606
+ --amplify-components-avatar-info-color
3607
+ );
3598
3608
  }
3599
3609
  .amplify-avatar--success {
3600
3610
  --avatar-border-color: var(
@@ -3610,6 +3620,9 @@ strong.amplify-text {
3610
3620
  --avatar-filled-color: var(
3611
3621
  --amplify-components-avatar-success-background-color
3612
3622
  );
3623
+ --amplify-components-loader-stroke-filled: var(
3624
+ --amplify-components-avatar-success-color
3625
+ );
3613
3626
  }
3614
3627
  .amplify-avatar__icon {
3615
3628
  display: flex;
@@ -3622,6 +3635,13 @@ strong.amplify-text {
3622
3635
  object-fit: cover;
3623
3636
  display: block;
3624
3637
  }
3638
+ .amplify-avatar__loader {
3639
+ position: absolute;
3640
+ inset: 0;
3641
+ width: 100%;
3642
+ height: 100%;
3643
+ stroke: transparent;
3644
+ }
3625
3645
 
3626
3646
  .amplify-breadcrumbs__list {
3627
3647
  display: flex;
package/dist/styles.layer.css CHANGED
@@ -3520,6 +3520,7 @@ strong.amplify-text {
3520
3520
  --avatar-border-color: var(--amplify-components-avatar-border-color);
3521
3521
  --avatar-size: var(--amplify-components-avatar-width);
3522
3522
  --amplify-components-icon-height: 100%;
3523
+ position: relative;
3523
3524
  display: inline-flex;
3524
3525
  align-items: center;
3525
3526
  justify-content: center;
@@ -3570,6 +3571,9 @@ strong.amplify-text {
3570
3571
  --avatar-filled-color: var(
3571
3572
  --amplify-components-avatar-warning-background-color
3572
3573
  );
3574
+ --amplify-components-loader-stroke-filled: var(
3575
+ --amplify-components-avatar-warning-color
3576
+ );
3573
3577
  }
3574
3578
  .amplify-avatar--error {
3575
3579
  --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -3583,6 +3587,9 @@ strong.amplify-text {
3583
3587
  --avatar-filled-color: var(
3584
3588
  --amplify-components-avatar-error-background-color
3585
3589
  );
3590
+ --amplify-components-loader-stroke-filled: var(
3591
+ --amplify-components-avatar-error-color
3592
+ );
3586
3593
  }
3587
3594
  .amplify-avatar--info {
3588
3595
  --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -3596,6 +3603,9 @@ strong.amplify-text {
3596
3603
  --avatar-filled-color: var(
3597
3604
  --amplify-components-avatar-info-background-color
3598
3605
  );
3606
+ --amplify-components-loader-stroke-filled: var(
3607
+ --amplify-components-avatar-info-color
3608
+ );
3599
3609
  }
3600
3610
  .amplify-avatar--success {
3601
3611
  --avatar-border-color: var(
@@ -3611,6 +3621,9 @@ strong.amplify-text {
3611
3621
  --avatar-filled-color: var(
3612
3622
  --amplify-components-avatar-success-background-color
3613
3623
  );
3624
+ --amplify-components-loader-stroke-filled: var(
3625
+ --amplify-components-avatar-success-color
3626
+ );
3614
3627
  }
3615
3628
  .amplify-avatar__icon {
3616
3629
  display: flex;
@@ -3623,6 +3636,13 @@ strong.amplify-text {
3623
3636
  object-fit: cover;
3624
3637
  display: block;
3625
3638
  }
3639
+ .amplify-avatar__loader {
3640
+ position: absolute;
3641
+ inset: 0;
3642
+ width: 100%;
3643
+ height: 100%;
3644
+ stroke: transparent;
3645
+ }
3626
3646
 
3627
3647
  .amplify-breadcrumbs__list {
3628
3648
  display: flex;
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/types/primitives/componentClassName.d.ts CHANGED
@@ -20,6 +20,7 @@ export declare const ComponentClassName: {
20
20
  readonly Avatar: "amplify-avatar";
21
21
  readonly AvatarIcon: "amplify-avatar__icon";
22
22
  readonly AvatarImage: "amplify-avatar__image";
23
+ readonly AvatarLoader: "amplify-avatar__loader";
23
24
  readonly AIConversation: "amplify-ai-conversation";
24
25
  readonly AIConversationAttachment: "amplify-ai-conversation__attachment";
25
26
  readonly AIConversationAttachmentList: "amplify-ai-conversation__attachment__list";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "6.4.1",
3
+ "version": "6.5.0",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {