@cloudscape-design/components-themeable 3.0.972 → 3.0.974

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "606516965b14b34aa40190916eca7b0f132fac9e"
+  "commit": "edc398833b88a84cf3e399a40bab01ceeeeae075"
 }

package/lib/internal/scss/internal/components/drag-handle-wrapper/motion.scss

@@ -4,187 +4,79 @@
 */
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
+@use '../../generated/custom-css-properties/index.scss' as custom-props;
 
-.direction-button-wrapper {
-  @include styles.with-motion {
-    @include styles.animation-fade-in;
-    @include styles.animation-fade-out-0;
-  }
-}
-
-.direction-button-wrapper-motion-enter,
-.direction-button-wrapper-motion-entering,
-.direction-button-wrapper-motion-exit,
-.direction-button-wrapper-motion-exiting {
-  @include styles.with-motion {
-    pointer-events: none;
+@keyframes drag-handle-entry {
+  from {
+    transform: translate(
+      var(#{custom-props.$dragHandleAnimationInlineOffset}),
+      var(#{custom-props.$dragHandleAnimationBlockOffset})
+    );
+  }
+  to {
+    transform: translate(0, 0);
   }
 }
 
-.direction-button-wrapper-block-start {
-  &.direction-button-wrapper-motion-entering {
-    @include styles.with-motion {
-      animation:
-        slide-up awsui.$motion-duration-complex awsui.$motion-easing-responsive,
-        awsui-motion-fade-in awsui.$motion-duration-complex awsui.$motion-easing-responsive;
-    }
+@keyframes drag-handle-exit {
+  from {
+    transform: translate(0, 0);
   }
-  &.direction-button-wrapper-motion-exiting {
-    @include styles.with-motion {
-      animation:
-        slide-up-exit awsui.$motion-duration-complex awsui.$motion-easing-responsive,
-        awsui-motion-fade-out-0 awsui.$motion-duration-complex awsui.$motion-easing-responsive;
-    }
+  to {
+    transform: translate(
+      var(#{custom-props.$dragHandleAnimationInlineOffset}),
+      var(#{custom-props.$dragHandleAnimationBlockOffset})
+    );
   }
 }
 
-.direction-button-wrapper-block-end {
-  &.direction-button-wrapper-motion-entering {
-    @include styles.with-motion {
-      animation:
-        slide-down awsui.$motion-duration-complex awsui.$motion-easing-responsive,
-        awsui-motion-fade-in awsui.$motion-duration-complex awsui.$motion-easing-responsive;
-    }
-  }
-  &.direction-button-wrapper-motion-exiting {
-    @include styles.with-motion {
-      animation:
-        slide-down-exit awsui.$motion-duration-complex awsui.$motion-easing-responsive,
-        awsui-motion-fade-out-0 awsui.$motion-duration-complex awsui.$motion-easing-responsive;
-    }
-  }
-}
+.direction-button-wrapper {
+  #{custom-props.$dragHandleAnimationInlineOffset}: 0;
+  #{custom-props.$dragHandleAnimationBlockOffset}: 0;
 
-.direction-button-wrapper-inline-start {
-  &.direction-button-wrapper-motion-entering {
-    @include styles.with-motion {
-      animation:
-        slide-left awsui.$motion-duration-complex awsui.$motion-easing-responsive,
-        awsui-motion-fade-in awsui.$motion-duration-complex awsui.$motion-easing-responsive;
-    }
-  }
-  &.direction-button-wrapper-rtl.direction-button-wrapper-motion-entering {
-    @include styles.with-motion {
-      animation:
-        slide-right awsui.$motion-duration-complex awsui.$motion-easing-responsive,
-        awsui-motion-fade-in awsui.$motion-duration-complex awsui.$motion-easing-responsive;
-    }
-  }
-  &.direction-button-wrapper-motion-exiting {
-    @include styles.with-motion {
-      animation:
-        slide-left-exit awsui.$motion-duration-complex awsui.$motion-easing-responsive,
-        awsui-motion-fade-out-0 awsui.$motion-duration-complex awsui.$motion-easing-responsive;
-    }
-  }
-  &.direction-button-wrapper-rtl.direction-button-wrapper-motion-exiting {
-    @include styles.with-motion {
-      animation:
-        slide-right-exit awsui.$motion-duration-complex awsui.$motion-easing-responsive,
-        awsui-motion-fade-out-0 awsui.$motion-duration-complex awsui.$motion-easing-responsive;
-    }
-  }
-}
+  @include styles.with-motion {
+    @include styles.animation-fade-in;
+    @include styles.animation-fade-out-0;
 
-.direction-button-wrapper-inline-end {
-  &.direction-button-wrapper-motion-entering {
-    @include styles.with-motion {
-      animation:
-        slide-right awsui.$motion-duration-complex awsui.$motion-easing-responsive,
-        awsui-motion-fade-in awsui.$motion-duration-complex awsui.$motion-easing-responsive;
-    }
-  }
-  &.direction-button-wrapper-rtl.direction-button-wrapper-motion-entering {
-    @include styles.with-motion {
-      animation:
-        slide-left awsui.$motion-duration-complex awsui.$motion-easing-responsive,
-        awsui-motion-fade-in awsui.$motion-duration-complex awsui.$motion-easing-responsive;
-    }
-  }
-  &.direction-button-wrapper-motion-exiting {
-    @include styles.with-motion {
-      animation:
-        slide-right-exit awsui.$motion-duration-complex awsui.$motion-easing-responsive,
-        awsui-motion-fade-out-0 awsui.$motion-duration-complex awsui.$motion-easing-responsive;
+    &-motion-enter,
+    &-motion-entering,
+    &-motion-exit,
+    &-motion-exiting {
+      pointer-events: none;
     }
-  }
-  &.direction-button-wrapper-rtl.direction-button-wrapper-motion-exiting {
-    @include styles.with-motion {
-      animation:
-        slide-left-exit awsui.$motion-duration-complex awsui.$motion-easing-responsive,
-        awsui-motion-fade-out-0 awsui.$motion-duration-complex awsui.$motion-easing-responsive;
-    }
-  }
-}
-
-@keyframes slide-up {
-  0% {
-    transform: translate(0, 20px);
-  }
-  100% {
-    transform: translate(0, 0);
-  }
-}
 
-@keyframes slide-up-exit {
-  0% {
-    transform: translate(0, 0);
-  }
-  100% {
-    transform: translate(0, 20px);
-  }
-}
-
-@keyframes slide-down {
-  0% {
-    transform: translate(0, -20px);
-  }
-  100% {
-    transform: translate(0, 0);
-  }
-}
+    &-motion-entering {
+      @include styles.with-motion {
+        animation:
+          drag-handle-entry awsui.$motion-duration-complex awsui.$motion-easing-responsive,
+          awsui-motion-fade-in awsui.$motion-duration-complex awsui.$motion-easing-responsive;
+      }
+    }
 
-@keyframes slide-down-exit {
-  0% {
-    transform: translate(0, 0);
-  }
-  100% {
-    transform: translate(0, -20px);
+    &-motion-exiting {
+      @include styles.with-motion {
+        animation:
+          drag-handle-exit awsui.$motion-duration-complex awsui.$motion-easing-responsive,
+          awsui-motion-fade-out-0 awsui.$motion-duration-complex awsui.$motion-easing-responsive;
+      }
+    }
   }
 }
 
-@keyframes slide-left {
-  0% {
-    transform: translate(20px, 0);
-  }
-  100% {
-    transform: translate(0, 0);
-  }
+.direction-button-wrapper-block-start {
+  #{custom-props.$dragHandleAnimationBlockOffset}: 20px;
 }
 
-@keyframes slide-left-exit {
-  0% {
-    transform: translate(0, 0);
-  }
-  100% {
-    transform: translate(20px, 0);
-  }
+.direction-button-wrapper-block-end {
+  #{custom-props.$dragHandleAnimationBlockOffset}: -20px;
 }
 
-@keyframes slide-right {
-  0% {
-    transform: translate(-20px, 0);
-  }
-  100% {
-    transform: translate(0, 0);
-  }
+.direction-button-wrapper-inline-start,
+.direction-button-wrapper-inline-end.direction-button-wrapper-rtl {
+  #{custom-props.$dragHandleAnimationInlineOffset}: 20px;
 }
 
-@keyframes slide-right-exit {
-  0% {
-    transform: translate(0, 0);
-  }
-  100% {
-    transform: translate(-20px, 0);
-  }
+.direction-button-wrapper-inline-end,
+.direction-button-wrapper-inline-start.direction-button-wrapper-rtl {
+  #{custom-props.$dragHandleAnimationInlineOffset}: -20px;
 }

package/lib/internal/scss/internal/components/panel-resize-handle/styles.scss

@@ -11,10 +11,9 @@
   padding-block: 0;
   padding-inline: 0;
   cursor: ns-resize;
-  margin-block-start: 2px;
-  margin-block-end: 0;
+  margin-block: 0;
   margin-inline: 0;
-  block-size: 16px;
+  block-size: 18px;
   // Desktop Safari doesn't support touch events, but Safari on iOS does.
   // stylelint-disable-next-line plugin/no-unsupported-browser-features
   touch-action: none;
@@ -30,21 +29,5 @@
 
 .slider-side {
   cursor: ew-resize;
-  margin-block: 0;
-  margin-inline-start: 2px;
-  margin-inline-end: 0;
-}
-
-.slider-icon {
-  stroke: awsui.$color-text-interactive-default;
-  &:hover {
-    stroke: awsui.$color-text-interactive-hover;
-  }
-  &-bottom {
-    margin-block: auto;
-    margin-inline: auto;
-  }
-  &-side {
-    transform: rotate(90deg);
-  }
+  padding-inline-start: 2px;
 }

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

@@ -1,59 +1,61 @@
 
-    $maxContentWidth: --awsui-max-content-width-g964ok;
-$minContentWidth: --awsui-min-content-width-g964ok;
-$breadcrumbsGap: --awsui-breadcrumbs-gap-g964ok;
-$contentGapLeft: --awsui-content-gap-left-g964ok;
-$contentGapRight: --awsui-content-gap-right-g964ok;
-$contentHeight: --awsui-content-height-g964ok;
-$contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-g964ok;
-$contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-g964ok;
-$contentLayoutMainGap: --awsui-content-layout-main-gap-g964ok;
-$defaultMaxContentWidth: --awsui-default-max-content-width-g964ok;
-$defaultMinContentWidth: --awsui-default-min-content-width-g964ok;
-$drawerSize: --awsui-drawer-size-g964ok;
-$footerHeight: --awsui-footer-height-g964ok;
-$headerGap: --awsui-header-gap-g964ok;
-$headerHeight: --awsui-header-height-g964ok;
-$layoutWidth: --awsui-layout-width-g964ok;
-$mainGap: --awsui-main-gap-g964ok;
-$mainOffsetLeft: --awsui-main-offset-left-g964ok;
-$mainTemplateRows: --awsui-main-template-rows-g964ok;
-$mobileBarHeight: --awsui-mobile-bar-height-g964ok;
-$notificationsHeight: --awsui-notifications-height-g964ok;
-$offsetTop: --awsui-offset-top-g964ok;
-$overlapHeight: --awsui-overlap-height-g964ok;
-$navigationWidth: --awsui-navigation-width-g964ok;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-g964ok;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-g964ok;
-$splitPanelHeight: --awsui-split-panel-height-g964ok;
-$splitPanelMinWidth: --awsui-split-panel-min-width-g964ok;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-g964ok;
-$toolsMaxWidth: --awsui-tools-max-width-g964ok;
-$toolsWidth: --awsui-tools-width-g964ok;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-g964ok;
-$contentScrollMargin: --awsui-content-scroll-margin-g964ok;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-g964ok;
-$flashbarStackIndex: --awsui-flashbar-stack-index-g964ok;
-$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-g964ok;
-$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-g964ok;
-$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-g964ok;
-$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-g964ok;
-$spinnerRotatorFrom: --awsui-spinner-rotator-from-g964ok;
-$spinnerRotatorTo: --awsui-spinner-rotator-to-g964ok;
-$spinnerLineLeftFrom: --awsui-spinner-line-left-from-g964ok;
-$spinnerLineLeftTo: --awsui-spinner-line-left-to-g964ok;
-$spinnerLineRightFrom: --awsui-spinner-line-right-from-g964ok;
-$spinnerLineRightTo: --awsui-spinner-line-right-to-g964ok;
-$sliderLabelCount: --awsui-slider-label-count-g964ok;
-$sliderTickCount: --awsui-slider-tick-count-g964ok;
-$sliderReferenceColumn: --awsui-slider-reference-column-g964ok;
-$sliderNextReferenceColumn: --awsui-slider-next-reference-column-g964ok;
-$sliderMaxStart: --awsui-slider-max-start-g964ok;
-$sliderMinEnd: --awsui-slider-min-end-g964ok;
-$sliderRangeInlineSize: --awsui-slider-range-inline-size-g964ok;
-$sliderTooltipPosition: --awsui-slider-tooltip-position-g964ok;
-$togglesLeftWidth: --awsui-toggles-left-width-g964ok;
-$togglesRightWidth: --awsui-toggles-right-width-g964ok;
-$promptInputMaxRows: --awsui-prompt-input-max-rows-g964ok;
-$promptInputScrollHeight: --awsui-prompt-input-scroll-height-g964ok;
+    $maxContentWidth: --awsui-max-content-width-xgujsu;
+$minContentWidth: --awsui-min-content-width-xgujsu;
+$breadcrumbsGap: --awsui-breadcrumbs-gap-xgujsu;
+$contentGapLeft: --awsui-content-gap-left-xgujsu;
+$contentGapRight: --awsui-content-gap-right-xgujsu;
+$contentHeight: --awsui-content-height-xgujsu;
+$contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-xgujsu;
+$contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-xgujsu;
+$contentLayoutMainGap: --awsui-content-layout-main-gap-xgujsu;
+$defaultMaxContentWidth: --awsui-default-max-content-width-xgujsu;
+$defaultMinContentWidth: --awsui-default-min-content-width-xgujsu;
+$drawerSize: --awsui-drawer-size-xgujsu;
+$footerHeight: --awsui-footer-height-xgujsu;
+$headerGap: --awsui-header-gap-xgujsu;
+$headerHeight: --awsui-header-height-xgujsu;
+$layoutWidth: --awsui-layout-width-xgujsu;
+$mainGap: --awsui-main-gap-xgujsu;
+$mainOffsetLeft: --awsui-main-offset-left-xgujsu;
+$mainTemplateRows: --awsui-main-template-rows-xgujsu;
+$mobileBarHeight: --awsui-mobile-bar-height-xgujsu;
+$notificationsHeight: --awsui-notifications-height-xgujsu;
+$offsetTop: --awsui-offset-top-xgujsu;
+$overlapHeight: --awsui-overlap-height-xgujsu;
+$navigationWidth: --awsui-navigation-width-xgujsu;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-xgujsu;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-xgujsu;
+$splitPanelHeight: --awsui-split-panel-height-xgujsu;
+$splitPanelMinWidth: --awsui-split-panel-min-width-xgujsu;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-xgujsu;
+$toolsMaxWidth: --awsui-tools-max-width-xgujsu;
+$toolsWidth: --awsui-tools-width-xgujsu;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-xgujsu;
+$contentScrollMargin: --awsui-content-scroll-margin-xgujsu;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-xgujsu;
+$flashbarStackIndex: --awsui-flashbar-stack-index-xgujsu;
+$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-xgujsu;
+$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-xgujsu;
+$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-xgujsu;
+$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-xgujsu;
+$spinnerRotatorFrom: --awsui-spinner-rotator-from-xgujsu;
+$spinnerRotatorTo: --awsui-spinner-rotator-to-xgujsu;
+$spinnerLineLeftFrom: --awsui-spinner-line-left-from-xgujsu;
+$spinnerLineLeftTo: --awsui-spinner-line-left-to-xgujsu;
+$spinnerLineRightFrom: --awsui-spinner-line-right-from-xgujsu;
+$spinnerLineRightTo: --awsui-spinner-line-right-to-xgujsu;
+$sliderLabelCount: --awsui-slider-label-count-xgujsu;
+$sliderTickCount: --awsui-slider-tick-count-xgujsu;
+$sliderReferenceColumn: --awsui-slider-reference-column-xgujsu;
+$sliderNextReferenceColumn: --awsui-slider-next-reference-column-xgujsu;
+$sliderMaxStart: --awsui-slider-max-start-xgujsu;
+$sliderMinEnd: --awsui-slider-min-end-xgujsu;
+$sliderRangeInlineSize: --awsui-slider-range-inline-size-xgujsu;
+$sliderTooltipPosition: --awsui-slider-tooltip-position-xgujsu;
+$togglesLeftWidth: --awsui-toggles-left-width-xgujsu;
+$togglesRightWidth: --awsui-toggles-right-width-xgujsu;
+$promptInputMaxRows: --awsui-prompt-input-max-rows-xgujsu;
+$promptInputScrollHeight: --awsui-prompt-input-scroll-height-xgujsu;
+$dragHandleAnimationInlineOffset: --awsui-drag-handle-animation-inline-offset-xgujsu;
+$dragHandleAnimationBlockOffset: --awsui-drag-handle-animation-block-offset-xgujsu;
     

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

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_1hpp3_tb8th_193",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_tb8th_197",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_tb8th_197",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_tb8th_239",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_tb8th_239",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_tb8th_242",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_tb8th_242",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_tb8th_245",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_tb8th_245",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_tb8th_248",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_tb8th_248",
-  "annotation": "awsui_annotation_1hpp3_tb8th_252",
-  "next-button": "awsui_next-button_1hpp3_tb8th_253",
-  "previous-button": "awsui_previous-button_1hpp3_tb8th_254",
-  "finish-button": "awsui_finish-button_1hpp3_tb8th_255",
-  "header": "awsui_header_1hpp3_tb8th_256",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_tb8th_257",
-  "content": "awsui_content_1hpp3_tb8th_258",
-  "description": "awsui_description_1hpp3_tb8th_262",
-  "actionBar": "awsui_actionBar_1hpp3_tb8th_267",
-  "stepCounter": "awsui_stepCounter_1hpp3_tb8th_274",
-  "divider": "awsui_divider_1hpp3_tb8th_278",
-  "hotspot": "awsui_hotspot_1hpp3_tb8th_282",
-  "icon": "awsui_icon_1hpp3_tb8th_352"
+  "arrow": "awsui_arrow_1hpp3_10nys_193",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_10nys_197",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_10nys_197",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_10nys_239",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_10nys_239",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_10nys_242",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_10nys_242",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_10nys_245",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_10nys_245",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_10nys_248",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_10nys_248",
+  "annotation": "awsui_annotation_1hpp3_10nys_252",
+  "next-button": "awsui_next-button_1hpp3_10nys_253",
+  "previous-button": "awsui_previous-button_1hpp3_10nys_254",
+  "finish-button": "awsui_finish-button_1hpp3_10nys_255",
+  "header": "awsui_header_1hpp3_10nys_256",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_10nys_257",
+  "content": "awsui_content_1hpp3_10nys_258",
+  "description": "awsui_description_1hpp3_10nys_262",
+  "actionBar": "awsui_actionBar_1hpp3_10nys_267",
+  "stepCounter": "awsui_stepCounter_1hpp3_10nys_274",
+  "divider": "awsui_divider_1hpp3_10nys_278",
+  "hotspot": "awsui_hotspot_1hpp3_10nys_282",
+  "icon": "awsui_icon_1hpp3_10nys_352"
 };
   

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

@@ -190,11 +190,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_tb8th_193:not(#\9) {
+.awsui_arrow_1hpp3_10nys_193:not(#\9) {
   inline-size: 20px;
   block-size: 10px;
 }
-.awsui_arrow-outer_1hpp3_tb8th_197:not(#\9), .awsui_arrow-inner_1hpp3_tb8th_197:not(#\9) {
+.awsui_arrow-outer_1hpp3_10nys_197:not(#\9), .awsui_arrow-inner_1hpp3_10nys_197:not(#\9) {
   position: absolute;
   overflow: hidden;
   inline-size: 20px;
@@ -203,7 +203,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-inline-start: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_arrow-outer_1hpp3_tb8th_197:not(#\9)::after, .awsui_arrow-inner_1hpp3_tb8th_197:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_10nys_197:not(#\9)::after, .awsui_arrow-inner_1hpp3_10nys_197:not(#\9)::after {
   content: "";
   box-sizing: border-box;
   display: inline-block;
@@ -219,67 +219,67 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transform: rotate(45deg);
   transform-origin: 0 100%;
 }
-.awsui_arrow-outer_1hpp3_tb8th_197:not(#\9):dir(rtl)::after, .awsui_arrow-inner_1hpp3_tb8th_197:not(#\9):dir(rtl)::after {
+.awsui_arrow-outer_1hpp3_10nys_197:not(#\9):dir(rtl)::after, .awsui_arrow-inner_1hpp3_10nys_197:not(#\9):dir(rtl)::after {
   transform: rotate(-45deg);
   transform-origin: 100% 100%;
 }
-.awsui_arrow-outer_1hpp3_tb8th_197:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_10nys_197:not(#\9)::after {
   background-color: var(--color-border-status-info-g9isw4, #0073bb);
 }
-.awsui_arrow-inner_1hpp3_tb8th_197:not(#\9) {
+.awsui_arrow-inner_1hpp3_10nys_197:not(#\9) {
   inset-block-start: 2px;
 }
-.awsui_arrow-inner_1hpp3_tb8th_197:not(#\9)::after {
+.awsui_arrow-inner_1hpp3_10nys_197:not(#\9)::after {
   border-start-start-radius: 1px;
   border-start-end-radius: 0;
   border-end-start-radius: 0;
   border-end-end-radius: 0;
   background-color: var(--color-background-status-info-jgwdx5, #f1faff);
 }
-.awsui_arrow-position-right-top_1hpp3_tb8th_239 > .awsui_arrow-outer_1hpp3_tb8th_197:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_tb8th_239 > .awsui_arrow-outer_1hpp3_tb8th_197:not(#\9)::after {
+.awsui_arrow-position-right-top_1hpp3_10nys_239 > .awsui_arrow-outer_1hpp3_10nys_197:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_10nys_239 > .awsui_arrow-outer_1hpp3_10nys_197:not(#\9)::after {
   box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-6xqmgt, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-left-top_1hpp3_tb8th_242 > .awsui_arrow-outer_1hpp3_tb8th_197:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_tb8th_242 > .awsui_arrow-outer_1hpp3_tb8th_197:not(#\9)::after {
+.awsui_arrow-position-left-top_1hpp3_10nys_242 > .awsui_arrow-outer_1hpp3_10nys_197:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_10nys_242 > .awsui_arrow-outer_1hpp3_10nys_197:not(#\9)::after {
   box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-6xqmgt, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-top-center_1hpp3_tb8th_245 > .awsui_arrow-outer_1hpp3_tb8th_197:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_tb8th_245 > .awsui_arrow-outer_1hpp3_tb8th_197:not(#\9)::after {
+.awsui_arrow-position-top-center_1hpp3_10nys_245 > .awsui_arrow-outer_1hpp3_10nys_197:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_10nys_245 > .awsui_arrow-outer_1hpp3_10nys_197:not(#\9)::after {
   box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-6xqmgt, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-bottom-center_1hpp3_tb8th_248 > .awsui_arrow-outer_1hpp3_tb8th_197:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_tb8th_248 > .awsui_arrow-outer_1hpp3_tb8th_197:not(#\9)::after {
+.awsui_arrow-position-bottom-center_1hpp3_10nys_248 > .awsui_arrow-outer_1hpp3_10nys_197:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_10nys_248 > .awsui_arrow-outer_1hpp3_10nys_197:not(#\9)::after {
   box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-6xqmgt, rgba(0, 28, 36, 0.5));
 }
 
-.awsui_annotation_1hpp3_tb8th_252:not(#\9),
-.awsui_next-button_1hpp3_tb8th_253:not(#\9),
-.awsui_previous-button_1hpp3_tb8th_254:not(#\9),
-.awsui_finish-button_1hpp3_tb8th_255:not(#\9),
-.awsui_header_1hpp3_tb8th_256:not(#\9),
-.awsui_step-counter-content_1hpp3_tb8th_257:not(#\9),
-.awsui_content_1hpp3_tb8th_258:not(#\9) {
+.awsui_annotation_1hpp3_10nys_252:not(#\9),
+.awsui_next-button_1hpp3_10nys_253:not(#\9),
+.awsui_previous-button_1hpp3_10nys_254:not(#\9),
+.awsui_finish-button_1hpp3_10nys_255:not(#\9),
+.awsui_header_1hpp3_10nys_256:not(#\9),
+.awsui_step-counter-content_1hpp3_10nys_257:not(#\9),
+.awsui_content_1hpp3_10nys_258:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_description_1hpp3_tb8th_262:not(#\9) {
+.awsui_description_1hpp3_10nys_262:not(#\9) {
   overflow: hidden;
   margin-block-start: var(--space-xxs-jnczic, 4px);
 }
 
-.awsui_actionBar_1hpp3_tb8th_267:not(#\9) {
+.awsui_actionBar_1hpp3_10nys_267:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
 
-.awsui_stepCounter_1hpp3_tb8th_274:not(#\9) {
+.awsui_stepCounter_1hpp3_10nys_274:not(#\9) {
   margin-inline-end: 20px;
 }
 
-.awsui_divider_1hpp3_tb8th_278:not(#\9) {
+.awsui_divider_1hpp3_10nys_278:not(#\9) {
   border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-divider-default-pt4umz, #eaeded);
 }
 
-.awsui_hotspot_1hpp3_tb8th_282:not(#\9) {
+.awsui_hotspot_1hpp3_10nys_282:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -316,27 +316,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: 0;
   padding-inline: 0;
   cursor: pointer;
-  scroll-margin: var(--awsui-content-scroll-margin-g964ok, 40px 0 0 0);
+  scroll-margin: var(--awsui-content-scroll-margin-xgujsu, 40px 0 0 0);
   position: relative;
   inline-size: 16px;
   block-size: 16px;
 }
-.awsui_hotspot_1hpp3_tb8th_282:not(#\9):before {
+.awsui_hotspot_1hpp3_10nys_282:not(#\9):before {
   content: "";
   position: absolute;
   inset: calc(-1 * var(--space-xxs-jnczic, 4px));
 }
-.awsui_hotspot_1hpp3_tb8th_282:not(#\9):focus {
+.awsui_hotspot_1hpp3_10nys_282:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_tb8th_282:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_10nys_282:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_tb8th_282:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_10nys_282:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_tb8th_282:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_10nys_282:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -350,13 +350,13 @@ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_tb8th_282:not(#\9):focu
   border-end-end-radius: var(--border-radius-control-circular-focus-ring-0v2apg, 50%);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-vx5mpq, #0073bb);
 }
-.awsui_hotspot_1hpp3_tb8th_282 > .awsui_icon_1hpp3_tb8th_352:not(#\9) {
+.awsui_hotspot_1hpp3_10nys_282 > .awsui_icon_1hpp3_10nys_352:not(#\9) {
   position: relative;
   stroke: var(--color-text-link-default-kjmmv0, #0073bb);
 }
-.awsui_hotspot_1hpp3_tb8th_282:not(#\9):hover > .awsui_icon_1hpp3_tb8th_352 {
+.awsui_hotspot_1hpp3_10nys_282:not(#\9):hover > .awsui_icon_1hpp3_10nys_352 {
   stroke: var(--color-text-link-hover-05b2tl, #0a4a74);
 }
-.awsui_hotspot_1hpp3_tb8th_282:not(#\9):active > .awsui_icon_1hpp3_tb8th_352 {
+.awsui_hotspot_1hpp3_10nys_282:not(#\9):active > .awsui_icon_1hpp3_10nys_352 {
   stroke: var(--color-text-link-default-kjmmv0, #0073bb);
 }