@cloudscape-design/components-themeable 3.0.1006 → 3.0.1007

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "3bf581977a630226c8f574d5fa83a8e9c52b2a1c"
+  "commit": "d6c04250f7ef90c77220c4abd04c04fd25e8a86c"
 }

package/lib/internal/scss/button/styles.scss

@@ -6,13 +6,15 @@
 @use 'sass:map';
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/styles/foundation' as foundation;
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './constants' as constants;
 
 @mixin adjust-for-variant($variant) {
-  background: map.get($variant, 'default-background');
-  color: map.get($variant, 'default-color');
-  border-color: map.get($variant, 'default-border-color');
+  background: var(#{custom-props.$styleBackgroundDefault}, map.get($variant, 'default-background'));
+  color: var(#{custom-props.$styleColorDefault}, map.get($variant, 'default-color'));
+  border-color: var(#{custom-props.$styleBorderColorDefault}, #{map.get($variant, 'default-border-color')});
   border-block-width: map.get($variant, 'border-width');
   border-inline-width: map.get($variant, 'border-width');
   position: relative;
@@ -22,22 +24,22 @@
   font-weight: map.get($variant, 'font-weight');
 
   &:hover {
-    background: map.get($variant, 'hover-background');
-    color: map.get($variant, 'hover-color');
-    border-color: map.get($variant, 'hover-border-color');
+    background: var(#{custom-props.$styleBackgroundHover}, map.get($variant, 'hover-background'));
+    border-color: var(#{custom-props.$styleBorderColorHover}, map.get($variant, 'hover-border-color'));
+    color: var(#{custom-props.$styleColorHover}, map.get($variant, 'hover-color'));
     text-decoration: none;
   }
 
   &:active {
-    background: map.get($variant, 'active-background');
-    color: map.get($variant, 'active-color');
-    border-color: map.get($variant, 'active-border-color');
+    background: var(#{custom-props.$styleBackgroundActive}, map.get($variant, 'active-background'));
+    border-color: var(#{custom-props.$styleBorderColorActive}, map.get($variant, 'active-border-color'));
+    color: var(#{custom-props.$styleColorActive}, map.get($variant, 'active-color'));
   }
 
   &.disabled {
-    background: map.get($variant, 'disabled-background');
-    border-color: map.get($variant, 'disabled-border-color');
-    color: map.get($variant, 'disabled-color');
+    background: var(#{custom-props.$styleBackgroundDisabled}, map.get($variant, 'disabled-background'));
+    border-color: var(#{custom-props.$styleBorderColorDisabled}, map.get($variant, 'disabled-border-color'));
+    color: var(#{custom-props.$styleColorDisabled}, map.get($variant, 'disabled-color'));
     text-decoration: none;
     cursor: auto;
   }
@@ -63,6 +65,9 @@
   display: inline-block; // for <a> as a button
   text-decoration: none;
   cursor: pointer;
+  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
+    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
+    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
 
   @each $variant in map.keys(constants.$variants) {
     &.variant-#{$variant} {
@@ -76,7 +81,11 @@
   }
 
   @include focus-visible.when-visible {
-    @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
+    @include styles.focus-highlight(
+      $gutter: awsui.$space-button-focus-outline-gutter,
+      $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
+      $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
+    );
 
     &.variant-icon,
     &.variant-modal-dismiss,
@@ -126,14 +135,14 @@
 
   &.variant-inline-icon {
     padding-block: 0;
-    border-block: 0;
-    border-inline: 0;
+    border-block-width: 0;
+    border-inline-width: 0;
   }
 
   &.variant-inline-icon-pointer-target {
     padding-block: awsui.$space-xxxs;
-    border-block: 0;
-    border-inline: 0;
+    border-block-width: 0;
+    border-inline-width: 0;
   }
 
   > .icon-left {

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

@@ -1,61 +1,77 @@
 
-    $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;
+    $maxContentWidth: --awsui-max-content-width-kcc2gu;
+$minContentWidth: --awsui-min-content-width-kcc2gu;
+$breadcrumbsGap: --awsui-breadcrumbs-gap-kcc2gu;
+$contentGapLeft: --awsui-content-gap-left-kcc2gu;
+$contentGapRight: --awsui-content-gap-right-kcc2gu;
+$contentHeight: --awsui-content-height-kcc2gu;
+$contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-kcc2gu;
+$contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-kcc2gu;
+$contentLayoutMainGap: --awsui-content-layout-main-gap-kcc2gu;
+$defaultMaxContentWidth: --awsui-default-max-content-width-kcc2gu;
+$defaultMinContentWidth: --awsui-default-min-content-width-kcc2gu;
+$drawerSize: --awsui-drawer-size-kcc2gu;
+$footerHeight: --awsui-footer-height-kcc2gu;
+$headerGap: --awsui-header-gap-kcc2gu;
+$headerHeight: --awsui-header-height-kcc2gu;
+$layoutWidth: --awsui-layout-width-kcc2gu;
+$mainGap: --awsui-main-gap-kcc2gu;
+$mainOffsetLeft: --awsui-main-offset-left-kcc2gu;
+$mainTemplateRows: --awsui-main-template-rows-kcc2gu;
+$mobileBarHeight: --awsui-mobile-bar-height-kcc2gu;
+$notificationsHeight: --awsui-notifications-height-kcc2gu;
+$offsetTop: --awsui-offset-top-kcc2gu;
+$overlapHeight: --awsui-overlap-height-kcc2gu;
+$navigationWidth: --awsui-navigation-width-kcc2gu;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-kcc2gu;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-kcc2gu;
+$splitPanelHeight: --awsui-split-panel-height-kcc2gu;
+$splitPanelMinWidth: --awsui-split-panel-min-width-kcc2gu;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-kcc2gu;
+$toolsMaxWidth: --awsui-tools-max-width-kcc2gu;
+$toolsWidth: --awsui-tools-width-kcc2gu;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-kcc2gu;
+$contentScrollMargin: --awsui-content-scroll-margin-kcc2gu;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-kcc2gu;
+$flashbarStackIndex: --awsui-flashbar-stack-index-kcc2gu;
+$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-kcc2gu;
+$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-kcc2gu;
+$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-kcc2gu;
+$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-kcc2gu;
+$spinnerRotatorFrom: --awsui-spinner-rotator-from-kcc2gu;
+$spinnerRotatorTo: --awsui-spinner-rotator-to-kcc2gu;
+$spinnerLineLeftFrom: --awsui-spinner-line-left-from-kcc2gu;
+$spinnerLineLeftTo: --awsui-spinner-line-left-to-kcc2gu;
+$spinnerLineRightFrom: --awsui-spinner-line-right-from-kcc2gu;
+$spinnerLineRightTo: --awsui-spinner-line-right-to-kcc2gu;
+$sliderLabelCount: --awsui-slider-label-count-kcc2gu;
+$sliderTickCount: --awsui-slider-tick-count-kcc2gu;
+$sliderReferenceColumn: --awsui-slider-reference-column-kcc2gu;
+$sliderNextReferenceColumn: --awsui-slider-next-reference-column-kcc2gu;
+$sliderMaxStart: --awsui-slider-max-start-kcc2gu;
+$sliderMinEnd: --awsui-slider-min-end-kcc2gu;
+$sliderRangeInlineSize: --awsui-slider-range-inline-size-kcc2gu;
+$sliderTooltipPosition: --awsui-slider-tooltip-position-kcc2gu;
+$togglesLeftWidth: --awsui-toggles-left-width-kcc2gu;
+$togglesRightWidth: --awsui-toggles-right-width-kcc2gu;
+$promptInputMaxRows: --awsui-prompt-input-max-rows-kcc2gu;
+$promptInputScrollHeight: --awsui-prompt-input-scroll-height-kcc2gu;
+$dragHandleAnimationInlineOffset: --awsui-drag-handle-animation-inline-offset-kcc2gu;
+$dragHandleAnimationBlockOffset: --awsui-drag-handle-animation-block-offset-kcc2gu;
+$styleBackgroundActive: --awsui-style-background-active-kcc2gu;
+$styleBackgroundDefault: --awsui-style-background-default-kcc2gu;
+$styleBackgroundDisabled: --awsui-style-background-disabled-kcc2gu;
+$styleBackgroundHover: --awsui-style-background-hover-kcc2gu;
+$styleBorderColorActive: --awsui-style-border-color-active-kcc2gu;
+$styleBorderColorDefault: --awsui-style-border-color-default-kcc2gu;
+$styleBorderColorDisabled: --awsui-style-border-color-disabled-kcc2gu;
+$styleBorderColorHover: --awsui-style-border-color-hover-kcc2gu;
+$styleColorActive: --awsui-style-color-active-kcc2gu;
+$styleColorDefault: --awsui-style-color-default-kcc2gu;
+$styleColorDisabled: --awsui-style-color-disabled-kcc2gu;
+$styleColorHover: --awsui-style-color-hover-kcc2gu;
+$styleFocusRingBorderColor: --awsui-style-focus-ring-border-color-kcc2gu;
+$styleFocusRingBorderRadius: --awsui-style-focus-ring-border-radius-kcc2gu;
+$styleFocusRingBorderWidth: --awsui-style-focus-ring-border-width-kcc2gu;
+$styleFocusRingBoxShadow: --awsui-style-focus-ring-box-shadow-kcc2gu;
     

package/lib/internal/scss/internal/styles/foundation/shadows.scss

@@ -6,8 +6,10 @@
 @use '../utils/theming' as theming;
 @use '../tokens' as awsui;
 
+$box-shadow-focused-width: 2px;
+
 // focus for clickable elements, like buttons
-$box-shadow-focused: 0 0 0 2px awsui.$color-border-item-focused;
+$box-shadow-focused: 0 0 0 $box-shadow-focused-width awsui.$color-border-item-focused;
 // focus for form input elements, excluding buttons
 $box-shadow-focused-light: 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
 // focus for form input elements, excluding buttons

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

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_1hpp3_10rwy_193",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_10rwy_197",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_10rwy_197",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_10rwy_239",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_10rwy_239",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_10rwy_242",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_10rwy_242",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_10rwy_245",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_10rwy_245",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_10rwy_248",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_10rwy_248",
-  "annotation": "awsui_annotation_1hpp3_10rwy_252",
-  "next-button": "awsui_next-button_1hpp3_10rwy_253",
-  "previous-button": "awsui_previous-button_1hpp3_10rwy_254",
-  "finish-button": "awsui_finish-button_1hpp3_10rwy_255",
-  "header": "awsui_header_1hpp3_10rwy_256",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_10rwy_257",
-  "content": "awsui_content_1hpp3_10rwy_258",
-  "description": "awsui_description_1hpp3_10rwy_262",
-  "actionBar": "awsui_actionBar_1hpp3_10rwy_267",
-  "stepCounter": "awsui_stepCounter_1hpp3_10rwy_274",
-  "divider": "awsui_divider_1hpp3_10rwy_278",
-  "hotspot": "awsui_hotspot_1hpp3_10rwy_282",
-  "icon": "awsui_icon_1hpp3_10rwy_352"
+  "arrow": "awsui_arrow_1hpp3_1caw9_193",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_1caw9_197",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_1caw9_197",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1caw9_239",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1caw9_239",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1caw9_242",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1caw9_242",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1caw9_245",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1caw9_245",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1caw9_248",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1caw9_248",
+  "annotation": "awsui_annotation_1hpp3_1caw9_252",
+  "next-button": "awsui_next-button_1hpp3_1caw9_253",
+  "previous-button": "awsui_previous-button_1hpp3_1caw9_254",
+  "finish-button": "awsui_finish-button_1hpp3_1caw9_255",
+  "header": "awsui_header_1hpp3_1caw9_256",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_1caw9_257",
+  "content": "awsui_content_1hpp3_1caw9_258",
+  "description": "awsui_description_1hpp3_1caw9_262",
+  "actionBar": "awsui_actionBar_1hpp3_1caw9_267",
+  "stepCounter": "awsui_stepCounter_1hpp3_1caw9_274",
+  "divider": "awsui_divider_1hpp3_1caw9_278",
+  "hotspot": "awsui_hotspot_1hpp3_1caw9_282",
+  "icon": "awsui_icon_1hpp3_1caw9_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_10rwy_193:not(#\9) {
+.awsui_arrow_1hpp3_1caw9_193:not(#\9) {
   inline-size: 20px;
   block-size: 10px;
 }
-.awsui_arrow-outer_1hpp3_10rwy_197:not(#\9), .awsui_arrow-inner_1hpp3_10rwy_197:not(#\9) {
+.awsui_arrow-outer_1hpp3_1caw9_197:not(#\9), .awsui_arrow-inner_1hpp3_1caw9_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_10rwy_197:not(#\9)::after, .awsui_arrow-inner_1hpp3_10rwy_197:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_1caw9_197:not(#\9)::after, .awsui_arrow-inner_1hpp3_1caw9_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_10rwy_197:not(#\9):dir(rtl)::after, .awsui_arrow-inner_1hpp3_10rwy_197:not(#\9):dir(rtl)::after {
+.awsui_arrow-outer_1hpp3_1caw9_197:not(#\9):dir(rtl)::after, .awsui_arrow-inner_1hpp3_1caw9_197:not(#\9):dir(rtl)::after {
   transform: rotate(-45deg);
   transform-origin: 100% 100%;
 }
-.awsui_arrow-outer_1hpp3_10rwy_197:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_1caw9_197:not(#\9)::after {
   background-color: var(--color-border-status-info-kp0iif, #0073bb);
 }
-.awsui_arrow-inner_1hpp3_10rwy_197:not(#\9) {
+.awsui_arrow-inner_1hpp3_1caw9_197:not(#\9) {
   inset-block-start: 2px;
 }
-.awsui_arrow-inner_1hpp3_10rwy_197:not(#\9)::after {
+.awsui_arrow-inner_1hpp3_1caw9_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-nzp1n3, #f1faff);
 }
-.awsui_arrow-position-right-top_1hpp3_10rwy_239 > .awsui_arrow-outer_1hpp3_10rwy_197:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_10rwy_239 > .awsui_arrow-outer_1hpp3_10rwy_197:not(#\9)::after {
+.awsui_arrow-position-right-top_1hpp3_1caw9_239 > .awsui_arrow-outer_1hpp3_1caw9_197:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1caw9_239 > .awsui_arrow-outer_1hpp3_1caw9_197:not(#\9)::after {
   box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-9hdvit, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-left-top_1hpp3_10rwy_242 > .awsui_arrow-outer_1hpp3_10rwy_197:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_10rwy_242 > .awsui_arrow-outer_1hpp3_10rwy_197:not(#\9)::after {
+.awsui_arrow-position-left-top_1hpp3_1caw9_242 > .awsui_arrow-outer_1hpp3_1caw9_197:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1caw9_242 > .awsui_arrow-outer_1hpp3_1caw9_197:not(#\9)::after {
   box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-9hdvit, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-top-center_1hpp3_10rwy_245 > .awsui_arrow-outer_1hpp3_10rwy_197:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_10rwy_245 > .awsui_arrow-outer_1hpp3_10rwy_197:not(#\9)::after {
+.awsui_arrow-position-top-center_1hpp3_1caw9_245 > .awsui_arrow-outer_1hpp3_1caw9_197:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1caw9_245 > .awsui_arrow-outer_1hpp3_1caw9_197:not(#\9)::after {
   box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-9hdvit, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-bottom-center_1hpp3_10rwy_248 > .awsui_arrow-outer_1hpp3_10rwy_197:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_10rwy_248 > .awsui_arrow-outer_1hpp3_10rwy_197:not(#\9)::after {
+.awsui_arrow-position-bottom-center_1hpp3_1caw9_248 > .awsui_arrow-outer_1hpp3_1caw9_197:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1caw9_248 > .awsui_arrow-outer_1hpp3_1caw9_197:not(#\9)::after {
   box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-9hdvit, rgba(0, 28, 36, 0.5));
 }
 
-.awsui_annotation_1hpp3_10rwy_252:not(#\9),
-.awsui_next-button_1hpp3_10rwy_253:not(#\9),
-.awsui_previous-button_1hpp3_10rwy_254:not(#\9),
-.awsui_finish-button_1hpp3_10rwy_255:not(#\9),
-.awsui_header_1hpp3_10rwy_256:not(#\9),
-.awsui_step-counter-content_1hpp3_10rwy_257:not(#\9),
-.awsui_content_1hpp3_10rwy_258:not(#\9) {
+.awsui_annotation_1hpp3_1caw9_252:not(#\9),
+.awsui_next-button_1hpp3_1caw9_253:not(#\9),
+.awsui_previous-button_1hpp3_1caw9_254:not(#\9),
+.awsui_finish-button_1hpp3_1caw9_255:not(#\9),
+.awsui_header_1hpp3_1caw9_256:not(#\9),
+.awsui_step-counter-content_1hpp3_1caw9_257:not(#\9),
+.awsui_content_1hpp3_1caw9_258:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_description_1hpp3_10rwy_262:not(#\9) {
+.awsui_description_1hpp3_1caw9_262:not(#\9) {
   overflow: hidden;
   margin-block-start: var(--space-xxs-jnczic, 4px);
 }
 
-.awsui_actionBar_1hpp3_10rwy_267:not(#\9) {
+.awsui_actionBar_1hpp3_1caw9_267:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
 
-.awsui_stepCounter_1hpp3_10rwy_274:not(#\9) {
+.awsui_stepCounter_1hpp3_1caw9_274:not(#\9) {
   margin-inline-end: 20px;
 }
 
-.awsui_divider_1hpp3_10rwy_278:not(#\9) {
+.awsui_divider_1hpp3_1caw9_278:not(#\9) {
   border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-divider-default-ipvpev, #eaeded);
 }
 
-.awsui_hotspot_1hpp3_10rwy_282:not(#\9) {
+.awsui_hotspot_1hpp3_1caw9_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-xgujsu, 40px 0 0 0);
+  scroll-margin: var(--awsui-content-scroll-margin-kcc2gu, 40px 0 0 0);
   position: relative;
   inline-size: 16px;
   block-size: 16px;
 }
-.awsui_hotspot_1hpp3_10rwy_282:not(#\9):before {
+.awsui_hotspot_1hpp3_1caw9_282:not(#\9):before {
   content: "";
   position: absolute;
   inset: calc(-1 * var(--space-xxs-jnczic, 4px));
 }
-.awsui_hotspot_1hpp3_10rwy_282:not(#\9):focus {
+.awsui_hotspot_1hpp3_1caw9_282:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_10rwy_282:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1caw9_282:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_10rwy_282:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1caw9_282:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_10rwy_282:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1caw9_282:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -350,13 +350,13 @@ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_10rwy_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-r5f6xl, #0073bb);
 }
-.awsui_hotspot_1hpp3_10rwy_282 > .awsui_icon_1hpp3_10rwy_352:not(#\9) {
+.awsui_hotspot_1hpp3_1caw9_282 > .awsui_icon_1hpp3_1caw9_352:not(#\9) {
   position: relative;
   stroke: var(--color-text-tutorial-hotspot-default-ql4c5o, #0073bb);
 }
-.awsui_hotspot_1hpp3_10rwy_282:not(#\9):hover > .awsui_icon_1hpp3_10rwy_352 {
+.awsui_hotspot_1hpp3_1caw9_282:not(#\9):hover > .awsui_icon_1hpp3_1caw9_352 {
   stroke: var(--color-text-tutorial-hotspot-hover-baiupp, #0a4a74);
 }
-.awsui_hotspot_1hpp3_10rwy_282:not(#\9):active > .awsui_icon_1hpp3_10rwy_352 {
+.awsui_hotspot_1hpp3_1caw9_282:not(#\9):active > .awsui_icon_1hpp3_1caw9_352 {
   stroke: var(--color-text-tutorial-hotspot-default-ql4c5o, #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_10rwy_193",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_10rwy_197",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_10rwy_197",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_10rwy_239",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_10rwy_239",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_10rwy_242",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_10rwy_242",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_10rwy_245",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_10rwy_245",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_10rwy_248",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_10rwy_248",
-  "annotation": "awsui_annotation_1hpp3_10rwy_252",
-  "next-button": "awsui_next-button_1hpp3_10rwy_253",
-  "previous-button": "awsui_previous-button_1hpp3_10rwy_254",
-  "finish-button": "awsui_finish-button_1hpp3_10rwy_255",
-  "header": "awsui_header_1hpp3_10rwy_256",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_10rwy_257",
-  "content": "awsui_content_1hpp3_10rwy_258",
-  "description": "awsui_description_1hpp3_10rwy_262",
-  "actionBar": "awsui_actionBar_1hpp3_10rwy_267",
-  "stepCounter": "awsui_stepCounter_1hpp3_10rwy_274",
-  "divider": "awsui_divider_1hpp3_10rwy_278",
-  "hotspot": "awsui_hotspot_1hpp3_10rwy_282",
-  "icon": "awsui_icon_1hpp3_10rwy_352"
+  "arrow": "awsui_arrow_1hpp3_1caw9_193",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_1caw9_197",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_1caw9_197",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1caw9_239",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1caw9_239",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1caw9_242",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1caw9_242",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1caw9_245",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1caw9_245",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1caw9_248",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1caw9_248",
+  "annotation": "awsui_annotation_1hpp3_1caw9_252",
+  "next-button": "awsui_next-button_1hpp3_1caw9_253",
+  "previous-button": "awsui_previous-button_1hpp3_1caw9_254",
+  "finish-button": "awsui_finish-button_1hpp3_1caw9_255",
+  "header": "awsui_header_1hpp3_1caw9_256",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_1caw9_257",
+  "content": "awsui_content_1hpp3_1caw9_258",
+  "description": "awsui_description_1hpp3_1caw9_262",
+  "actionBar": "awsui_actionBar_1hpp3_1caw9_267",
+  "stepCounter": "awsui_stepCounter_1hpp3_1caw9_274",
+  "divider": "awsui_divider_1hpp3_1caw9_278",
+  "hotspot": "awsui_hotspot_1hpp3_1caw9_282",
+  "icon": "awsui_icon_1hpp3_1caw9_352"
 };
   

package/lib/internal/template/app-layout/notifications/styles.css.js

@@ -1,8 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "notifications": "awsui_notifications_1hmm4_184wf_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_184wf_10",
-  "no-content-paddings": "awsui_no-content-paddings_1hmm4_184wf_25"
+  "notifications": "awsui_notifications_1hmm4_16o5e_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_16o5e_10",
+  "no-content-paddings": "awsui_no-content-paddings_1hmm4_16o5e_25"
 };
   

package/lib/internal/template/app-layout/notifications/styles.scoped.css

@@ -6,26 +6,26 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_notifications_1hmm4_184wf_9:not(#\9),
-.awsui_notifications-sticky_1hmm4_184wf_10:not(#\9) {
+.awsui_notifications_1hmm4_16o5e_9:not(#\9),
+.awsui_notifications-sticky_1hmm4_16o5e_10:not(#\9) {
   z-index: 850;
 }
 
-.awsui_notifications_1hmm4_184wf_9:not(#\9) {
+.awsui_notifications_1hmm4_16o5e_9:not(#\9) {
   /* This is necessary for the z-index to have effect */
   position: relative;
 }
 
-.awsui_notifications-sticky_1hmm4_184wf_10:not(#\9) {
+.awsui_notifications-sticky_1hmm4_16o5e_10:not(#\9) {
   inset-block-start: 0;
   position: sticky;
-  --awsui-flashbar-sticky-bottom-margin-xgujsu: var(--space-xxl-q0lyvp, 32px);
+  --awsui-flashbar-sticky-bottom-margin-kcc2gu: var(--space-xxl-q0lyvp, 32px);
 }
 
-.awsui_no-content-paddings_1hmm4_184wf_25:not(#\9) {
+.awsui_no-content-paddings_1hmm4_16o5e_25:not(#\9) {
   /*
   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.
    */
-  --awsui-stacked-notifications-bottom-margin-xgujsu: var(--space-scaled-l-66n9sr, 20px);
+  --awsui-stacked-notifications-bottom-margin-kcc2gu: var(--space-scaled-l-66n9sr, 20px);
 }

package/lib/internal/template/app-layout/notifications/styles.selectors.js

@@ -2,8 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "notifications": "awsui_notifications_1hmm4_184wf_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_184wf_10",
-  "no-content-paddings": "awsui_no-content-paddings_1hmm4_184wf_25"
+  "notifications": "awsui_notifications_1hmm4_16o5e_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_16o5e_10",
+  "no-content-paddings": "awsui_no-content-paddings_1hmm4_16o5e_25"
 };