@cloudscape-design/components-themeable 3.0.293 → 3.0.295

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 (56) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/app-layout/visual-refresh/app-bar.scss +1 -1
  3. package/lib/internal/scss/app-layout/visual-refresh/layout.scss +1 -0
  4. package/lib/internal/scss/column-layout/styles.scss +2 -2
  5. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +32 -31
  6. package/lib/internal/template/annotation-context/annotation/styles.css.js +24 -24
  7. package/lib/internal/template/annotation-context/annotation/styles.scoped.css +30 -30
  8. package/lib/internal/template/annotation-context/annotation/styles.selectors.js +24 -24
  9. package/lib/internal/template/app-layout/index.d.ts.map +1 -1
  10. package/lib/internal/template/app-layout/index.js +8 -3
  11. package/lib/internal/template/app-layout/index.js.map +1 -1
  12. package/lib/internal/template/app-layout/mobile-toolbar/index.d.ts +2 -1
  13. package/lib/internal/template/app-layout/mobile-toolbar/index.d.ts.map +1 -1
  14. package/lib/internal/template/app-layout/mobile-toolbar/index.js +2 -2
  15. package/lib/internal/template/app-layout/mobile-toolbar/index.js.map +1 -1
  16. package/lib/internal/template/app-layout/notifications/styles.css.js +3 -3
  17. package/lib/internal/template/app-layout/notifications/styles.scoped.css +7 -7
  18. package/lib/internal/template/app-layout/notifications/styles.selectors.js +3 -3
  19. package/lib/internal/template/app-layout/visual-refresh/styles.css.js +72 -72
  20. package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +275 -274
  21. package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +72 -72
  22. package/lib/internal/template/column-layout/styles.css.js +13 -13
  23. package/lib/internal/template/column-layout/styles.scoped.css +45 -45
  24. package/lib/internal/template/column-layout/styles.selectors.js +13 -13
  25. package/lib/internal/template/container/internal.d.ts +2 -1
  26. package/lib/internal/template/container/internal.d.ts.map +1 -1
  27. package/lib/internal/template/container/internal.js +2 -2
  28. package/lib/internal/template/container/internal.js.map +1 -1
  29. package/lib/internal/template/container/use-sticky-header.d.ts +12 -1
  30. package/lib/internal/template/container/use-sticky-header.d.ts.map +1 -1
  31. package/lib/internal/template/container/use-sticky-header.js +41 -16
  32. package/lib/internal/template/container/use-sticky-header.js.map +1 -1
  33. package/lib/internal/template/flashbar/styles.css.js +45 -45
  34. package/lib/internal/template/flashbar/styles.scoped.css +169 -169
  35. package/lib/internal/template/flashbar/styles.selectors.js +45 -45
  36. package/lib/internal/template/header/internal.d.ts.map +1 -1
  37. package/lib/internal/template/header/internal.js +4 -1
  38. package/lib/internal/template/header/internal.js.map +1 -1
  39. package/lib/internal/template/internal/base-component/styles.scoped.css +0 -6
  40. package/lib/internal/template/internal/context/app-layout-context.d.ts +1 -0
  41. package/lib/internal/template/internal/context/app-layout-context.d.ts.map +1 -1
  42. package/lib/internal/template/internal/context/app-layout-context.js +1 -0
  43. package/lib/internal/template/internal/context/app-layout-context.js.map +1 -1
  44. package/lib/internal/template/internal/environment.js +1 -1
  45. package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts.map +1 -1
  46. package/lib/internal/template/internal/generated/custom-css-properties/index.js +32 -31
  47. package/lib/internal/template/internal/generated/custom-css-properties/index.js.map +1 -1
  48. package/lib/internal/template/internal/generated/theming/index.cjs +0 -11
  49. package/lib/internal/template/internal/generated/theming/index.js +0 -11
  50. package/lib/internal/template/table/internal.d.ts.map +1 -1
  51. package/lib/internal/template/table/internal.js +3 -5
  52. package/lib/internal/template/table/internal.js.map +1 -1
  53. package/lib/internal/template/tiles/styles.css.js +28 -28
  54. package/lib/internal/template/tiles/styles.scoped.css +70 -70
  55. package/lib/internal/template/tiles/styles.selectors.js +28 -28
  56. package/package.json +1 -1
package/lib/internal/manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "980e02e9cebfc82f82959ec84969614de643bee7"
2
+ "commit": "fc14744014d9b2f79cc0aa8d3551bb5f91d33a40"
3
3
  }
package/lib/internal/scss/app-layout/visual-refresh/app-bar.scss CHANGED
@@ -121,7 +121,7 @@ section.appbar {
121
121
  box-shadow: awsui.$shadow-panel-toggle;
122
122
  grid-column: 1 / span 5;
123
123
  grid-row: 1;
124
- height: calc(2 * #{awsui.$space-m} + #{awsui.$space-scaled-xs});
124
+ height: var(#{custom-props.$mobileBarHeight});
125
125
  padding: 0 awsui.$space-m;
126
126
  position: sticky;
127
127
  top: var(#{custom-props.$offsetTop});
package/lib/internal/scss/app-layout/visual-refresh/layout.scss CHANGED
@@ -33,6 +33,7 @@
33
33
  #{custom-props.$mainOffsetLeft}: 0px;
34
34
  #{custom-props.$maxContentWidth}: 0px;
35
35
  #{custom-props.$minContentWidth}: 280px;
36
+ #{custom-props.$mobileBarHeight}: calc(2 * #{awsui.$space-m} + #{awsui.$space-scaled-xs});
36
37
  #{custom-props.$notificationsHeight}: 0px;
37
38
  #{custom-props.$offsetTop}: 0px;
38
39
  #{custom-props.$offsetTopWithNotifications}: 0px;
package/lib/internal/scss/column-layout/styles.scss CHANGED
@@ -111,7 +111,7 @@ div.column-layout {
111
111
 
112
112
  &.grid-variant-text-grid {
113
113
  @include make-vertical-borders('left');
114
- margin: calc(-1 * (#{awsui.$space-text-grid-vertical})) calc(-1 * #{$grid-gutter-width});
114
+ margin: calc(-1 * #{$grid-gutter-width} / 2) calc(-1 * #{$grid-gutter-width});
115
115
  }
116
116
  /* stylelint-disable-next-line selector-max-universal */
117
117
  &:not(.grid-no-gutters) > * {
@@ -121,7 +121,7 @@ div.column-layout {
121
121
  /* stylelint-disable-next-line selector-max-universal */
122
122
  &:not(.grid-no-gutters).grid-variant-text-grid > * {
123
123
  padding: 0 $grid-gutter-width;
124
- margin: awsui.$space-text-grid-vertical 0;
124
+ margin: calc(#{$grid-gutter-width} / 2) 0;
125
125
  }
126
126
 
127
127
  &.grid-vertical-borders {
package/lib/internal/scss/internal/generated/custom-css-properties/index.scss CHANGED
@@ -1,33 +1,34 @@
1
1
 
2
- $activeDrawerWidth: --awsui-active-drawer-width-3j0evk;
3
- $offsetTop: --awsui-offset-top-3j0evk;
4
- $offsetTopWithNotifications: --awsui-offset-top-with-notifications-3j0evk;
5
- $contentGapLeft: --awsui-content-gap-left-3j0evk;
6
- $contentGapRight: --awsui-content-gap-right-3j0evk;
7
- $contentHeight: --awsui-content-height-3j0evk;
8
- $defaultMaxContentWidth: --awsui-default-max-content-width-3j0evk;
9
- $defaultMinContentWidth: --awsui-default-min-content-width-3j0evk;
10
- $footerHeight: --awsui-footer-height-3j0evk;
11
- $headerHeight: --awsui-header-height-3j0evk;
12
- $layoutWidth: --awsui-layout-width-3j0evk;
13
- $mainOffsetLeft: --awsui-main-offset-left-3j0evk;
14
- $maxContentWidth: --awsui-max-content-width-3j0evk;
15
- $minContentWidth: --awsui-min-content-width-3j0evk;
16
- $notificationsHeight: --awsui-notifications-height-3j0evk;
17
- $overlapHeight: --awsui-overlap-height-3j0evk;
18
- $navigationWidth: --awsui-navigation-width-3j0evk;
19
- $splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-3j0evk;
20
- $splitPanelReportedSize: --awsui-split-panel-reported-size-3j0evk;
21
- $splitPanelHeight: --awsui-split-panel-height-3j0evk;
22
- $splitPanelMinWidth: --awsui-split-panel-min-width-3j0evk;
23
- $splitPanelMaxWidth: --awsui-split-panel-max-width-3j0evk;
24
- $toolsMaxWidth: --awsui-tools-max-width-3j0evk;
25
- $toolsWidth: --awsui-tools-width-3j0evk;
26
- $toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-3j0evk;
27
- $contentScrollMargin: --awsui-content-scroll-margin-3j0evk;
28
- $flashbarStackDepth: --awsui-flashbar-stack-depth-3j0evk;
29
- $flashbarStackIndex: --awsui-flashbar-stack-index-3j0evk;
30
- $flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-3j0evk;
31
- $stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-3j0evk;
32
- $stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-3j0evk;
2
+ $activeDrawerWidth: --awsui-active-drawer-width-rrnppm;
3
+ $offsetTop: --awsui-offset-top-rrnppm;
4
+ $offsetTopWithNotifications: --awsui-offset-top-with-notifications-rrnppm;
5
+ $contentGapLeft: --awsui-content-gap-left-rrnppm;
6
+ $contentGapRight: --awsui-content-gap-right-rrnppm;
7
+ $contentHeight: --awsui-content-height-rrnppm;
8
+ $defaultMaxContentWidth: --awsui-default-max-content-width-rrnppm;
9
+ $defaultMinContentWidth: --awsui-default-min-content-width-rrnppm;
10
+ $footerHeight: --awsui-footer-height-rrnppm;
11
+ $headerHeight: --awsui-header-height-rrnppm;
12
+ $layoutWidth: --awsui-layout-width-rrnppm;
13
+ $mainOffsetLeft: --awsui-main-offset-left-rrnppm;
14
+ $maxContentWidth: --awsui-max-content-width-rrnppm;
15
+ $minContentWidth: --awsui-min-content-width-rrnppm;
16
+ $mobileBarHeight: --awsui-mobile-bar-height-rrnppm;
17
+ $notificationsHeight: --awsui-notifications-height-rrnppm;
18
+ $overlapHeight: --awsui-overlap-height-rrnppm;
19
+ $navigationWidth: --awsui-navigation-width-rrnppm;
20
+ $splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-rrnppm;
21
+ $splitPanelReportedSize: --awsui-split-panel-reported-size-rrnppm;
22
+ $splitPanelHeight: --awsui-split-panel-height-rrnppm;
23
+ $splitPanelMinWidth: --awsui-split-panel-min-width-rrnppm;
24
+ $splitPanelMaxWidth: --awsui-split-panel-max-width-rrnppm;
25
+ $toolsMaxWidth: --awsui-tools-max-width-rrnppm;
26
+ $toolsWidth: --awsui-tools-width-rrnppm;
27
+ $toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-rrnppm;
28
+ $contentScrollMargin: --awsui-content-scroll-margin-rrnppm;
29
+ $flashbarStackDepth: --awsui-flashbar-stack-depth-rrnppm;
30
+ $flashbarStackIndex: --awsui-flashbar-stack-index-rrnppm;
31
+ $flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-rrnppm;
32
+ $stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-rrnppm;
33
+ $stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-rrnppm;
33
34
 
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_1umef_93",
5
- "arrow-outer": "awsui_arrow-outer_1hpp3_1umef_97",
6
- "arrow-inner": "awsui_arrow-inner_1hpp3_1umef_97",
7
- "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1umef_128",
8
- "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1umef_128",
9
- "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1umef_131",
10
- "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1umef_131",
11
- "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1umef_134",
12
- "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1umef_134",
13
- "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1umef_137",
14
- "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1umef_137",
15
- "annotation": "awsui_annotation_1hpp3_1umef_145",
16
- "next-button": "awsui_next-button_1hpp3_1umef_146",
17
- "previous-button": "awsui_previous-button_1hpp3_1umef_147",
18
- "finish-button": "awsui_finish-button_1hpp3_1umef_148",
19
- "header": "awsui_header_1hpp3_1umef_149",
20
- "step-counter-content": "awsui_step-counter-content_1hpp3_1umef_150",
21
- "content": "awsui_content_1hpp3_1umef_151",
22
- "description": "awsui_description_1hpp3_1umef_155",
23
- "actionBar": "awsui_actionBar_1hpp3_1umef_160",
24
- "stepCounter": "awsui_stepCounter_1hpp3_1umef_167",
25
- "divider": "awsui_divider_1hpp3_1umef_171",
26
- "hotspot": "awsui_hotspot_1hpp3_1umef_175",
27
- "icon": "awsui_icon_1hpp3_1umef_215"
4
+ "arrow": "awsui_arrow_1hpp3_1271x_93",
5
+ "arrow-outer": "awsui_arrow-outer_1hpp3_1271x_97",
6
+ "arrow-inner": "awsui_arrow-inner_1hpp3_1271x_97",
7
+ "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1271x_128",
8
+ "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1271x_128",
9
+ "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1271x_131",
10
+ "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1271x_131",
11
+ "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1271x_134",
12
+ "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1271x_134",
13
+ "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1271x_137",
14
+ "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1271x_137",
15
+ "annotation": "awsui_annotation_1hpp3_1271x_145",
16
+ "next-button": "awsui_next-button_1hpp3_1271x_146",
17
+ "previous-button": "awsui_previous-button_1hpp3_1271x_147",
18
+ "finish-button": "awsui_finish-button_1hpp3_1271x_148",
19
+ "header": "awsui_header_1hpp3_1271x_149",
20
+ "step-counter-content": "awsui_step-counter-content_1hpp3_1271x_150",
21
+ "content": "awsui_content_1hpp3_1271x_151",
22
+ "description": "awsui_description_1hpp3_1271x_155",
23
+ "actionBar": "awsui_actionBar_1hpp3_1271x_160",
24
+ "stepCounter": "awsui_stepCounter_1hpp3_1271x_167",
25
+ "divider": "awsui_divider_1hpp3_1271x_171",
26
+ "hotspot": "awsui_hotspot_1hpp3_1271x_175",
27
+ "icon": "awsui_icon_1hpp3_1271x_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_1umef_93:not(#\9) {
93
+ .awsui_arrow_1hpp3_1271x_93:not(#\9) {
94
94
  width: 20px;
95
95
  height: 10px;
96
96
  }
97
- .awsui_arrow-outer_1hpp3_1umef_97:not(#\9), .awsui_arrow-inner_1hpp3_1umef_97:not(#\9) {
97
+ .awsui_arrow-outer_1hpp3_1271x_97:not(#\9), .awsui_arrow-inner_1hpp3_1271x_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_1umef_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_1umef_97:not(#\9)::after {
105
+ .awsui_arrow-outer_1hpp3_1271x_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_1271x_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_1umef_97:not(#\9)::after {
118
+ .awsui_arrow-outer_1hpp3_1271x_97:not(#\9)::after {
119
119
  background-color: var(--color-border-status-info-0iedcr, #0073bb);
120
120
  }
121
- .awsui_arrow-inner_1hpp3_1umef_97:not(#\9) {
121
+ .awsui_arrow-inner_1hpp3_1271x_97:not(#\9) {
122
122
  top: 2px;
123
123
  }
124
- .awsui_arrow-inner_1hpp3_1umef_97:not(#\9)::after {
124
+ .awsui_arrow-inner_1hpp3_1271x_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_1umef_128 > .awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1umef_128 > .awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after {
128
+ .awsui_arrow-position-right-top_1hpp3_1271x_128 > .awsui_arrow-outer_1hpp3_1271x_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1271x_128 > .awsui_arrow-outer_1hpp3_1271x_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_1umef_131 > .awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1umef_131 > .awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after {
131
+ .awsui_arrow-position-left-top_1hpp3_1271x_131 > .awsui_arrow-outer_1hpp3_1271x_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1271x_131 > .awsui_arrow-outer_1hpp3_1271x_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_1umef_134 > .awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1umef_134 > .awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after {
134
+ .awsui_arrow-position-top-center_1hpp3_1271x_134 > .awsui_arrow-outer_1hpp3_1271x_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1271x_134 > .awsui_arrow-outer_1hpp3_1271x_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_1umef_137 > .awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1umef_137 > .awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after {
137
+ .awsui_arrow-position-bottom-center_1hpp3_1271x_137 > .awsui_arrow-outer_1hpp3_1271x_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1271x_137 > .awsui_arrow-outer_1hpp3_1271x_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_1umef_145:not(#\9),
146
- .awsui_next-button_1hpp3_1umef_146:not(#\9),
147
- .awsui_previous-button_1hpp3_1umef_147:not(#\9),
148
- .awsui_finish-button_1hpp3_1umef_148:not(#\9),
149
- .awsui_header_1hpp3_1umef_149:not(#\9),
150
- .awsui_step-counter-content_1hpp3_1umef_150:not(#\9),
151
- .awsui_content_1hpp3_1umef_151:not(#\9) {
145
+ .awsui_annotation_1hpp3_1271x_145:not(#\9),
146
+ .awsui_next-button_1hpp3_1271x_146:not(#\9),
147
+ .awsui_previous-button_1hpp3_1271x_147:not(#\9),
148
+ .awsui_finish-button_1hpp3_1271x_148:not(#\9),
149
+ .awsui_header_1hpp3_1271x_149:not(#\9),
150
+ .awsui_step-counter-content_1hpp3_1271x_150:not(#\9),
151
+ .awsui_content_1hpp3_1271x_151:not(#\9) {
152
152
  /* used in test-utils */
153
153
  }
154
154
 
155
- .awsui_description_1hpp3_1umef_155:not(#\9) {
155
+ .awsui_description_1hpp3_1271x_155:not(#\9) {
156
156
  overflow: hidden;
157
157
  margin-top: var(--space-xxs-ynfts5, 4px);
158
158
  }
159
159
 
160
- .awsui_actionBar_1hpp3_1umef_160:not(#\9) {
160
+ .awsui_actionBar_1hpp3_1271x_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_1umef_167:not(#\9) {
167
+ .awsui_stepCounter_1hpp3_1271x_167:not(#\9) {
168
168
  margin-right: 20px;
169
169
  }
170
170
 
171
- .awsui_divider_1hpp3_1umef_171:not(#\9) {
171
+ .awsui_divider_1hpp3_1271x_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_1umef_175:not(#\9) {
175
+ .awsui_hotspot_1hpp3_1271x_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-3j0evk, 40px 0 0 0);
216
+ scroll-margin: var(--awsui-content-scroll-margin-rrnppm, 40px 0 0 0);
217
217
  width: 16px;
218
218
  height: 16px;
219
219
  }
220
- .awsui_hotspot_1hpp3_1umef_175:not(#\9):focus {
220
+ .awsui_hotspot_1hpp3_1271x_175:not(#\9):focus {
221
221
  outline: none;
222
222
  }
223
- body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1umef_175:not(#\9):focus {
223
+ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1271x_175:not(#\9):focus {
224
224
  position: relative;
225
225
  }
226
- body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1umef_175:not(#\9):focus {
226
+ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1271x_175:not(#\9):focus {
227
227
  outline: 2px dotted transparent;
228
228
  outline-offset: calc(2px - 1px);
229
229
  }
230
- body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1umef_175:not(#\9):focus::before {
230
+ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1271x_175:not(#\9):focus::before {
231
231
  content: " ";
232
232
  display: block;
233
233
  position: absolute;
@@ -238,13 +238,13 @@ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1umef_175:not(#\9):focu
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_1umef_175 > .awsui_icon_1hpp3_1umef_215:not(#\9) {
241
+ .awsui_hotspot_1hpp3_1271x_175 > .awsui_icon_1hpp3_1271x_215:not(#\9) {
242
242
  position: relative;
243
243
  stroke: var(--color-text-link-default-753y4e, #0073bb);
244
244
  }
245
- .awsui_hotspot_1hpp3_1umef_175:not(#\9):hover > .awsui_icon_1hpp3_1umef_215 {
245
+ .awsui_hotspot_1hpp3_1271x_175:not(#\9):hover > .awsui_icon_1hpp3_1271x_215 {
246
246
  stroke: var(--color-text-link-hover-ok01xk, #0073bb);
247
247
  }
248
- .awsui_hotspot_1hpp3_1umef_175:not(#\9):active > .awsui_icon_1hpp3_1umef_215 {
248
+ .awsui_hotspot_1hpp3_1271x_175:not(#\9):active > .awsui_icon_1hpp3_1271x_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_1umef_93",
6
- "arrow-outer": "awsui_arrow-outer_1hpp3_1umef_97",
7
- "arrow-inner": "awsui_arrow-inner_1hpp3_1umef_97",
8
- "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1umef_128",
9
- "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1umef_128",
10
- "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1umef_131",
11
- "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1umef_131",
12
- "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1umef_134",
13
- "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1umef_134",
14
- "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1umef_137",
15
- "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1umef_137",
16
- "annotation": "awsui_annotation_1hpp3_1umef_145",
17
- "next-button": "awsui_next-button_1hpp3_1umef_146",
18
- "previous-button": "awsui_previous-button_1hpp3_1umef_147",
19
- "finish-button": "awsui_finish-button_1hpp3_1umef_148",
20
- "header": "awsui_header_1hpp3_1umef_149",
21
- "step-counter-content": "awsui_step-counter-content_1hpp3_1umef_150",
22
- "content": "awsui_content_1hpp3_1umef_151",
23
- "description": "awsui_description_1hpp3_1umef_155",
24
- "actionBar": "awsui_actionBar_1hpp3_1umef_160",
25
- "stepCounter": "awsui_stepCounter_1hpp3_1umef_167",
26
- "divider": "awsui_divider_1hpp3_1umef_171",
27
- "hotspot": "awsui_hotspot_1hpp3_1umef_175",
28
- "icon": "awsui_icon_1hpp3_1umef_215"
5
+ "arrow": "awsui_arrow_1hpp3_1271x_93",
6
+ "arrow-outer": "awsui_arrow-outer_1hpp3_1271x_97",
7
+ "arrow-inner": "awsui_arrow-inner_1hpp3_1271x_97",
8
+ "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1271x_128",
9
+ "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1271x_128",
10
+ "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1271x_131",
11
+ "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1271x_131",
12
+ "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1271x_134",
13
+ "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1271x_134",
14
+ "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1271x_137",
15
+ "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1271x_137",
16
+ "annotation": "awsui_annotation_1hpp3_1271x_145",
17
+ "next-button": "awsui_next-button_1hpp3_1271x_146",
18
+ "previous-button": "awsui_previous-button_1hpp3_1271x_147",
19
+ "finish-button": "awsui_finish-button_1hpp3_1271x_148",
20
+ "header": "awsui_header_1hpp3_1271x_149",
21
+ "step-counter-content": "awsui_step-counter-content_1hpp3_1271x_150",
22
+ "content": "awsui_content_1hpp3_1271x_151",
23
+ "description": "awsui_description_1hpp3_1271x_155",
24
+ "actionBar": "awsui_actionBar_1hpp3_1271x_160",
25
+ "stepCounter": "awsui_stepCounter_1hpp3_1271x_167",
26
+ "divider": "awsui_divider_1hpp3_1271x_171",
27
+ "hotspot": "awsui_hotspot_1hpp3_1271x_175",
28
+ "icon": "awsui_icon_1hpp3_1271x_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":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAyC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FA8Bd,CAAC;AAgsBF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAyC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FA8Bd,CAAC;AAssBF,eAAe,SAAS,CAAC"}
package/lib/internal/template/app-layout/index.js CHANGED
@@ -341,9 +341,10 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
341
341
  : splitPanelOpen
342
342
  ? splitPanelReportedSize
343
343
  : splitPanelReportedHeaderHeight)) !== null && _c !== void 0 ? _c : undefined;
344
+ const [mobileBarHeight, mobileBarRef] = useContainerQuery(rect => rect.height);
344
345
  return (React.createElement("div", { className: clsx(styles.root, testutilStyles.root, disableBodyScroll && styles['root-no-scroll']), ref: rootRef },
345
346
  React.createElement("div", { className: styles['layout-wrapper'], style: contentHeightStyle },
346
- isMobile && (!toolsHide || !navigationHide || breadcrumbs) && (React.createElement(MobileToolbar, { anyPanelOpen: anyPanelOpen, toggleRefs: { navigation: navigationRefs.toggle, tools: toolsRefs.toggle }, topOffset: headerHeight, ariaLabels: ariaLabels, navigationHide: navigationHide, toolsHide: toolsHide, onNavigationOpen: () => onNavigationToggle(true), onToolsOpen: () => onToolsToggle(true), unfocusable: anyPanelOpen, drawers: drawers
347
+ isMobile && (!toolsHide || !navigationHide || breadcrumbs) && (React.createElement(MobileToolbar, { anyPanelOpen: anyPanelOpen, toggleRefs: { navigation: navigationRefs.toggle, tools: toolsRefs.toggle }, topOffset: headerHeight, ariaLabels: ariaLabels, navigationHide: navigationHide, toolsHide: toolsHide, onNavigationOpen: () => onNavigationToggle(true), onToolsOpen: () => onToolsToggle(true), unfocusable: anyPanelOpen, mobileBarRef: mobileBarRef, drawers: drawers
347
348
  ? {
348
349
  items: tools && !toolsHide ? [toolsItem, ...drawers.items] : drawers.items,
349
350
  activeDrawerId: selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id,
@@ -386,9 +387,13 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
386
387
  !contentHeader &&
387
388
  styles['content-wrapper-first-child']) }),
388
389
  React.createElement(AppLayoutContext.Provider, { value: {
389
- stickyOffsetTop: (disableBodyScroll ? 0 : headerHeight) +
390
- (stickyNotificationsHeight !== null ? stickyNotificationsHeight : 0),
390
+ stickyOffsetTop:
391
+ // We don't support the table header being sticky in case the deprecated disableBodyScroll is enabled,
392
+ // therefore we ensure the table header scrolls out of view by offseting a large enough value (9999px)
393
+ (disableBodyScroll ? (isMobile ? -9999 : 0) : headerHeight) +
394
+ (isMobile ? 0 : stickyNotificationsHeight !== null ? stickyNotificationsHeight : 0),
391
395
  stickyOffsetBottom: footerHeight + (splitPanelBottomOffset || 0),
396
+ mobileBarHeight: mobileBarHeight !== null && mobileBarHeight !== void 0 ? mobileBarHeight : 0,
392
397
  hasBreadcrumbs: !!breadcrumbs,
393
398
  } }, content))),
394
399
  finalSplitPanePosition === 'bottom' && splitPanelWrapped),