@cloudscape-design/components-themeable 3.0.212 → 3.0.213

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "c4635f8cbdee024ec80c5b47efe7fb2b69343007"
+  "commit": "d5de5982718ba1b1d1c7ec3b00ae205a732ab0c7"
 }

package/lib/internal/scss/app-layout/notifications/styles.scss

@@ -21,3 +21,11 @@
   position: sticky;
   #{custom-props.$flashbarStickyBottomMargin}: #{awsui.$space-xxl};
 }
+
+.no-content-paddings {
+  /*
+  When using the disableContentPaddings option, the Flashbar will use this custom property to add additional space
+  when the notification bar is rendered, to prevent it from overlapping the content.
+   */
+  #{custom-props.$stackedNotificationsBottomMargin}: #{awsui.$space-scaled-l};
+}

package/lib/internal/scss/collection-preferences/styles.scss

@@ -22,6 +22,7 @@
 
 .wrap-lines,
 .striped-rows,
+.content-density,
 .page-size,
 .page-size-form-field,
 .page-size-radio-group {

package/lib/internal/scss/flashbar/collapsible.scss

@@ -2,6 +2,7 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+@use 'sass:map';
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../internal/hooks/focus-visible' as focus-visible;
 @use '../internal/styles/tokens' as awsui;
@@ -9,9 +10,25 @@
 @use '../internal/styles/typography' as typography;
 @use './collapsible.motion';
 
+$notification-bar-top-overlap: (
+  'collapsed': calc(#{awsui.$space-scaled-xl} + 3px),
+  'expanded': awsui.$space-scaled-s,
+);
+$notification-bar-line-height: awsui.$font-body-m-line-height;
+$notification-bar-padding-vertical: styles.$control-padding-vertical;
+$notification-bar-collapsed-item-overflow: (
+  'x': 10px,
+  'y': 8px,
+);
+$notification-bar-border-width: (
+  'classic': 1px,
+  'visual-refresh': 3px,
+);
+
 .stack {
+  $notification-bar-horizontal-margin: 3 * map.get($notification-bar-collapsed-item-overflow, 'x');
   display: grid;
-  grid-template-columns: 1fr minmax(70px, auto) 1fr;
+  grid-template-columns: $notification-bar-horizontal-margin 1fr $notification-bar-horizontal-margin;
 }
 
 .stack > .expanded {
@@ -33,14 +50,15 @@ the grid layout will be:
 [10px] [item 2 start] [10px] [fractional unit] [10px] [item 2 end] [10px]
 [10px] [10px] [item 3 start] [fractional unit] [item 3 end] [10px] [10px]
 */
+
 .stack > .collapsed {
   display: grid;
   grid-column: 1 / 4;
   grid-template-columns:
-    repeat(var(#{custom-props.$flashbarStackDepth}), 10px)
+    repeat(var(#{custom-props.$flashbarStackDepth}), map.get($notification-bar-collapsed-item-overflow, 'x'))
     1fr
-    repeat(var(#{custom-props.$flashbarStackDepth}), 10px);
-  row-gap: 8px;
+    repeat(var(#{custom-props.$flashbarStackDepth}), map.get($notification-bar-collapsed-item-overflow, 'x'));
+  row-gap: map.get($notification-bar-collapsed-item-overflow, 'y');
   z-index: 0;
 
   > .item {
@@ -83,27 +101,88 @@ the grid layout will be:
   @include stacked-flash-z-index;
 }
 
-@mixin toggle-button-layout($top-overlap-collapsed, $border-width) {
-  $margin-top-when-collapsed: -$top-overlap-collapsed;
-  $line-height: awsui.$font-body-m-line-height;
-  $padding-vertical: styles.$control-padding-vertical;
-  $margin-top-when-expanded: -12px;
-
-  padding-top: $padding-vertical;
-  padding-bottom: $padding-vertical;
+@mixin vertical-spacing($top-overlap, $border-width, $buffer-bottom: 0px, $offset-bottom: 0px) {
+  $notification-bar-full-height: calc(
+    #{$notification-bar-line-height} + 2 * (#{$notification-bar-padding-vertical} + #{$border-width})
+  );
+
+  /*
+ The default bottom margin ($default-margin-bottom) is just enough to prevent the notification bar from overlapping the
+ elements below. But if using disableContentPaddings, $stackedNotificationsBottomMargin will be set at the App Layout
+ level so that this distance is increased to prevent the main area from touching the notifications area.
+ */
+  $default-margin-bottom: calc(#{$notification-bar-full-height} - #{$top-overlap});
+  margin-bottom: calc(
+    var(#{custom-props.$stackedNotificationsBottomMargin}, #{$default-margin-bottom}) + #{$buffer-bottom} + #{$offset-bottom}
+  );
+
+  > .notification-bar {
+    margin-top: calc(-1 * #{$top-overlap} + #{$offset-bottom});
+    margin-bottom: calc(#{$top-overlap} - #{$notification-bar-full-height} - #{$offset-bottom});
+    padding-top: $notification-bar-padding-vertical;
+    padding-bottom: $notification-bar-padding-vertical;
+  }
+}
 
+.stack.collapsible {
   &:not(.expanded) {
-    margin-top: #{$margin-top-when-collapsed};
-    margin-bottom: calc(
-      #{-$margin-top-when-collapsed} - (#{$line-height} + 2 * (#{$padding-vertical} + #{$border-width}))
-    );
+    &:not(.short-list) {
+      &:not(.visual-refresh) {
+        @include vertical-spacing(
+          map.get($notification-bar-top-overlap, 'collapsed'),
+          map.get($notification-bar-border-width, 'classic')
+        );
+      }
+      &.visual-refresh {
+        @include vertical-spacing(
+          map.get($notification-bar-top-overlap, 'collapsed'),
+          map.get($notification-bar-border-width, 'visual-refresh')
+        );
+      }
+    }
+
+    /*
+    Since the notification bar is anchored to the bottom of the Flashbar, we need to push it up to account for the
+    missing third item when there are only 2 items in the stack.
+     */
+    &.short-list {
+      &:not(.visual-refresh) {
+        @include vertical-spacing(
+          map.get($notification-bar-top-overlap, 'collapsed'),
+          map.get($notification-bar-border-width, 'classic'),
+          0px,
+          map.get($notification-bar-collapsed-item-overflow, 'y')
+        );
+      }
+      &.visual-refresh {
+        @include vertical-spacing(
+          map.get($notification-bar-top-overlap, 'collapsed'),
+          map.get($notification-bar-border-width, 'visual-refresh'),
+          0px,
+          map.get($notification-bar-collapsed-item-overflow, 'y')
+        );
+      }
+    }
   }
 
   &.expanded {
-    margin-top: #{$margin-top-when-expanded};
-    margin-bottom: calc(
-      #{-$margin-top-when-expanded} - (#{$line-height} + 2 * (#{$padding-vertical} + #{$border-width}))
-    );
+    &:not(.visual-refresh) {
+      /*
+      Give a bit more bottom margin when expanded, but only in Classic because in Visual Refresh the margin around the
+      notifications slot already gives it enough space.
+       */
+      @include vertical-spacing(
+        map.get($notification-bar-top-overlap, 'expanded'),
+        map.get($notification-bar-border-width, 'classic'),
+        awsui.$space-scaled-m
+      );
+    }
+    &.visual-refresh {
+      @include vertical-spacing(
+        map.get($notification-bar-top-overlap, 'expanded'),
+        map.get($notification-bar-border-width, 'visual-refresh')
+      );
+    }
   }
 }
 
@@ -118,13 +197,16 @@ the grid layout will be:
   color: awsui.$color-text-layout-toggle;
   cursor: pointer;
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   grid-column: 2;
   grid-row: 2;
-  gap: awsui.$space-xxs;
+  column-gap: calc(#{awsui.$space-m} + #{awsui.$space-xxs});
+  justify-content: center;
   letter-spacing: awsui.$font-button-letter-spacing;
   margin-left: auto;
   margin-right: auto;
+  row-gap: 0;
   text-align: center;
   text-decoration: none;
   z-index: 1;
@@ -142,7 +224,12 @@ the grid layout will be:
   }
 
   > .status {
-    display: inline-block;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: awsui.$space-m;
+    justify-content: center;
+    row-gap: 0;
 
     > .header {
       font-weight: awsui.$font-button-weight;
@@ -150,18 +237,15 @@ the grid layout will be:
     }
 
     > .item-count {
-      margin-left: awsui.$space-m;
-      margin-right: awsui.$space-m;
-      white-space: nowrap;
-
-      > .type-count {
-        > .count-number {
-          margin-left: awsui.$space-xxs;
-        }
-
-        &:not(:last-child) {
-          margin-right: awsui.$space-s;
-        }
+      column-gap: awsui.$space-s;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: center;
+      row-gap: 0;
+
+      > .type-count > .count-number {
+        margin-left: awsui.$space-xxs;
       }
     }
   }
@@ -176,20 +260,14 @@ the grid layout will be:
   }
 
   &.visual-refresh {
-    $border-width: 2px;
-    // Amount of pixels that the element is pushed up to overlap the Flashbar (when collapsed)
-    $top-overlap-collapsed: 27px;
-    @include toggle-button-layout($top-overlap-collapsed, $border-width);
+    $border-width: map.get($notification-bar-border-width, 'visual-refresh');
     border-width: $border-width;
     padding-left: awsui.$space-l;
     padding-right: awsui.$space-l;
   }
 
   &:not(.visual-refresh) {
-    $border-width: 1px;
-    // Amount of pixels that the element is pushed up to overlap the Flashbar (when collapsed)
-    $top-overlap-collapsed: 24px;
-    @include toggle-button-layout($top-overlap-collapsed, $border-width);
+    $border-width: map.get($notification-bar-border-width, 'classic');
     border-width: $border-width;
     padding-left: awsui.$space-s;
     padding-right: awsui.$space-s;
@@ -208,6 +286,8 @@ the grid layout will be:
     flex-grow: 1;
     background: none;
     border: 0 none;
+    padding-top: 0;
+    padding-bottom: 0;
 
     > .icon {
       @include styles.with-motion {

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss

@@ -1,30 +1,31 @@
 
-    $offsetTop: --awsui-offset-top-20d8jh;
-$offsetTopWithNotifications: --awsui-offset-top-with-notifications-20d8jh;
-$contentGapLeft: --awsui-content-gap-left-20d8jh;
-$contentGapRight: --awsui-content-gap-right-20d8jh;
-$contentHeight: --awsui-content-height-20d8jh;
-$defaultMaxContentWidth: --awsui-default-max-content-width-20d8jh;
-$defaultMinContentWidth: --awsui-default-min-content-width-20d8jh;
-$footerHeight: --awsui-footer-height-20d8jh;
-$headerHeight: --awsui-header-height-20d8jh;
-$layoutWidth: --awsui-layout-width-20d8jh;
-$mainOffsetLeft: --awsui-main-offset-left-20d8jh;
-$maxContentWidth: --awsui-max-content-width-20d8jh;
-$minContentWidth: --awsui-min-content-width-20d8jh;
-$notificationsHeight: --awsui-notifications-height-20d8jh;
-$overlapHeight: --awsui-overlap-height-20d8jh;
-$navigationWidth: --awsui-navigation-width-20d8jh;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-20d8jh;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-20d8jh;
-$splitPanelHeight: --awsui-split-panel-height-20d8jh;
-$splitPanelMinWidth: --awsui-split-panel-min-width-20d8jh;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-20d8jh;
-$toolsMaxWidth: --awsui-tools-max-width-20d8jh;
-$toolsWidth: --awsui-tools-width-20d8jh;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-20d8jh;
-$contentScrollMargin: --awsui-content-scroll-margin-20d8jh;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-20d8jh;
-$flashbarStackIndex: --awsui-flashbar-stack-index-20d8jh;
-$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-20d8jh;
+    $offsetTop: --awsui-offset-top-k2tw0m;
+$offsetTopWithNotifications: --awsui-offset-top-with-notifications-k2tw0m;
+$contentGapLeft: --awsui-content-gap-left-k2tw0m;
+$contentGapRight: --awsui-content-gap-right-k2tw0m;
+$contentHeight: --awsui-content-height-k2tw0m;
+$defaultMaxContentWidth: --awsui-default-max-content-width-k2tw0m;
+$defaultMinContentWidth: --awsui-default-min-content-width-k2tw0m;
+$footerHeight: --awsui-footer-height-k2tw0m;
+$headerHeight: --awsui-header-height-k2tw0m;
+$layoutWidth: --awsui-layout-width-k2tw0m;
+$mainOffsetLeft: --awsui-main-offset-left-k2tw0m;
+$maxContentWidth: --awsui-max-content-width-k2tw0m;
+$minContentWidth: --awsui-min-content-width-k2tw0m;
+$notificationsHeight: --awsui-notifications-height-k2tw0m;
+$overlapHeight: --awsui-overlap-height-k2tw0m;
+$navigationWidth: --awsui-navigation-width-k2tw0m;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-k2tw0m;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-k2tw0m;
+$splitPanelHeight: --awsui-split-panel-height-k2tw0m;
+$splitPanelMinWidth: --awsui-split-panel-min-width-k2tw0m;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-k2tw0m;
+$toolsMaxWidth: --awsui-tools-max-width-k2tw0m;
+$toolsWidth: --awsui-tools-width-k2tw0m;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-k2tw0m;
+$contentScrollMargin: --awsui-content-scroll-margin-k2tw0m;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-k2tw0m;
+$flashbarStackIndex: --awsui-flashbar-stack-index-k2tw0m;
+$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-k2tw0m;
+$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-k2tw0m;
     

package/lib/internal/template/annotation-context/annotation/styles.css.js

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_1hpp3_1pskf_93",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_1pskf_97",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_1pskf_97",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1pskf_128",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1pskf_128",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1pskf_131",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1pskf_131",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1pskf_134",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1pskf_134",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1pskf_137",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1pskf_137",
-  "annotation": "awsui_annotation_1hpp3_1pskf_145",
-  "next-button": "awsui_next-button_1hpp3_1pskf_146",
-  "previous-button": "awsui_previous-button_1hpp3_1pskf_147",
-  "finish-button": "awsui_finish-button_1hpp3_1pskf_148",
-  "header": "awsui_header_1hpp3_1pskf_149",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_1pskf_150",
-  "content": "awsui_content_1hpp3_1pskf_151",
-  "description": "awsui_description_1hpp3_1pskf_155",
-  "actionBar": "awsui_actionBar_1hpp3_1pskf_160",
-  "stepCounter": "awsui_stepCounter_1hpp3_1pskf_167",
-  "divider": "awsui_divider_1hpp3_1pskf_171",
-  "hotspot": "awsui_hotspot_1hpp3_1pskf_175",
-  "icon": "awsui_icon_1hpp3_1pskf_215"
+  "arrow": "awsui_arrow_1hpp3_16fbp_93",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_16fbp_97",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_16fbp_97",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_16fbp_128",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_16fbp_128",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_16fbp_131",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_16fbp_131",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_16fbp_134",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_16fbp_134",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_16fbp_137",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_16fbp_137",
+  "annotation": "awsui_annotation_1hpp3_16fbp_145",
+  "next-button": "awsui_next-button_1hpp3_16fbp_146",
+  "previous-button": "awsui_previous-button_1hpp3_16fbp_147",
+  "finish-button": "awsui_finish-button_1hpp3_16fbp_148",
+  "header": "awsui_header_1hpp3_16fbp_149",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_16fbp_150",
+  "content": "awsui_content_1hpp3_16fbp_151",
+  "description": "awsui_description_1hpp3_16fbp_155",
+  "actionBar": "awsui_actionBar_1hpp3_16fbp_160",
+  "stepCounter": "awsui_stepCounter_1hpp3_16fbp_167",
+  "divider": "awsui_divider_1hpp3_16fbp_171",
+  "hotspot": "awsui_hotspot_1hpp3_16fbp_175",
+  "icon": "awsui_icon_1hpp3_16fbp_215"
 };
   

package/lib/internal/template/annotation-context/annotation/styles.scoped.css

@@ -90,11 +90,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_arrow_1hpp3_1pskf_93:not(#\9) {
+.awsui_arrow_1hpp3_16fbp_93:not(#\9) {
   width: 20px;
   height: 10px;
 }
-.awsui_arrow-outer_1hpp3_1pskf_97:not(#\9), .awsui_arrow-inner_1hpp3_1pskf_97:not(#\9) {
+.awsui_arrow-outer_1hpp3_16fbp_97:not(#\9), .awsui_arrow-inner_1hpp3_16fbp_97:not(#\9) {
   position: absolute;
   overflow: hidden;
   width: 20px;
@@ -102,7 +102,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   top: 0;
   left: 0;
 }
-.awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_1pskf_97:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_16fbp_97:not(#\9)::after {
   content: "";
   box-sizing: border-box;
   display: inline-block;
@@ -115,26 +115,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transform: rotate(45deg);
   transform-origin: 0 100%;
 }
-.awsui_arrow-outer_1hpp3_1pskf_97:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after {
   background-color: var(--color-border-status-info-0iedcr, #0073bb);
 }
-.awsui_arrow-inner_1hpp3_1pskf_97:not(#\9) {
+.awsui_arrow-inner_1hpp3_16fbp_97:not(#\9) {
   top: 2px;
 }
-.awsui_arrow-inner_1hpp3_1pskf_97:not(#\9)::after {
+.awsui_arrow-inner_1hpp3_16fbp_97:not(#\9)::after {
   border-radius: 1px 0 0 0;
   background-color: var(--color-background-status-info-yq3r41, #f1faff);
 }
-.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 {
+.awsui_arrow-position-right-top_1hpp3_16fbp_128 > .awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_16fbp_128 > .awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after {
   box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
-.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 {
+.awsui_arrow-position-left-top_1hpp3_16fbp_131 > .awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_16fbp_131 > .awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after {
   box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
-.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 {
+.awsui_arrow-position-top-center_1hpp3_16fbp_134 > .awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_16fbp_134 > .awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after {
   box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
-.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 {
+.awsui_arrow-position-bottom-center_1hpp3_16fbp_137 > .awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_16fbp_137 > .awsui_arrow-outer_1hpp3_16fbp_97:not(#\9)::after {
   box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
 
@@ -142,37 +142,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_annotation_1hpp3_1pskf_145:not(#\9),
-.awsui_next-button_1hpp3_1pskf_146:not(#\9),
-.awsui_previous-button_1hpp3_1pskf_147:not(#\9),
-.awsui_finish-button_1hpp3_1pskf_148:not(#\9),
-.awsui_header_1hpp3_1pskf_149:not(#\9),
-.awsui_step-counter-content_1hpp3_1pskf_150:not(#\9),
-.awsui_content_1hpp3_1pskf_151:not(#\9) {
+.awsui_annotation_1hpp3_16fbp_145:not(#\9),
+.awsui_next-button_1hpp3_16fbp_146:not(#\9),
+.awsui_previous-button_1hpp3_16fbp_147:not(#\9),
+.awsui_finish-button_1hpp3_16fbp_148:not(#\9),
+.awsui_header_1hpp3_16fbp_149:not(#\9),
+.awsui_step-counter-content_1hpp3_16fbp_150:not(#\9),
+.awsui_content_1hpp3_16fbp_151:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_description_1hpp3_1pskf_155:not(#\9) {
+.awsui_description_1hpp3_16fbp_155:not(#\9) {
   overflow: hidden;
   margin-top: var(--space-xxs-ynfts5, 4px);
 }
 
-.awsui_actionBar_1hpp3_1pskf_160:not(#\9) {
+.awsui_actionBar_1hpp3_16fbp_160:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
 
-.awsui_stepCounter_1hpp3_1pskf_167:not(#\9) {
+.awsui_stepCounter_1hpp3_16fbp_167:not(#\9) {
   margin-right: 20px;
 }
 
-.awsui_divider_1hpp3_1pskf_171:not(#\9) {
+.awsui_divider_1hpp3_16fbp_171:not(#\9) {
   border-bottom: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
 }
 
-.awsui_hotspot_1hpp3_1pskf_175:not(#\9) {
+.awsui_hotspot_1hpp3_16fbp_175:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -213,21 +213,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border: none;
   padding: 0;
   cursor: pointer;
-  scroll-margin: var(--awsui-content-scroll-margin-20d8jh, 40px 0 0 0);
+  scroll-margin: var(--awsui-content-scroll-margin-k2tw0m, 40px 0 0 0);
   width: 16px;
   height: 16px;
 }
-.awsui_hotspot_1hpp3_1pskf_175:not(#\9):focus {
+.awsui_hotspot_1hpp3_16fbp_175:not(#\9):focus {
   outline: none;
 }
-.awsui_hotspot_1hpp3_1pskf_175[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_hotspot_1hpp3_16fbp_175[data-awsui-focus-visible=true]:not(#\9):focus {
   position: relative;
 }
-.awsui_hotspot_1hpp3_1pskf_175[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_hotspot_1hpp3_16fbp_175[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-.awsui_hotspot_1hpp3_1pskf_175[data-awsui-focus-visible=true]:not(#\9):focus::before {
+.awsui_hotspot_1hpp3_16fbp_175[data-awsui-focus-visible=true]:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -238,13 +238,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-control-circular-focus-ring-l88ib6, 50%);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
 }
-.awsui_hotspot_1hpp3_1pskf_175 > .awsui_icon_1hpp3_1pskf_215:not(#\9) {
+.awsui_hotspot_1hpp3_16fbp_175 > .awsui_icon_1hpp3_16fbp_215:not(#\9) {
   position: relative;
   stroke: var(--color-text-link-default-753y4e, #0073bb);
 }
-.awsui_hotspot_1hpp3_1pskf_175:not(#\9):hover > .awsui_icon_1hpp3_1pskf_215 {
+.awsui_hotspot_1hpp3_16fbp_175:not(#\9):hover > .awsui_icon_1hpp3_16fbp_215 {
   stroke: var(--color-text-link-hover-ok01xk, #0073bb);
 }
-.awsui_hotspot_1hpp3_1pskf_175:not(#\9):active > .awsui_icon_1hpp3_1pskf_215 {
+.awsui_hotspot_1hpp3_16fbp_175:not(#\9):active > .awsui_icon_1hpp3_16fbp_215 {
   stroke: var(--color-text-link-default-753y4e, #0073bb);
 }

package/lib/internal/template/annotation-context/annotation/styles.selectors.js

@@ -2,29 +2,29 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "arrow": "awsui_arrow_1hpp3_1pskf_93",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_1pskf_97",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_1pskf_97",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1pskf_128",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1pskf_128",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1pskf_131",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1pskf_131",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1pskf_134",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1pskf_134",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1pskf_137",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1pskf_137",
-  "annotation": "awsui_annotation_1hpp3_1pskf_145",
-  "next-button": "awsui_next-button_1hpp3_1pskf_146",
-  "previous-button": "awsui_previous-button_1hpp3_1pskf_147",
-  "finish-button": "awsui_finish-button_1hpp3_1pskf_148",
-  "header": "awsui_header_1hpp3_1pskf_149",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_1pskf_150",
-  "content": "awsui_content_1hpp3_1pskf_151",
-  "description": "awsui_description_1hpp3_1pskf_155",
-  "actionBar": "awsui_actionBar_1hpp3_1pskf_160",
-  "stepCounter": "awsui_stepCounter_1hpp3_1pskf_167",
-  "divider": "awsui_divider_1hpp3_1pskf_171",
-  "hotspot": "awsui_hotspot_1hpp3_1pskf_175",
-  "icon": "awsui_icon_1hpp3_1pskf_215"
+  "arrow": "awsui_arrow_1hpp3_16fbp_93",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_16fbp_97",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_16fbp_97",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_16fbp_128",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_16fbp_128",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_16fbp_131",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_16fbp_131",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_16fbp_134",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_16fbp_134",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_16fbp_137",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_16fbp_137",
+  "annotation": "awsui_annotation_1hpp3_16fbp_145",
+  "next-button": "awsui_next-button_1hpp3_16fbp_146",
+  "previous-button": "awsui_previous-button_1hpp3_16fbp_147",
+  "finish-button": "awsui_finish-button_1hpp3_16fbp_148",
+  "header": "awsui_header_1hpp3_16fbp_149",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_16fbp_150",
+  "content": "awsui_content_1hpp3_16fbp_151",
+  "description": "awsui_description_1hpp3_16fbp_155",
+  "actionBar": "awsui_actionBar_1hpp3_16fbp_160",
+  "stepCounter": "awsui_stepCounter_1hpp3_16fbp_167",
+  "divider": "awsui_divider_1hpp3_16fbp_171",
+  "hotspot": "awsui_hotspot_1hpp3_16fbp_175",
+  "icon": "awsui_icon_1hpp3_16fbp_215"
 };
   

package/lib/internal/template/app-layout/index.d.ts.map

@@ -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"}
+{"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

@@ -260,7 +260,7 @@ var OldAppLayout = React.forwardRef(function (_a, ref) {
                     React.createElement("div", { style: {
                             marginBottom: splitPanelBottomOffset
                         } },
-                        notifications && (React.createElement(Notifications, { testUtilsClassName: testutilStyles.notifications, labels: ariaLabels, topOffset: disableBodyScroll ? 0 : headerHeight, sticky: !isMobile && stickyNotifications, ref: notificationsRef }, notifications)),
+                        notifications && (React.createElement(Notifications, { disableContentPaddings: disableContentPaddings, testUtilsClassName: testutilStyles.notifications, labels: ariaLabels, topOffset: disableBodyScroll ? 0 : headerHeight, sticky: !isMobile && stickyNotifications, ref: notificationsRef }, notifications)),
                         ((!isMobile && breadcrumbs) || contentHeader) && (React.createElement(ContentWrapper, __assign({}, contentWrapperProps, { contentWidthStyles: contentWidthStyles }),
                             !isMobile && breadcrumbs && (React.createElement("div", { className: clsx(styles.breadcrumbs, testutilStyles.breadcrumbs, styles['breadcrumbs-desktop']) }, breadcrumbs)),
                             contentHeader && (React.createElement("div", { className: clsx(styles['content-header-wrapper'], !hasRenderedNotifications &&