@cloudscape-design/components-themeable 3.0.252 → 3.0.253

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "20210cee4f66d92a45cbc56cab80f6af7a2e48f3"
+  "commit": "471735b67df75c4cb69b1b7b201ef05ca6ddf2df"
 }

package/lib/internal/scss/app-layout/constants.scss

@@ -12,6 +12,11 @@ $toggle-padding-horizontal: 0.7 * styles.$base-size;
 $toggle-padding-vertical: awsui.$space-xxs;
 $toggle-padding: $toggle-padding-vertical $toggle-padding-horizontal;
 
+// New styles for when there are drawers
+$drawers-padding-horizontal: 0.6 * styles.$base-size;
+$drawers-padding-vertical: awsui.$space-scaled-xs;
+$drawers-padding: $drawers-padding-vertical $drawers-padding-horizontal;
+
 $sidebar-size-closed: 4 * styles.$base-size;
 
 $adaptive-content-widths: (

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

@@ -15,12 +15,15 @@ $drawer-z-index-mobile: 1001;
   padding: constants.$toggle-padding;
 }
 
+.drawer-triggers {
+  box-sizing: border-box;
+}
+
 .drawer {
   flex-shrink: 0;
   position: relative;
   word-wrap: break-word;
   box-shadow: awsui.$shadow-panel;
-
   &:not(.drawer-mobile) {
     z-index: $drawer-z-index;
   }
@@ -32,12 +35,10 @@ $drawer-z-index-mobile: 1001;
     }
   }
 }
-
 .drawer-content {
   position: fixed;
   overflow: auto;
   background-color: awsui.$color-background-layout-panel-content;
-
   .drawer-mobile > & {
     z-index: $drawer-z-index-mobile;
     top: 0;
@@ -45,15 +46,54 @@ $drawer-z-index-mobile: 1001;
     left: 0;
     right: 0;
   }
-
   .drawer-closed > & {
     width: constants.$sidebar-size-closed;
     &:hover {
       background: awsui.$color-background-layout-panel-hover;
     }
+    &.non-interactive {
+      &:hover {
+        background: awsui.$color-background-layout-panel-content;
+        cursor: default;
+      }
+    }
   }
-
   & > [aria-hidden='true'] {
     display: none;
   }
 }
+
+.trigger {
+  .drawer-triggers > & {
+    padding: constants.$drawers-padding;
+    margin: 1px constants.$drawers-padding-horizontal;
+    border-radius: 0;
+    border: 0;
+
+    &:not(:last-child) {
+      box-shadow: 0px 1px awsui.$color-shadow-layout-panel-trigger;
+    }
+    &-drawer {
+      &:hover:not(.selected) {
+        color: awsui.$color-text-layout-panel-trigger-hover;
+        &:not(:last-child) {
+          box-shadow: 0px 1px awsui.$color-shadow-layout-panel-trigger;
+        }
+      }
+    }
+
+    &.selected {
+      padding: constants.$drawers-padding-vertical awsui.$space-s;
+      margin: 0;
+      border-top: 1px solid awsui.$color-background-layout-panel-trigger-active;
+      border-bottom: 1px solid awsui.$color-background-layout-panel-trigger-active;
+
+      background-color: awsui.$color-background-layout-panel-trigger-active;
+      color: awsui.$color-text-layout-panel-trigger-active;
+      box-shadow: none;
+      &:hover {
+        cursor: default;
+      }
+    }
+  }
+}

package/lib/internal/scss/app-layout/mobile-toolbar/styles.scss

@@ -44,7 +44,12 @@
   &:last-child {
     border-left: 1px solid awsui.$color-border-layout;
   }
-  &:hover {
+  &:hover:not(.mobile-toggle-with-drawers) {
     background: awsui.$color-background-layout-panel-hover;
   }
+
+  &-with-drawers {
+    display: flex;
+    width: auto;
+  }
 }

package/lib/internal/scss/app-layout/test-classes/styles.scss

@@ -42,3 +42,18 @@
 .disable-body-scroll-root {
   /* used in tests */
 }
+.drawers-desktop-triggers-container {
+  /* used in tests */
+}
+.drawers-mobile-triggers-container {
+  /* used in tests */
+}
+.drawers-trigger {
+  /* used in tests */
+}
+.active-drawer {
+  /* used in tests */
+}
+.active-drawer-close-button {
+  /* used in tests */
+}

package/lib/internal/scss/app-layout/visual-refresh/app-bar.scss

@@ -29,7 +29,8 @@ section.appbar {
     background-color: awsui.$color-background-layout-main;
   }
 
-  > .appbar-tools {
+  > .appbar-tools,
+  > .drawers-mobile-triggers-container {
     grid-column: 3;
     margin-left: awsui.$space-m;
   }
@@ -53,7 +54,8 @@ section.appbar {
     }
 
     > .appbar-nav,
-    > .appbar-tools {
+    > .appbar-tools,
+    > .drawers-mobile-triggers-container {
       display: none;
     }
 
@@ -127,7 +129,8 @@ section.appbar {
 
     // the Navigation and Tools buttons resume their grid column position
     > .appbar-nav,
-    > .appbar-tools {
+    > .appbar-tools,
+    > .drawers-mobile-triggers-container {
       display: block;
     }
 

package/lib/internal/scss/app-layout/visual-refresh/drawers.scss

@@ -0,0 +1,151 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../../internal/styles/tokens' as awsui;
+@use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use '../../internal/styles' as styles;
+
+.drawers-container {
+  background-color: transparent;
+  display: flex;
+  grid-column: 5;
+  grid-row: 1 / span 5;
+  height: var(#{custom-props.$contentHeight});
+  pointer-events: none;
+  position: sticky;
+  top: var(#{custom-props.$offsetTop});
+  z-index: 830;
+
+  &.has-open-drawer {
+    background-color: awsui.$color-background-container-content;
+    box-shadow: awsui.$shadow-panel;
+  }
+
+  @include styles.with-motion {
+    transition: background-color awsui.$motion-duration-refresh-only-fast;
+  }
+
+  @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
+    /* stylelint-disable scss/operator-no-newline-after */
+    max-width: calc(
+      var(#{custom-props.$layoutWidth}) - var(#{custom-props.$mainOffsetLeft}) -
+        var(#{custom-props.$defaultMinContentWidth}) - var(#{custom-props.$contentGapRight})
+    );
+    /* stylelint-enable scss/operator-no-newline-after */
+  }
+
+  @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+    position: fixed;
+    right: 0;
+    top: var(#{custom-props.$offsetTop});
+    z-index: 1001;
+  }
+}
+
+.drawers-desktop-triggers-container {
+  @include styles.styles-reset;
+  background-color: transparent;
+  box-sizing: border-box;
+  height: 100%;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  overscroll-behavior-y: contain;
+
+  &:not(.has-multiple-triggers).has-open-drawer {
+    width: 0;
+  }
+
+  &.has-multiple-triggers.has-open-drawer {
+    background-color: awsui.$color-background-container-content;
+
+    @include styles.with-motion {
+      transition: background-color awsui.$motion-duration-refresh-only-fast;
+    }
+  }
+
+  &:not(.has-multiple-triggers):not(.has-open-drawer) {
+    width: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
+
+    @include styles.with-motion {
+      transition: width awsui.$motion-duration-refresh-only-fast;
+    }
+  }
+}
+
+.drawers-trigger-content {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: awsui.$space-xs;
+  padding-top: awsui.$space-scaled-s;
+  width: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
+
+  &:not(.has-multiple-triggers).has-open-drawer {
+    opacity: 0;
+  }
+
+  &:not(.has-multiple-triggers):not(.has-open-drawer) {
+    opacity: 1;
+
+    @include styles.with-motion {
+      transition: opacity awsui.$motion-duration-refresh-only-medium;
+      transition-delay: calc(awsui.$motion-duration-refresh-only-fast / 1.5);
+    }
+  }
+}
+
+.drawer {
+  #{custom-props.$activeDrawerWidth}: 290px;
+  background-color: awsui.$color-background-container-content;
+  border-color: transparent;
+  display: grid;
+  flex-shrink: 0;
+  grid-template-columns: 1fr auto awsui.$space-m;
+  grid-template-rows: awsui.$size-vertical-panel-icon-offset auto 1fr;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior-y: contain;
+  pointer-events: auto;
+  word-wrap: break-word;
+
+  > .drawer-close-button {
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  > .drawer-content {
+    grid-column: 1 / span 3;
+    grid-row: 1 / span 3;
+    width: var(#{custom-props.$activeDrawerWidth});
+  }
+
+  &:not(.is-drawer-open) {
+    opacity: 0;
+    width: 0;
+  }
+
+  &.is-drawer-open {
+    border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    opacity: 1;
+    width: var(#{custom-props.$activeDrawerWidth});
+  }
+
+  @include styles.with-motion {
+    transition: awsui.$motion-duration-refresh-only-fast;
+    transition-property: border-color, opacity, width;
+  }
+
+  @include styles.media-breakpoint-up(styles.$breakpoint-xx-large) {
+    &.is-drawer-open {
+      #{custom-props.$activeDrawerWidth}: 320px;
+    }
+  }
+
+  @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+    &.is-drawer-open {
+      #{custom-props.$activeDrawerWidth}: 100vw;
+    }
+  }
+}

package/lib/internal/scss/app-layout/visual-refresh/split-panel.scss

@@ -52,7 +52,7 @@ section.split-panel-bottom {
     grid-column-start: 2;
   }
 
-  &.is-tools-open.position-bottom {
+  &.has-open-drawer.position-bottom {
     grid-column-end: 5;
   }
 

package/lib/internal/scss/app-layout/visual-refresh/styles.scss

@@ -5,6 +5,7 @@
 
 @use './app-bar.scss';
 @use './background.scss';
+@use './drawers.scss';
 @use './header.scss';
 @use './layout.scss';
 @use './main.scss';

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

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

package/lib/internal/scss/space-between/styles.scss

@@ -50,33 +50,21 @@ $sizes-vertical: (
 
   @each $name, $size in $sizes-horizontal {
     &-#{$name} {
-      // This cancels out the margins of the children in the first row / in the first column.
-      margin-left: calc(-1 * #{$size});
-      margin-bottom: calc(-1 * #{$size});
+      gap: $size;
     }
   }
 }
 
-@each $name, $size in $sizes-horizontal {
-  .child-horizontal-#{$name} {
-    margin-left: $size;
-    margin-bottom: $size;
-
-    // This is a fix for IE11. It prevents the content from overflowing.
-    min-width: 1px;
-  }
-}
-
 /*
  * Vertical variant
  */
 
 .vertical {
   flex-direction: column;
-}
 
-@each $name, $size in $sizes-vertical {
-  .child-vertical-#{$name}:not(:last-child) {
-    margin-bottom: $size;
+  @each $name, $size in $sizes-vertical {
+    &-#{$name} {
+      row-gap: $size;
+    }
   }
 }

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

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_1hpp3_1t5h4_93",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_1t5h4_97",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_1t5h4_97",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1t5h4_128",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1t5h4_128",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1t5h4_131",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1t5h4_131",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1t5h4_134",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1t5h4_134",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1t5h4_137",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1t5h4_137",
-  "annotation": "awsui_annotation_1hpp3_1t5h4_145",
-  "next-button": "awsui_next-button_1hpp3_1t5h4_146",
-  "previous-button": "awsui_previous-button_1hpp3_1t5h4_147",
-  "finish-button": "awsui_finish-button_1hpp3_1t5h4_148",
-  "header": "awsui_header_1hpp3_1t5h4_149",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_1t5h4_150",
-  "content": "awsui_content_1hpp3_1t5h4_151",
-  "description": "awsui_description_1hpp3_1t5h4_155",
-  "actionBar": "awsui_actionBar_1hpp3_1t5h4_160",
-  "stepCounter": "awsui_stepCounter_1hpp3_1t5h4_167",
-  "divider": "awsui_divider_1hpp3_1t5h4_171",
-  "hotspot": "awsui_hotspot_1hpp3_1t5h4_175",
-  "icon": "awsui_icon_1hpp3_1t5h4_215"
+  "arrow": "awsui_arrow_1hpp3_1umef_93",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_1umef_97",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_1umef_97",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1umef_128",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1umef_128",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1umef_131",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1umef_131",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1umef_134",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1umef_134",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1umef_137",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1umef_137",
+  "annotation": "awsui_annotation_1hpp3_1umef_145",
+  "next-button": "awsui_next-button_1hpp3_1umef_146",
+  "previous-button": "awsui_previous-button_1hpp3_1umef_147",
+  "finish-button": "awsui_finish-button_1hpp3_1umef_148",
+  "header": "awsui_header_1hpp3_1umef_149",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_1umef_150",
+  "content": "awsui_content_1hpp3_1umef_151",
+  "description": "awsui_description_1hpp3_1umef_155",
+  "actionBar": "awsui_actionBar_1hpp3_1umef_160",
+  "stepCounter": "awsui_stepCounter_1hpp3_1umef_167",
+  "divider": "awsui_divider_1hpp3_1umef_171",
+  "hotspot": "awsui_hotspot_1hpp3_1umef_175",
+  "icon": "awsui_icon_1hpp3_1umef_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_1t5h4_93:not(#\9) {
+.awsui_arrow_1hpp3_1umef_93:not(#\9) {
   width: 20px;
   height: 10px;
 }
-.awsui_arrow-outer_1hpp3_1t5h4_97:not(#\9), .awsui_arrow-inner_1hpp3_1t5h4_97:not(#\9) {
+.awsui_arrow-outer_1hpp3_1umef_97:not(#\9), .awsui_arrow-inner_1hpp3_1umef_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_1t5h4_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_1t5h4_97:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_1umef_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_1t5h4_97:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after {
   background-color: var(--color-border-status-info-0iedcr, #0073bb);
 }
-.awsui_arrow-inner_1hpp3_1t5h4_97:not(#\9) {
+.awsui_arrow-inner_1hpp3_1umef_97:not(#\9) {
   top: 2px;
 }
-.awsui_arrow-inner_1hpp3_1t5h4_97:not(#\9)::after {
+.awsui_arrow-inner_1hpp3_1umef_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_1t5h4_128 > .awsui_arrow-outer_1hpp3_1t5h4_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1t5h4_128 > .awsui_arrow-outer_1hpp3_1t5h4_97:not(#\9)::after {
+.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 {
   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_1t5h4_131 > .awsui_arrow-outer_1hpp3_1t5h4_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1t5h4_131 > .awsui_arrow-outer_1hpp3_1t5h4_97:not(#\9)::after {
+.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 {
   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_1t5h4_134 > .awsui_arrow-outer_1hpp3_1t5h4_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1t5h4_134 > .awsui_arrow-outer_1hpp3_1t5h4_97:not(#\9)::after {
+.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 {
   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_1t5h4_137 > .awsui_arrow-outer_1hpp3_1t5h4_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1t5h4_137 > .awsui_arrow-outer_1hpp3_1t5h4_97:not(#\9)::after {
+.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 {
   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_1t5h4_145:not(#\9),
-.awsui_next-button_1hpp3_1t5h4_146:not(#\9),
-.awsui_previous-button_1hpp3_1t5h4_147:not(#\9),
-.awsui_finish-button_1hpp3_1t5h4_148:not(#\9),
-.awsui_header_1hpp3_1t5h4_149:not(#\9),
-.awsui_step-counter-content_1hpp3_1t5h4_150:not(#\9),
-.awsui_content_1hpp3_1t5h4_151:not(#\9) {
+.awsui_annotation_1hpp3_1umef_145:not(#\9),
+.awsui_next-button_1hpp3_1umef_146:not(#\9),
+.awsui_previous-button_1hpp3_1umef_147:not(#\9),
+.awsui_finish-button_1hpp3_1umef_148:not(#\9),
+.awsui_header_1hpp3_1umef_149:not(#\9),
+.awsui_step-counter-content_1hpp3_1umef_150:not(#\9),
+.awsui_content_1hpp3_1umef_151:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_description_1hpp3_1t5h4_155:not(#\9) {
+.awsui_description_1hpp3_1umef_155:not(#\9) {
   overflow: hidden;
   margin-top: var(--space-xxs-ynfts5, 4px);
 }
 
-.awsui_actionBar_1hpp3_1t5h4_160:not(#\9) {
+.awsui_actionBar_1hpp3_1umef_160:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
 
-.awsui_stepCounter_1hpp3_1t5h4_167:not(#\9) {
+.awsui_stepCounter_1hpp3_1umef_167:not(#\9) {
   margin-right: 20px;
 }
 
-.awsui_divider_1hpp3_1t5h4_171:not(#\9) {
+.awsui_divider_1hpp3_1umef_171:not(#\9) {
   border-bottom: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
 }
 
-.awsui_hotspot_1hpp3_1t5h4_175:not(#\9) {
+.awsui_hotspot_1hpp3_1umef_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-lgrg0d, 40px 0 0 0);
+  scroll-margin: var(--awsui-content-scroll-margin-3j0evk, 40px 0 0 0);
   width: 16px;
   height: 16px;
 }
-.awsui_hotspot_1hpp3_1t5h4_175:not(#\9):focus {
+.awsui_hotspot_1hpp3_1umef_175:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1t5h4_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1umef_175:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1t5h4_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1umef_175:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1t5h4_175:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1umef_175:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -238,13 +238,13 @@ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1t5h4_175:not(#\9):focu
   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_1t5h4_175 > .awsui_icon_1hpp3_1t5h4_215:not(#\9) {
+.awsui_hotspot_1hpp3_1umef_175 > .awsui_icon_1hpp3_1umef_215:not(#\9) {
   position: relative;
   stroke: var(--color-text-link-default-753y4e, #0073bb);
 }
-.awsui_hotspot_1hpp3_1t5h4_175:not(#\9):hover > .awsui_icon_1hpp3_1t5h4_215 {
+.awsui_hotspot_1hpp3_1umef_175:not(#\9):hover > .awsui_icon_1hpp3_1umef_215 {
   stroke: var(--color-text-link-hover-ok01xk, #0073bb);
 }
-.awsui_hotspot_1hpp3_1t5h4_175:not(#\9):active > .awsui_icon_1hpp3_1t5h4_215 {
+.awsui_hotspot_1hpp3_1umef_175:not(#\9):active > .awsui_icon_1hpp3_1umef_215 {
   stroke: var(--color-text-link-default-753y4e, #0073bb);
 }