@cloudscape-design/components-themeable 3.0.699 → 3.0.701

package/lib/internal/scss/prompt-input/test-classes/styles.scss

@@ -0,0 +1,15 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.root {
+  /* used in test-utils */
+}
+
+.textarea {
+  /* used in test-utils */
+}
+
+.action-button {
+  /* used in test-utils */
+}

package/lib/internal/scss/{internal/components → property-filter}/filtering-token/styles.scss

@@ -3,10 +3,10 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../../styles' as styles;
-@use '../../styles/tokens' as awsui;
-@use '../../hooks/focus-visible' as focus-visible;
-@use '../../../token-group/constants' as constants;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
+@use '../../internal/styles' as styles;
+@use '../../internal/styles/tokens' as awsui;
+@use '../../token-group/constants' as constants;
 
 .root {
   display: flex;

package/lib/internal/scss/property-filter/test-classes/styles.scss

@@ -0,0 +1,33 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.filtering-token {
+  /* used in test-utils */
+}
+.filtering-token-dismiss-button {
+  /* used in test-utils */
+}
+.filtering-token-select {
+  /* used in test-utils */
+}
+.filtering-token-content {
+  /* used in test-utils */
+}
+
+.token-editor-field-property {
+  /* used in test-utils */
+}
+.token-editor-field-operator {
+  /* used in test-utils */
+}
+.token-editor-field-value {
+  /* used in test-utils */
+}
+.token-editor-cancel {
+  /* used in test-utils */
+}
+.token-editor-submit {
+  /* used in test-utils */
+}

package/lib/internal/scss/radio-group/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $radio-size: awsui.$size-control;
 

package/lib/internal/scss/segmented-control/segment.scss

@@ -7,7 +7,7 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 @use '../button/constants' as constants;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $segment-properties: (
   'default-background': awsui.$color-background-segment-default,

package/lib/internal/scss/select/parts/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
-@use '../../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .placeholder {
   @include styles.form-placeholder;

package/lib/internal/scss/side-navigation/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .root {
   @include styles.styles-reset;

package/lib/internal/scss/slider/mixins.scss

@@ -61,6 +61,8 @@ $border-radius-slider-thumb: 50%;
 }
 
 @mixin base-thumb-disabled-styles {
+  block-size: $thumb-size;
+  inline-size: $thumb-size;
   background-color: awsui.$color-background-control-disabled;
   border-color: awsui.$color-background-control-disabled;
   box-shadow: none;

package/lib/internal/scss/slider/styles.scss

@@ -31,10 +31,6 @@
     border-end-end-radius: 3px;
     margin-block-start: awsui.$space-xs;
     margin-inline: calc(mixins.$thumb-size / -2);
-
-    &.readonly:not(&.disabled) {
-      margin-inline: calc(mixins.$thumb-readonly-size / -2);
-    }
   }
 
   &-track {
@@ -51,7 +47,6 @@
     &.readonly:not(&.disabled) {
       cursor: default;
       background-color: awsui.$color-background-control-disabled;
-      inline-size: calc(100% + mixins.$thumb-readonly-size);
     }
   }
 
@@ -187,7 +182,7 @@
   &.filled {
     background: awsui.$color-background-slider-handle-default;
 
-    &.readonly:not(.tick-disabled) {
+    &.readonly:not(.disabled) {
       background: awsui.$color-foreground-control-read-only;
     }
   }

package/lib/internal/scss/split-panel/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../app-layout/constants' as constants;
 
 @import './motion';

package/lib/internal/scss/table/body-cell/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
-@use '../../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $cell-vertical-padding: awsui.$space-scaled-xs;
 // Calculate padding to prevent a shift in content after selection due to the difference
@@ -56,21 +56,36 @@ $cell-offset: calc(#{awsui.$space-m} + #{awsui.$space-xs});
   inset-block: 0;
   display: flex;
   align-items: center;
-  margin-inline-start: calc(-1 * #{$cell-offset});
 }
 
 @mixin cell-padding-inline-start($padding) {
+  $max-nesting-levels: 9;
+  $offset-padding: calc($padding - 1 * awsui.$border-divider-list-width);
+
   > .body-cell-content {
-    padding-inline-start: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
+    margin-inline-start: $offset-padding;
+  }
+  > .expandable-toggle-wrapper {
+    margin-inline-start: $offset-padding;
   }
 
-  @for $i from 0 through 9 {
-    &.expandable-level-#{$i} > .body-cell-content {
-      padding-inline-start: calc($padding + $i * $cell-offset - 1 * awsui.$border-divider-list-width);
+  @for $i from 0 through $max-nesting-levels {
+    &.expandable-level-#{$i} {
+      > .body-cell-content {
+        margin-inline-start: calc($offset-padding + $i * $cell-offset);
+      }
+      > .expandable-toggle-wrapper {
+        margin-inline-start: calc($offset-padding + ($i - 1) * $cell-offset);
+      }
     }
   }
-  &.expandable-level-next > .body-cell-content {
-    padding-inline-start: calc(#{$padding} + 9 * #{$cell-offset} - 1 * #{awsui.$border-divider-list-width});
+  &.expandable-level-next {
+    > .body-cell-content {
+      margin-inline-start: calc(#{$offset-padding} + #{$max-nesting-levels} * #{$cell-offset});
+    }
+    > .expandable-toggle-wrapper {
+      margin-inline-start: calc(#{$offset-padding} + (#{$max-nesting-levels} - 1) * #{$cell-offset});
+    }
   }
 }
 @mixin cell-padding-inline-end($padding) {

package/lib/internal/scss/table/expandable-rows/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../internal/styles/index' as styles;
 @use '../../internal/styles/tokens' as awsui;
-@use '../../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @use './motion';
 

package/lib/internal/scss/table/header-cell/styles.scss

@@ -3,7 +3,7 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
 
@@ -11,9 +11,10 @@
   @include focus-visible.when-visible {
     @content;
   }
-  // stylelint-disable-next-line selector-combinator-disallowed-list
-  body[data-awsui-focus-visible='true'] &.header-cell-fake-focus {
-    @content;
+  &.header-cell-fake-focus {
+    @include focus-visible.when-visible-unfocused {
+      @content;
+    }
   }
 }
 

package/lib/internal/scss/table/resizer/styles.scss

@@ -5,6 +5,7 @@
 
 @use '../../internal/styles/index' as styles;
 @use '../../internal/styles/tokens' as awsui;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 //stylelint-disable-next-line selector-combinator-disallowed-list,selector-max-universal
 .resize-active:not(.resize-active-with-focus) * {
@@ -65,10 +66,11 @@ th:not(:last-child) > .divider {
   &:hover + .divider {
     border-inline-start: $active-separator-width solid awsui.$color-border-divider-active;
   }
-  // stylelint-disable-next-line selector-combinator-disallowed-list
-  body[data-awsui-focus-visible='true'] &.has-focus {
-    @include styles.focus-highlight(calc(#{awsui.$space-table-header-focus-outline-gutter} - 2px));
-    position: absolute;
+  &.has-focus {
+    @include focus-visible.when-visible-unfocused {
+      @include styles.focus-highlight(calc(#{awsui.$space-table-header-focus-outline-gutter} - 2px));
+      position: absolute;
+    }
   }
 }
 

package/lib/internal/scss/table/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles/index' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../container/shared' as container;
 
 .root {

package/lib/internal/scss/tabs/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @import './tab-header-bar';
 

package/lib/internal/scss/tabs/tab-header-bar.scss

@@ -6,7 +6,7 @@
 /* stylelint-disable selector-max-type */
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $separator-color: awsui.$color-border-tabs-divider;
 $label-horizontal-spacing: awsui.$space-xs;
@@ -147,16 +147,17 @@ $label-horizontal-spacing: awsui.$space-xs;
 .tabs-tab:not(:last-child) {
   & > .tabs-tab-header-container {
     margin-inline-end: calc(-1 * #{awsui.$border-divider-section-width});
+    // This is the divider for the tab
     &:before {
       content: '';
       position: absolute;
       border-inline-end: awsui.$border-divider-section-width solid $separator-color;
-      inset: calc(#{awsui.$space-scaled-s}) 0;
+      inset: awsui.$space-scaled-s 0;
       opacity: 1;
     }
 
     &.refresh:before {
-      inset: calc(#{awsui.$space-scaled-s} - #{awsui.$border-active-width}) 0;
+      inset: calc(#{awsui.$space-static-s} - #{awsui.$border-active-width}) 0;
     }
   }
 }

package/lib/internal/scss/tag-editor/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .root {
   /* used in test utils */

package/lib/internal/scss/toggle/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $toggle-width: 2.4 * styles.$base-size;
 $toggle-height: 1.6 * styles.$base-size;

package/lib/internal/scss/token-group/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './constants' as constants;
 
 .root {

package/lib/internal/scss/top-navigation/1.0-beta/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
-@use '../../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .top-navigation {
   @include styles.styles-reset;

package/lib/internal/scss/top-navigation/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @use './motion';
 

package/lib/internal/scss/tutorial-panel/components/tutorial-list/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../../internal/styles/tokens' as awsui;
 @use '../../../internal/styles' as styles;
-@use '../../../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @use './motion';
 

package/lib/internal/scss/wizard/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 .root {

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

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_1hpp3_3xsu9_97",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_3xsu9_101",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_3xsu9_101",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_3xsu9_143",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_3xsu9_143",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_3xsu9_146",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_3xsu9_146",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_3xsu9_149",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_3xsu9_149",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_3xsu9_152",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_3xsu9_152",
-  "annotation": "awsui_annotation_1hpp3_3xsu9_160",
-  "next-button": "awsui_next-button_1hpp3_3xsu9_161",
-  "previous-button": "awsui_previous-button_1hpp3_3xsu9_162",
-  "finish-button": "awsui_finish-button_1hpp3_3xsu9_163",
-  "header": "awsui_header_1hpp3_3xsu9_164",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_3xsu9_165",
-  "content": "awsui_content_1hpp3_3xsu9_166",
-  "description": "awsui_description_1hpp3_3xsu9_170",
-  "actionBar": "awsui_actionBar_1hpp3_3xsu9_175",
-  "stepCounter": "awsui_stepCounter_1hpp3_3xsu9_182",
-  "divider": "awsui_divider_1hpp3_3xsu9_186",
-  "hotspot": "awsui_hotspot_1hpp3_3xsu9_190",
-  "icon": "awsui_icon_1hpp3_3xsu9_257"
+  "arrow": "awsui_arrow_1hpp3_ggpcg_97",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_ggpcg_101",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_ggpcg_101",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_ggpcg_143",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_ggpcg_143",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_ggpcg_146",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_ggpcg_146",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_ggpcg_149",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_ggpcg_149",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_ggpcg_152",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_ggpcg_152",
+  "annotation": "awsui_annotation_1hpp3_ggpcg_160",
+  "next-button": "awsui_next-button_1hpp3_ggpcg_161",
+  "previous-button": "awsui_previous-button_1hpp3_ggpcg_162",
+  "finish-button": "awsui_finish-button_1hpp3_ggpcg_163",
+  "header": "awsui_header_1hpp3_ggpcg_164",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_ggpcg_165",
+  "content": "awsui_content_1hpp3_ggpcg_166",
+  "description": "awsui_description_1hpp3_ggpcg_170",
+  "actionBar": "awsui_actionBar_1hpp3_ggpcg_175",
+  "stepCounter": "awsui_stepCounter_1hpp3_ggpcg_182",
+  "divider": "awsui_divider_1hpp3_ggpcg_186",
+  "hotspot": "awsui_hotspot_1hpp3_ggpcg_190",
+  "icon": "awsui_icon_1hpp3_ggpcg_257"
 };
   

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

@@ -94,11 +94,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_3xsu9_97:not(#\9) {
+.awsui_arrow_1hpp3_ggpcg_97:not(#\9) {
   inline-size: 20px;
   block-size: 10px;
 }
-.awsui_arrow-outer_1hpp3_3xsu9_101:not(#\9), .awsui_arrow-inner_1hpp3_3xsu9_101:not(#\9) {
+.awsui_arrow-outer_1hpp3_ggpcg_101:not(#\9), .awsui_arrow-inner_1hpp3_ggpcg_101:not(#\9) {
   position: absolute;
   overflow: hidden;
   inline-size: 20px;
@@ -107,7 +107,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_3xsu9_101:not(#\9)::after, .awsui_arrow-inner_1hpp3_3xsu9_101:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_ggpcg_101:not(#\9)::after, .awsui_arrow-inner_1hpp3_ggpcg_101:not(#\9)::after {
   content: "";
   box-sizing: border-box;
   display: inline-block;
@@ -123,33 +123,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transform: rotate(45deg);
   transform-origin: 0 100%;
 }
-.awsui_arrow-outer_1hpp3_3xsu9_101:not(#\9):dir(rtl)::after, .awsui_arrow-inner_1hpp3_3xsu9_101:not(#\9):dir(rtl)::after {
+.awsui_arrow-outer_1hpp3_ggpcg_101:not(#\9):dir(rtl)::after, .awsui_arrow-inner_1hpp3_ggpcg_101:not(#\9):dir(rtl)::after {
   transform: rotate(-45deg);
   transform-origin: 100% 100%;
 }
-.awsui_arrow-outer_1hpp3_3xsu9_101:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_ggpcg_101:not(#\9)::after {
   background-color: var(--color-border-status-info-q9np44, #0073bb);
 }
-.awsui_arrow-inner_1hpp3_3xsu9_101:not(#\9) {
+.awsui_arrow-inner_1hpp3_ggpcg_101:not(#\9) {
   inset-block-start: 2px;
 }
-.awsui_arrow-inner_1hpp3_3xsu9_101:not(#\9)::after {
+.awsui_arrow-inner_1hpp3_ggpcg_101: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-pgxhez, #f1faff);
 }
-.awsui_arrow-position-right-top_1hpp3_3xsu9_143 > .awsui_arrow-outer_1hpp3_3xsu9_101:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_3xsu9_143 > .awsui_arrow-outer_1hpp3_3xsu9_101:not(#\9)::after {
+.awsui_arrow-position-right-top_1hpp3_ggpcg_143 > .awsui_arrow-outer_1hpp3_ggpcg_101:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_ggpcg_143 > .awsui_arrow-outer_1hpp3_ggpcg_101:not(#\9)::after {
   box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-left-top_1hpp3_3xsu9_146 > .awsui_arrow-outer_1hpp3_3xsu9_101:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_3xsu9_146 > .awsui_arrow-outer_1hpp3_3xsu9_101:not(#\9)::after {
+.awsui_arrow-position-left-top_1hpp3_ggpcg_146 > .awsui_arrow-outer_1hpp3_ggpcg_101:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_ggpcg_146 > .awsui_arrow-outer_1hpp3_ggpcg_101:not(#\9)::after {
   box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-top-center_1hpp3_3xsu9_149 > .awsui_arrow-outer_1hpp3_3xsu9_101:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_3xsu9_149 > .awsui_arrow-outer_1hpp3_3xsu9_101:not(#\9)::after {
+.awsui_arrow-position-top-center_1hpp3_ggpcg_149 > .awsui_arrow-outer_1hpp3_ggpcg_101:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_ggpcg_149 > .awsui_arrow-outer_1hpp3_ggpcg_101:not(#\9)::after {
   box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-bottom-center_1hpp3_3xsu9_152 > .awsui_arrow-outer_1hpp3_3xsu9_101:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_3xsu9_152 > .awsui_arrow-outer_1hpp3_3xsu9_101:not(#\9)::after {
+.awsui_arrow-position-bottom-center_1hpp3_ggpcg_152 > .awsui_arrow-outer_1hpp3_ggpcg_101:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_ggpcg_152 > .awsui_arrow-outer_1hpp3_ggpcg_101:not(#\9)::after {
   box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
 }
 
@@ -157,37 +157,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_3xsu9_160:not(#\9),
-.awsui_next-button_1hpp3_3xsu9_161:not(#\9),
-.awsui_previous-button_1hpp3_3xsu9_162:not(#\9),
-.awsui_finish-button_1hpp3_3xsu9_163:not(#\9),
-.awsui_header_1hpp3_3xsu9_164:not(#\9),
-.awsui_step-counter-content_1hpp3_3xsu9_165:not(#\9),
-.awsui_content_1hpp3_3xsu9_166:not(#\9) {
+.awsui_annotation_1hpp3_ggpcg_160:not(#\9),
+.awsui_next-button_1hpp3_ggpcg_161:not(#\9),
+.awsui_previous-button_1hpp3_ggpcg_162:not(#\9),
+.awsui_finish-button_1hpp3_ggpcg_163:not(#\9),
+.awsui_header_1hpp3_ggpcg_164:not(#\9),
+.awsui_step-counter-content_1hpp3_ggpcg_165:not(#\9),
+.awsui_content_1hpp3_ggpcg_166:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_description_1hpp3_3xsu9_170:not(#\9) {
+.awsui_description_1hpp3_ggpcg_170:not(#\9) {
   overflow: hidden;
   margin-block-start: var(--space-xxs-9rrxti, 4px);
 }
 
-.awsui_actionBar_1hpp3_3xsu9_175:not(#\9) {
+.awsui_actionBar_1hpp3_ggpcg_175:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
 
-.awsui_stepCounter_1hpp3_3xsu9_182:not(#\9) {
+.awsui_stepCounter_1hpp3_ggpcg_182:not(#\9) {
   margin-inline-end: 20px;
 }
 
-.awsui_divider_1hpp3_3xsu9_186:not(#\9) {
+.awsui_divider_1hpp3_ggpcg_186:not(#\9) {
   border-block-end: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);
 }
 
-.awsui_hotspot_1hpp3_3xsu9_190:not(#\9) {
+.awsui_hotspot_1hpp3_ggpcg_190:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -227,21 +227,21 @@ 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-9rhwr5, 40px 0 0 0);
+  scroll-margin: var(--awsui-content-scroll-margin-g964ok, 40px 0 0 0);
   inline-size: 16px;
   block-size: 16px;
 }
-.awsui_hotspot_1hpp3_3xsu9_190:not(#\9):focus {
+.awsui_hotspot_1hpp3_ggpcg_190:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_3xsu9_190:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_ggpcg_190:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_3xsu9_190:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_ggpcg_190:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_3xsu9_190:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_ggpcg_190:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -255,13 +255,13 @@ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_3xsu9_190:not(#\9):focu
   border-end-end-radius: var(--border-radius-control-circular-focus-ring-mxepal, 50%);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_hotspot_1hpp3_3xsu9_190 > .awsui_icon_1hpp3_3xsu9_257:not(#\9) {
+.awsui_hotspot_1hpp3_ggpcg_190 > .awsui_icon_1hpp3_ggpcg_257:not(#\9) {
   position: relative;
   stroke: var(--color-text-link-default-hop3gv, #0073bb);
 }
-.awsui_hotspot_1hpp3_3xsu9_190:not(#\9):hover > .awsui_icon_1hpp3_3xsu9_257 {
+.awsui_hotspot_1hpp3_ggpcg_190:not(#\9):hover > .awsui_icon_1hpp3_ggpcg_257 {
   stroke: var(--color-text-link-hover-8s5z9d, #0a4a74);
 }
-.awsui_hotspot_1hpp3_3xsu9_190:not(#\9):active > .awsui_icon_1hpp3_3xsu9_257 {
+.awsui_hotspot_1hpp3_ggpcg_190:not(#\9):active > .awsui_icon_1hpp3_ggpcg_257 {
   stroke: var(--color-text-link-default-hop3gv, #0073bb);
 }