@cloudscape-design/components-themeable 3.0.219 → 3.0.221

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 (38) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/app-layout/notifications/styles.scss +8 -0
  3. package/lib/internal/scss/flashbar/collapsible.scss +111 -29
  4. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +30 -28
  5. package/lib/internal/template/annotation-context/annotation/styles.css.js +24 -24
  6. package/lib/internal/template/annotation-context/annotation/styles.scoped.css +30 -30
  7. package/lib/internal/template/annotation-context/annotation/styles.selectors.js +24 -24
  8. package/lib/internal/template/app-layout/index.d.ts.map +1 -1
  9. package/lib/internal/template/app-layout/index.js +1 -1
  10. package/lib/internal/template/app-layout/index.js.map +1 -1
  11. package/lib/internal/template/app-layout/notifications/index.d.ts +1 -0
  12. package/lib/internal/template/app-layout/notifications/index.d.ts.map +1 -1
  13. package/lib/internal/template/app-layout/notifications/index.js +2 -2
  14. package/lib/internal/template/app-layout/notifications/index.js.map +1 -1
  15. package/lib/internal/template/app-layout/notifications/styles.css.js +3 -2
  16. package/lib/internal/template/app-layout/notifications/styles.scoped.css +13 -5
  17. package/lib/internal/template/app-layout/notifications/styles.selectors.js +3 -2
  18. package/lib/internal/template/app-layout/visual-refresh/notifications.d.ts.map +1 -1
  19. package/lib/internal/template/app-layout/visual-refresh/notifications.js +6 -1
  20. package/lib/internal/template/app-layout/visual-refresh/notifications.js.map +1 -1
  21. package/lib/internal/template/app-layout/visual-refresh/styles.css.js +60 -60
  22. package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +223 -223
  23. package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +60 -60
  24. package/lib/internal/template/collection-preferences/index.js +1 -1
  25. package/lib/internal/template/collection-preferences/index.js.map +1 -1
  26. package/lib/internal/template/flashbar/collapsible-flashbar.d.ts.map +1 -1
  27. package/lib/internal/template/flashbar/collapsible-flashbar.js +4 -4
  28. package/lib/internal/template/flashbar/collapsible-flashbar.js.map +1 -1
  29. package/lib/internal/template/flashbar/styles.css.js +45 -43
  30. package/lib/internal/template/flashbar/styles.scoped.css +337 -166
  31. package/lib/internal/template/flashbar/styles.selectors.js +45 -43
  32. package/lib/internal/template/internal/environment.js +1 -1
  33. package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts.map +1 -1
  34. package/lib/internal/template/internal/generated/custom-css-properties/index.js +30 -28
  35. package/lib/internal/template/internal/generated/custom-css-properties/index.js.map +1 -1
  36. package/lib/internal/template/table/internal.js +1 -1
  37. package/lib/internal/template/table/internal.js.map +1 -1
  38. package/package.json +1 -1
package/lib/internal/manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "6c8eab313909c7745c71f6885ff95b97b7b9b87c"
2
+ "commit": "b3f260b87d0b1a75f9f57d23bc9abdd4068c26ff"
3
3
  }
package/lib/internal/scss/app-layout/notifications/styles.scss CHANGED
@@ -21,3 +21,11 @@
21
21
  position: sticky;
22
22
  #{custom-props.$flashbarStickyBottomMargin}: #{awsui.$space-xxl};
23
23
  }
24
+
25
+ .no-content-paddings {
26
+ /*
27
+ When using the disableContentPaddings option, the Flashbar will use this custom property to add additional space
28
+ when the notification bar is rendered, to prevent it from overlapping the content.
29
+ */
30
+ #{custom-props.$stackedNotificationsBottomMargin}: #{awsui.$space-scaled-l};
31
+ }
package/lib/internal/scss/flashbar/collapsible.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
3
  SPDX-License-Identifier: Apache-2.0
4
4
  */
5
+ @use 'sass:map';
5
6
  @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
6
7
  @use '../internal/hooks/focus-visible' as focus-visible;
7
8
  @use '../internal/styles/tokens' as awsui;
@@ -9,10 +10,23 @@
9
10
  @use '../internal/styles/typography' as typography;
10
11
  @use './collapsible.motion';
11
12
 
12
- $collapsed-item-overflow: 10px;
13
+ $notification-bar-top-overlap: (
14
+ 'collapsed': calc(#{awsui.$space-scaled-xl} + 3px),
15
+ 'expanded': awsui.$space-scaled-s,
16
+ );
17
+ $notification-bar-line-height: awsui.$font-body-m-line-height;
18
+ $notification-bar-padding-vertical: styles.$control-padding-vertical;
19
+ $notification-bar-collapsed-item-overflow: (
20
+ 'x': 10px,
21
+ 'y': 8px,
22
+ );
23
+ $notification-bar-border-width: (
24
+ 'classic': 1px,
25
+ 'visual-refresh': 2px,
26
+ );
13
27
 
14
28
  .stack {
15
- $notification-bar-horizontal-margin: 3 * $collapsed-item-overflow;
29
+ $notification-bar-horizontal-margin: 3 * map.get($notification-bar-collapsed-item-overflow, 'x');
16
30
  display: grid;
17
31
  grid-template-columns: $notification-bar-horizontal-margin 1fr $notification-bar-horizontal-margin;
18
32
  }
@@ -41,10 +55,10 @@ the grid layout will be:
41
55
  display: grid;
42
56
  grid-column: 1 / 4;
43
57
  grid-template-columns:
44
- repeat(var(#{custom-props.$flashbarStackDepth}), $collapsed-item-overflow)
58
+ repeat(var(#{custom-props.$flashbarStackDepth}), map.get($notification-bar-collapsed-item-overflow, 'x'))
45
59
  1fr
46
- repeat(var(#{custom-props.$flashbarStackDepth}), $collapsed-item-overflow);
47
- row-gap: 8px;
60
+ repeat(var(#{custom-props.$flashbarStackDepth}), map.get($notification-bar-collapsed-item-overflow, 'x'));
61
+ row-gap: map.get($notification-bar-collapsed-item-overflow, 'y');
48
62
  z-index: 0;
49
63
 
50
64
  > .item {
@@ -87,27 +101,99 @@ the grid layout will be:
87
101
  @include stacked-flash-z-index;
88
102
  }
89
103
 
90
- @mixin toggle-button-layout($top-overlap-collapsed, $border-width) {
91
- $margin-top-when-collapsed: -$top-overlap-collapsed;
92
- $line-height: awsui.$font-body-m-line-height;
93
- $padding-vertical: styles.$control-padding-vertical;
94
- $margin-top-when-expanded: -12px;
95
-
96
- padding-top: $padding-vertical;
97
- padding-bottom: $padding-vertical;
98
-
99
- &:not(.expanded) {
100
- margin-top: #{$margin-top-when-collapsed};
104
+ @mixin vertical-spacing($top-overlap, $border-width, $buffer-bottom: 0px, $offset-bottom: 0px) {
105
+ /*
106
+ The default bottom margin (custom-props.$stackedNotificationsDefaultBottomMargin) is just enough to prevent the
107
+ notification bar from overlapping the elements below. But if using disableContentPaddings,
108
+ $stackedNotificationsBottomMargin will be set at the App Layout level so that this distance is increased to prevent the
109
+ main area from touching the notifications area.
110
+ */
111
+
112
+ /* $notification-bar-line-height + 2 * $notification-bar-padding-vertical + 2 * $border-width
113
+ is the full height of the notification bar */
114
+ #{custom-props.$stackedNotificationsDefaultBottomMargin}: calc(
115
+ #{$notification-bar-line-height} + 2 * #{$notification-bar-padding-vertical} + 2 * #{$border-width} - #{$top-overlap}
116
+ );
117
+ margin-bottom: calc(
118
+ var(
119
+ #{custom-props.$stackedNotificationsBottomMargin},
120
+ var(#{custom-props.$stackedNotificationsDefaultBottomMargin})
121
+ ) + #{$buffer-bottom} + #{$offset-bottom}
122
+ );
123
+
124
+ > .notification-bar {
125
+ margin-top: calc(-1 * #{$top-overlap} + #{$offset-bottom});
126
+ /* $notification-bar-line-height + 2 * $notification-bar-padding-vertical + 2 * $border-width
127
+ is the full height of the notification bar */
128
+ /* stylelint-disable scss/operator-no-newline-after */
101
129
  margin-bottom: calc(
102
- #{-$margin-top-when-collapsed} - (#{$line-height} + 2 * (#{$padding-vertical} + #{$border-width}))
130
+ #{$top-overlap} - #{$notification-bar-line-height} - 2 * #{$notification-bar-padding-vertical} - 2 * #{$border-width} -
131
+ #{$offset-bottom}
103
132
  );
133
+ padding-top: $notification-bar-padding-vertical;
134
+ padding-bottom: $notification-bar-padding-vertical;
135
+ }
136
+ }
137
+
138
+ .stack.collapsible {
139
+ &:not(.expanded) {
140
+ &:not(.short-list) {
141
+ &:not(.visual-refresh) {
142
+ @include vertical-spacing(
143
+ map.get($notification-bar-top-overlap, 'collapsed'),
144
+ map.get($notification-bar-border-width, 'classic')
145
+ );
146
+ }
147
+ &.visual-refresh {
148
+ @include vertical-spacing(
149
+ map.get($notification-bar-top-overlap, 'collapsed'),
150
+ map.get($notification-bar-border-width, 'visual-refresh')
151
+ );
152
+ }
153
+ }
154
+
155
+ /*
156
+ Since the notification bar is anchored to the bottom of the Flashbar, we need to push it up to account for the
157
+ missing third item when there are only 2 items in the stack.
158
+ */
159
+ &.short-list {
160
+ &:not(.visual-refresh) {
161
+ @include vertical-spacing(
162
+ map.get($notification-bar-top-overlap, 'collapsed'),
163
+ map.get($notification-bar-border-width, 'classic'),
164
+ 0px,
165
+ map.get($notification-bar-collapsed-item-overflow, 'y')
166
+ );
167
+ }
168
+ &.visual-refresh {
169
+ @include vertical-spacing(
170
+ map.get($notification-bar-top-overlap, 'collapsed'),
171
+ map.get($notification-bar-border-width, 'visual-refresh'),
172
+ 0px,
173
+ map.get($notification-bar-collapsed-item-overflow, 'y')
174
+ );
175
+ }
176
+ }
104
177
  }
105
178
 
106
179
  &.expanded {
107
- margin-top: #{$margin-top-when-expanded};
108
- margin-bottom: calc(
109
- #{-$margin-top-when-expanded} - (#{$line-height} + 2 * (#{$padding-vertical} + #{$border-width}))
110
- );
180
+ &:not(.visual-refresh) {
181
+ /*
182
+ Give a bit more bottom margin when expanded, but only in Classic because in Visual Refresh the margin around the
183
+ notifications slot already gives it enough space.
184
+ */
185
+ @include vertical-spacing(
186
+ map.get($notification-bar-top-overlap, 'expanded'),
187
+ map.get($notification-bar-border-width, 'classic'),
188
+ awsui.$space-scaled-m
189
+ );
190
+ }
191
+ &.visual-refresh {
192
+ @include vertical-spacing(
193
+ map.get($notification-bar-top-overlap, 'expanded'),
194
+ map.get($notification-bar-border-width, 'visual-refresh')
195
+ );
196
+ }
111
197
  }
112
198
  }
113
199
 
@@ -185,20 +271,14 @@ the grid layout will be:
185
271
  }
186
272
 
187
273
  &.visual-refresh {
188
- $border-width: 2px;
189
- // Amount of pixels that the element is pushed up to overlap the Flashbar (when collapsed)
190
- $top-overlap-collapsed: 27px;
191
- @include toggle-button-layout($top-overlap-collapsed, $border-width);
274
+ $border-width: map.get($notification-bar-border-width, 'visual-refresh');
192
275
  border-width: $border-width;
193
276
  padding-left: awsui.$space-l;
194
277
  padding-right: awsui.$space-l;
195
278
  }
196
279
 
197
280
  &:not(.visual-refresh) {
198
- $border-width: 1px;
199
- // Amount of pixels that the element is pushed up to overlap the Flashbar (when collapsed)
200
- $top-overlap-collapsed: 24px;
201
- @include toggle-button-layout($top-overlap-collapsed, $border-width);
281
+ $border-width: map.get($notification-bar-border-width, 'classic');
202
282
  border-width: $border-width;
203
283
  padding-left: awsui.$space-s;
204
284
  padding-right: awsui.$space-s;
@@ -217,6 +297,8 @@ the grid layout will be:
217
297
  flex-grow: 1;
218
298
  background: none;
219
299
  border: 0 none;
300
+ padding-top: 0;
301
+ padding-bottom: 0;
220
302
 
221
303
  > .icon {
222
304
  @include styles.with-motion {
package/lib/internal/scss/internal/generated/custom-css-properties/index.scss CHANGED
@@ -1,30 +1,32 @@
1
1
 
2
- $offsetTop: --awsui-offset-top-20d8jh;
3
- $offsetTopWithNotifications: --awsui-offset-top-with-notifications-20d8jh;
4
- $contentGapLeft: --awsui-content-gap-left-20d8jh;
5
- $contentGapRight: --awsui-content-gap-right-20d8jh;
6
- $contentHeight: --awsui-content-height-20d8jh;
7
- $defaultMaxContentWidth: --awsui-default-max-content-width-20d8jh;
8
- $defaultMinContentWidth: --awsui-default-min-content-width-20d8jh;
9
- $footerHeight: --awsui-footer-height-20d8jh;
10
- $headerHeight: --awsui-header-height-20d8jh;
11
- $layoutWidth: --awsui-layout-width-20d8jh;
12
- $mainOffsetLeft: --awsui-main-offset-left-20d8jh;
13
- $maxContentWidth: --awsui-max-content-width-20d8jh;
14
- $minContentWidth: --awsui-min-content-width-20d8jh;
15
- $notificationsHeight: --awsui-notifications-height-20d8jh;
16
- $overlapHeight: --awsui-overlap-height-20d8jh;
17
- $navigationWidth: --awsui-navigation-width-20d8jh;
18
- $splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-20d8jh;
19
- $splitPanelReportedSize: --awsui-split-panel-reported-size-20d8jh;
20
- $splitPanelHeight: --awsui-split-panel-height-20d8jh;
21
- $splitPanelMinWidth: --awsui-split-panel-min-width-20d8jh;
22
- $splitPanelMaxWidth: --awsui-split-panel-max-width-20d8jh;
23
- $toolsMaxWidth: --awsui-tools-max-width-20d8jh;
24
- $toolsWidth: --awsui-tools-width-20d8jh;
25
- $toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-20d8jh;
26
- $contentScrollMargin: --awsui-content-scroll-margin-20d8jh;
27
- $flashbarStackDepth: --awsui-flashbar-stack-depth-20d8jh;
28
- $flashbarStackIndex: --awsui-flashbar-stack-index-20d8jh;
29
- $flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-20d8jh;
2
+ $offsetTop: --awsui-offset-top-lgrg0d;
3
+ $offsetTopWithNotifications: --awsui-offset-top-with-notifications-lgrg0d;
4
+ $contentGapLeft: --awsui-content-gap-left-lgrg0d;
5
+ $contentGapRight: --awsui-content-gap-right-lgrg0d;
6
+ $contentHeight: --awsui-content-height-lgrg0d;
7
+ $defaultMaxContentWidth: --awsui-default-max-content-width-lgrg0d;
8
+ $defaultMinContentWidth: --awsui-default-min-content-width-lgrg0d;
9
+ $footerHeight: --awsui-footer-height-lgrg0d;
10
+ $headerHeight: --awsui-header-height-lgrg0d;
11
+ $layoutWidth: --awsui-layout-width-lgrg0d;
12
+ $mainOffsetLeft: --awsui-main-offset-left-lgrg0d;
13
+ $maxContentWidth: --awsui-max-content-width-lgrg0d;
14
+ $minContentWidth: --awsui-min-content-width-lgrg0d;
15
+ $notificationsHeight: --awsui-notifications-height-lgrg0d;
16
+ $overlapHeight: --awsui-overlap-height-lgrg0d;
17
+ $navigationWidth: --awsui-navigation-width-lgrg0d;
18
+ $splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-lgrg0d;
19
+ $splitPanelReportedSize: --awsui-split-panel-reported-size-lgrg0d;
20
+ $splitPanelHeight: --awsui-split-panel-height-lgrg0d;
21
+ $splitPanelMinWidth: --awsui-split-panel-min-width-lgrg0d;
22
+ $splitPanelMaxWidth: --awsui-split-panel-max-width-lgrg0d;
23
+ $toolsMaxWidth: --awsui-tools-max-width-lgrg0d;
24
+ $toolsWidth: --awsui-tools-width-lgrg0d;
25
+ $toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-lgrg0d;
26
+ $contentScrollMargin: --awsui-content-scroll-margin-lgrg0d;
27
+ $flashbarStackDepth: --awsui-flashbar-stack-depth-lgrg0d;
28
+ $flashbarStackIndex: --awsui-flashbar-stack-index-lgrg0d;
29
+ $flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-lgrg0d;
30
+ $stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-lgrg0d;
31
+ $stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-lgrg0d;
30
32
 
package/lib/internal/template/annotation-context/annotation/styles.css.js CHANGED
@@ -1,29 +1,29 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "arrow": "awsui_arrow_1hpp3_1pskf_93",
5
- "arrow-outer": "awsui_arrow-outer_1hpp3_1pskf_97",
6
- "arrow-inner": "awsui_arrow-inner_1hpp3_1pskf_97",
7
- "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1pskf_128",
8
- "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1pskf_128",
9
- "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1pskf_131",
10
- "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1pskf_131",
11
- "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1pskf_134",
12
- "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1pskf_134",
13
- "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1pskf_137",
14
- "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1pskf_137",
15
- "annotation": "awsui_annotation_1hpp3_1pskf_145",
16
- "next-button": "awsui_next-button_1hpp3_1pskf_146",
17
- "previous-button": "awsui_previous-button_1hpp3_1pskf_147",
18
- "finish-button": "awsui_finish-button_1hpp3_1pskf_148",
19
- "header": "awsui_header_1hpp3_1pskf_149",
20
- "step-counter-content": "awsui_step-counter-content_1hpp3_1pskf_150",
21
- "content": "awsui_content_1hpp3_1pskf_151",
22
- "description": "awsui_description_1hpp3_1pskf_155",
23
- "actionBar": "awsui_actionBar_1hpp3_1pskf_160",
24
- "stepCounter": "awsui_stepCounter_1hpp3_1pskf_167",
25
- "divider": "awsui_divider_1hpp3_1pskf_171",
26
- "hotspot": "awsui_hotspot_1hpp3_1pskf_175",
27
- "icon": "awsui_icon_1hpp3_1pskf_215"
4
+ "arrow": "awsui_arrow_1hpp3_1srfv_93",
5
+ "arrow-outer": "awsui_arrow-outer_1hpp3_1srfv_97",
6
+ "arrow-inner": "awsui_arrow-inner_1hpp3_1srfv_97",
7
+ "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1srfv_128",
8
+ "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1srfv_128",
9
+ "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1srfv_131",
10
+ "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1srfv_131",
11
+ "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1srfv_134",
12
+ "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1srfv_134",
13
+ "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1srfv_137",
14
+ "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1srfv_137",
15
+ "annotation": "awsui_annotation_1hpp3_1srfv_145",
16
+ "next-button": "awsui_next-button_1hpp3_1srfv_146",
17
+ "previous-button": "awsui_previous-button_1hpp3_1srfv_147",
18
+ "finish-button": "awsui_finish-button_1hpp3_1srfv_148",
19
+ "header": "awsui_header_1hpp3_1srfv_149",
20
+ "step-counter-content": "awsui_step-counter-content_1hpp3_1srfv_150",
21
+ "content": "awsui_content_1hpp3_1srfv_151",
22
+ "description": "awsui_description_1hpp3_1srfv_155",
23
+ "actionBar": "awsui_actionBar_1hpp3_1srfv_160",
24
+ "stepCounter": "awsui_stepCounter_1hpp3_1srfv_167",
25
+ "divider": "awsui_divider_1hpp3_1srfv_171",
26
+ "hotspot": "awsui_hotspot_1hpp3_1srfv_175",
27
+ "icon": "awsui_icon_1hpp3_1srfv_215"
28
28
  };
29
29
 
package/lib/internal/template/annotation-context/annotation/styles.scoped.css CHANGED
@@ -90,11 +90,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
90
90
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
91
91
  SPDX-License-Identifier: Apache-2.0
92
92
  */
93
- .awsui_arrow_1hpp3_1pskf_93:not(#\9) {
93
+ .awsui_arrow_1hpp3_1srfv_93:not(#\9) {
94
94
  width: 20px;
95
95
  height: 10px;
96
96
  }
97
- .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9), .awsui_arrow-inner_1hpp3_1pskf_97:not(#\9) {
97
+ .awsui_arrow-outer_1hpp3_1srfv_97:not(#\9), .awsui_arrow-inner_1hpp3_1srfv_97:not(#\9) {
98
98
  position: absolute;
99
99
  overflow: hidden;
100
100
  width: 20px;
@@ -102,7 +102,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
102
102
  top: 0;
103
103
  left: 0;
104
104
  }
105
- .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_1pskf_97:not(#\9)::after {
105
+ .awsui_arrow-outer_1hpp3_1srfv_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_1srfv_97:not(#\9)::after {
106
106
  content: "";
107
107
  box-sizing: border-box;
108
108
  display: inline-block;
@@ -115,26 +115,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
115
115
  transform: rotate(45deg);
116
116
  transform-origin: 0 100%;
117
117
  }
118
- .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after {
118
+ .awsui_arrow-outer_1hpp3_1srfv_97:not(#\9)::after {
119
119
  background-color: var(--color-border-status-info-0iedcr, #0073bb);
120
120
  }
121
- .awsui_arrow-inner_1hpp3_1pskf_97:not(#\9) {
121
+ .awsui_arrow-inner_1hpp3_1srfv_97:not(#\9) {
122
122
  top: 2px;
123
123
  }
124
- .awsui_arrow-inner_1hpp3_1pskf_97:not(#\9)::after {
124
+ .awsui_arrow-inner_1hpp3_1srfv_97:not(#\9)::after {
125
125
  border-radius: 1px 0 0 0;
126
126
  background-color: var(--color-background-status-info-yq3r41, #f1faff);
127
127
  }
128
- .awsui_arrow-position-right-top_1hpp3_1pskf_128 > .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1pskf_128 > .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after {
128
+ .awsui_arrow-position-right-top_1hpp3_1srfv_128 > .awsui_arrow-outer_1hpp3_1srfv_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1srfv_128 > .awsui_arrow-outer_1hpp3_1srfv_97:not(#\9)::after {
129
129
  box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
130
130
  }
131
- .awsui_arrow-position-left-top_1hpp3_1pskf_131 > .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1pskf_131 > .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after {
131
+ .awsui_arrow-position-left-top_1hpp3_1srfv_131 > .awsui_arrow-outer_1hpp3_1srfv_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1srfv_131 > .awsui_arrow-outer_1hpp3_1srfv_97:not(#\9)::after {
132
132
  box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
133
133
  }
134
- .awsui_arrow-position-top-center_1hpp3_1pskf_134 > .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1pskf_134 > .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after {
134
+ .awsui_arrow-position-top-center_1hpp3_1srfv_134 > .awsui_arrow-outer_1hpp3_1srfv_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1srfv_134 > .awsui_arrow-outer_1hpp3_1srfv_97:not(#\9)::after {
135
135
  box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
136
136
  }
137
- .awsui_arrow-position-bottom-center_1hpp3_1pskf_137 > .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1pskf_137 > .awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after {
137
+ .awsui_arrow-position-bottom-center_1hpp3_1srfv_137 > .awsui_arrow-outer_1hpp3_1srfv_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1srfv_137 > .awsui_arrow-outer_1hpp3_1srfv_97:not(#\9)::after {
138
138
  box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
139
139
  }
140
140
 
@@ -142,37 +142,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
142
142
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
143
143
  SPDX-License-Identifier: Apache-2.0
144
144
  */
145
- .awsui_annotation_1hpp3_1pskf_145:not(#\9),
146
- .awsui_next-button_1hpp3_1pskf_146:not(#\9),
147
- .awsui_previous-button_1hpp3_1pskf_147:not(#\9),
148
- .awsui_finish-button_1hpp3_1pskf_148:not(#\9),
149
- .awsui_header_1hpp3_1pskf_149:not(#\9),
150
- .awsui_step-counter-content_1hpp3_1pskf_150:not(#\9),
151
- .awsui_content_1hpp3_1pskf_151:not(#\9) {
145
+ .awsui_annotation_1hpp3_1srfv_145:not(#\9),
146
+ .awsui_next-button_1hpp3_1srfv_146:not(#\9),
147
+ .awsui_previous-button_1hpp3_1srfv_147:not(#\9),
148
+ .awsui_finish-button_1hpp3_1srfv_148:not(#\9),
149
+ .awsui_header_1hpp3_1srfv_149:not(#\9),
150
+ .awsui_step-counter-content_1hpp3_1srfv_150:not(#\9),
151
+ .awsui_content_1hpp3_1srfv_151:not(#\9) {
152
152
  /* used in test-utils */
153
153
  }
154
154
 
155
- .awsui_description_1hpp3_1pskf_155:not(#\9) {
155
+ .awsui_description_1hpp3_1srfv_155:not(#\9) {
156
156
  overflow: hidden;
157
157
  margin-top: var(--space-xxs-ynfts5, 4px);
158
158
  }
159
159
 
160
- .awsui_actionBar_1hpp3_1pskf_160:not(#\9) {
160
+ .awsui_actionBar_1hpp3_1srfv_160:not(#\9) {
161
161
  display: flex;
162
162
  justify-content: space-between;
163
163
  align-items: center;
164
164
  position: relative;
165
165
  }
166
166
 
167
- .awsui_stepCounter_1hpp3_1pskf_167:not(#\9) {
167
+ .awsui_stepCounter_1hpp3_1srfv_167:not(#\9) {
168
168
  margin-right: 20px;
169
169
  }
170
170
 
171
- .awsui_divider_1hpp3_1pskf_171:not(#\9) {
171
+ .awsui_divider_1hpp3_1srfv_171:not(#\9) {
172
172
  border-bottom: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
173
173
  }
174
174
 
175
- .awsui_hotspot_1hpp3_1pskf_175:not(#\9) {
175
+ .awsui_hotspot_1hpp3_1srfv_175:not(#\9) {
176
176
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
177
177
  border-collapse: separate;
178
178
  border-spacing: 0;
@@ -213,21 +213,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
213
213
  border: none;
214
214
  padding: 0;
215
215
  cursor: pointer;
216
- scroll-margin: var(--awsui-content-scroll-margin-20d8jh, 40px 0 0 0);
216
+ scroll-margin: var(--awsui-content-scroll-margin-lgrg0d, 40px 0 0 0);
217
217
  width: 16px;
218
218
  height: 16px;
219
219
  }
220
- .awsui_hotspot_1hpp3_1pskf_175:not(#\9):focus {
220
+ .awsui_hotspot_1hpp3_1srfv_175:not(#\9):focus {
221
221
  outline: none;
222
222
  }
223
- .awsui_hotspot_1hpp3_1pskf_175[data-awsui-focus-visible=true]:not(#\9):focus {
223
+ .awsui_hotspot_1hpp3_1srfv_175[data-awsui-focus-visible=true]:not(#\9):focus {
224
224
  position: relative;
225
225
  }
226
- .awsui_hotspot_1hpp3_1pskf_175[data-awsui-focus-visible=true]:not(#\9):focus {
226
+ .awsui_hotspot_1hpp3_1srfv_175[data-awsui-focus-visible=true]:not(#\9):focus {
227
227
  outline: 2px dotted transparent;
228
228
  outline-offset: calc(2px - 1px);
229
229
  }
230
- .awsui_hotspot_1hpp3_1pskf_175[data-awsui-focus-visible=true]:not(#\9):focus::before {
230
+ .awsui_hotspot_1hpp3_1srfv_175[data-awsui-focus-visible=true]:not(#\9):focus::before {
231
231
  content: " ";
232
232
  display: block;
233
233
  position: absolute;
@@ -238,13 +238,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
238
238
  border-radius: var(--border-radius-control-circular-focus-ring-l88ib6, 50%);
239
239
  box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
240
240
  }
241
- .awsui_hotspot_1hpp3_1pskf_175 > .awsui_icon_1hpp3_1pskf_215:not(#\9) {
241
+ .awsui_hotspot_1hpp3_1srfv_175 > .awsui_icon_1hpp3_1srfv_215:not(#\9) {
242
242
  position: relative;
243
243
  stroke: var(--color-text-link-default-753y4e, #0073bb);
244
244
  }
245
- .awsui_hotspot_1hpp3_1pskf_175:not(#\9):hover > .awsui_icon_1hpp3_1pskf_215 {
245
+ .awsui_hotspot_1hpp3_1srfv_175:not(#\9):hover > .awsui_icon_1hpp3_1srfv_215 {
246
246
  stroke: var(--color-text-link-hover-ok01xk, #0073bb);
247
247
  }
248
- .awsui_hotspot_1hpp3_1pskf_175:not(#\9):active > .awsui_icon_1hpp3_1pskf_215 {
248
+ .awsui_hotspot_1hpp3_1srfv_175:not(#\9):active > .awsui_icon_1hpp3_1srfv_215 {
249
249
  stroke: var(--color-text-link-default-753y4e, #0073bb);
250
250
  }
package/lib/internal/template/annotation-context/annotation/styles.selectors.js CHANGED
@@ -2,29 +2,29 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "arrow": "awsui_arrow_1hpp3_1pskf_93",
6
- "arrow-outer": "awsui_arrow-outer_1hpp3_1pskf_97",
7
- "arrow-inner": "awsui_arrow-inner_1hpp3_1pskf_97",
8
- "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1pskf_128",
9
- "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1pskf_128",
10
- "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1pskf_131",
11
- "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1pskf_131",
12
- "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1pskf_134",
13
- "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1pskf_134",
14
- "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1pskf_137",
15
- "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1pskf_137",
16
- "annotation": "awsui_annotation_1hpp3_1pskf_145",
17
- "next-button": "awsui_next-button_1hpp3_1pskf_146",
18
- "previous-button": "awsui_previous-button_1hpp3_1pskf_147",
19
- "finish-button": "awsui_finish-button_1hpp3_1pskf_148",
20
- "header": "awsui_header_1hpp3_1pskf_149",
21
- "step-counter-content": "awsui_step-counter-content_1hpp3_1pskf_150",
22
- "content": "awsui_content_1hpp3_1pskf_151",
23
- "description": "awsui_description_1hpp3_1pskf_155",
24
- "actionBar": "awsui_actionBar_1hpp3_1pskf_160",
25
- "stepCounter": "awsui_stepCounter_1hpp3_1pskf_167",
26
- "divider": "awsui_divider_1hpp3_1pskf_171",
27
- "hotspot": "awsui_hotspot_1hpp3_1pskf_175",
28
- "icon": "awsui_icon_1hpp3_1pskf_215"
5
+ "arrow": "awsui_arrow_1hpp3_1srfv_93",
6
+ "arrow-outer": "awsui_arrow-outer_1hpp3_1srfv_97",
7
+ "arrow-inner": "awsui_arrow-inner_1hpp3_1srfv_97",
8
+ "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1srfv_128",
9
+ "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1srfv_128",
10
+ "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1srfv_131",
11
+ "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1srfv_131",
12
+ "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1srfv_134",
13
+ "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1srfv_134",
14
+ "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1srfv_137",
15
+ "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1srfv_137",
16
+ "annotation": "awsui_annotation_1hpp3_1srfv_145",
17
+ "next-button": "awsui_next-button_1hpp3_1srfv_146",
18
+ "previous-button": "awsui_previous-button_1hpp3_1srfv_147",
19
+ "finish-button": "awsui_finish-button_1hpp3_1srfv_148",
20
+ "header": "awsui_header_1hpp3_1srfv_149",
21
+ "step-counter-content": "awsui_step-counter-content_1hpp3_1srfv_150",
22
+ "content": "awsui_content_1hpp3_1srfv_151",
23
+ "description": "awsui_description_1hpp3_1srfv_155",
24
+ "actionBar": "awsui_actionBar_1hpp3_1srfv_160",
25
+ "stepCounter": "awsui_stepCounter_1hpp3_1srfv_167",
26
+ "divider": "awsui_divider_1hpp3_1srfv_171",
27
+ "hotspot": "awsui_hotspot_1hpp3_1srfv_175",
28
+ "icon": "awsui_icon_1hpp3_1srfv_215"
29
29
  };
30
30
 
package/lib/internal/template/app-layout/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAqC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAmBd,CAAC;AAyeF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAqC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAmBd,CAAC;AA0eF,eAAe,SAAS,CAAC"}
package/lib/internal/template/app-layout/index.js CHANGED
@@ -260,7 +260,7 @@ var OldAppLayout = React.forwardRef(function (_a, ref) {
260
260
  React.createElement("div", { style: {
261
261
  marginBottom: splitPanelBottomOffset
262
262
  } },
263
- notifications && (React.createElement(Notifications, { testUtilsClassName: testutilStyles.notifications, labels: ariaLabels, topOffset: disableBodyScroll ? 0 : headerHeight, sticky: !isMobile && stickyNotifications, ref: notificationsRef }, notifications)),
263
+ notifications && (React.createElement(Notifications, { disableContentPaddings: disableContentPaddings, testUtilsClassName: testutilStyles.notifications, labels: ariaLabels, topOffset: disableBodyScroll ? 0 : headerHeight, sticky: !isMobile && stickyNotifications, ref: notificationsRef }, notifications)),
264
264
  ((!isMobile && breadcrumbs) || contentHeader) && (React.createElement(ContentWrapper, __assign({}, contentWrapperProps, { contentWidthStyles: contentWidthStyles }),
265
265
  !isMobile && breadcrumbs && (React.createElement("div", { className: clsx(styles.breadcrumbs, testutilStyles.breadcrumbs, styles['breadcrumbs-desktop']) }, breadcrumbs)),
266
266
  contentHeader && (React.createElement("div", { className: clsx(styles['content-header-wrapper'], !hasRenderedNotifications &&