@cloudscape-design/components-themeable 3.0.210 → 3.0.212

package/lib/internal/manifest.json

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

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

@@ -8,7 +8,7 @@
 
 .notifications,
 .notifications-sticky {
-  z-index: 825;
+  z-index: 850;
 }
 
 .notifications {

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

@@ -7,8 +7,7 @@
 @use '../internal/styles/tokens' as awsui;
 @use './constants' as constants;
 
-// should be above sticky notifications
-$drawer-z-index: 850;
+$drawer-z-index: 830;
 // should be above mobile toolbar
 $drawer-z-index-mobile: 1001;
 

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

@@ -15,13 +15,13 @@
   height: var(#{custom-props.$contentHeight});
   position: sticky;
   top: var(#{custom-props.$offsetTop});
-  z-index: 850;
+  z-index: 830;
 
   /*
   The navigation and tools containers (that contain the toggle buttons)
   stretch the full height of the app layout. Normally, this wouldn't be an
   issue because they sit above the app layout's content padding.
-  
+
   But if disableContentPaddings is set to true and there are buttons on the
   left/right edges of the screen, they will be covered by the containers. So
   we need to disable pointer events in the container and re-enable them in
@@ -60,7 +60,7 @@ nav.show-navigation {
   }
 
   /*
-  Apply the animation only in desktop viewports because the AppBar will 
+  Apply the animation only in desktop viewports because the AppBar will
   take control in responsive viewports.
   */
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
@@ -117,8 +117,8 @@ nav.navigation {
   }
 
   /*
-  A non-semantic node is added with a fixed width equal to the final Navigation 
-  width. This will create the visual appearance of horizontal movement and 
+  A non-semantic node is added with a fixed width equal to the final Navigation
+  width. This will create the visual appearance of horizontal movement and
   prevent unwanted text wrapping.
   */
   > .animated-content {

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

@@ -10,11 +10,11 @@
 .notifications {
   grid-column: 3;
   grid-row: 1;
-  z-index: 825;
+  z-index: 850;
 
   /*
-  In desktop viewports the notifications will always be the first 
-  slot rendered in the center column. The padding should create 
+  In desktop viewports the notifications will always be the first
+  slot rendered in the center column. The padding should create
   a centered vertical alignment with the circular buttons for the
   navigation and tools drawers.
   */
@@ -22,8 +22,8 @@
     margin: awsui.$space-xs 0;
 
     /*
-    #{awsui.$space-xs} token needs to align with the $offsetTopWithNotifications 
-    calculation in the layout CSS. 
+    #{awsui.$space-xs} token needs to align with the $offsetTopWithNotifications
+    calculation in the layout CSS.
     */
     &.sticky-notifications {
       position: sticky;
@@ -37,8 +37,8 @@
   }
 
   /*
-  In mobile viewports the notifications should never be sticky even 
-  if the property is set. Padding is added to give adequate 
+  In mobile viewports the notifications should never be sticky even
+  if the property is set. Padding is added to give adequate
   vertical space from the sticky AppBar the subsequent adjacent sibling.
   */
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {

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

@@ -8,9 +8,9 @@
 @use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 /*
-When the Split Panel is in the bottom position it was share the same row 
-as the content area. This row is defined as 1 fractional unit which will 
-consume the remaining vertical space in the grid after the notifications 
+When the Split Panel is in the bottom position it was share the same row
+as the content area. This row is defined as 1 fractional unit which will
+consume the remaining vertical space in the grid after the notifications
 and breadcrumbs.
 */
 section.split-panel-bottom {
@@ -24,13 +24,13 @@ section.split-panel-bottom {
   grid-column: 1 / 6;
   grid-row: 5;
   height: auto;
-  /* 
+  /*
   The position sticky will work in conjunction with the align self: end; property.
-  If the grid row scrolls beyond the viewport, the sticky bottom position 
+  If the grid row scrolls beyond the viewport, the sticky bottom position
   will lift it up above the footer so it is always visible.
   */
   position: sticky;
-  z-index: 851;
+  z-index: 840;
 
   // Animation for the height when opening the split panel
   @keyframes openSplitPanelBottom {
@@ -57,7 +57,7 @@ section.split-panel-bottom {
   }
 
   /*
-  Unlike the side position the Split Panel is persistent in the DOM 
+  Unlike the side position the Split Panel is persistent in the DOM
   when in the bottom position.
   */
   &.position-bottom {
@@ -65,11 +65,11 @@ section.split-panel-bottom {
   }
 
   /*
-  Warning! This is a hack! The existing design token for the split panel 
+  Warning! This is a hack! The existing design token for the split panel
   shadow in the bottom position does not render in the refactored code.
-  It appears to be related to the fact that the legacy split panel element 
-  has a height equal to the expanded height and a corresponding translation 
-  of the Y position so it is moved off the screen. This will need to be 
+  It appears to be related to the fact that the legacy split panel element
+  has a height equal to the expanded height and a corresponding translation
+  of the Y position so it is moved off the screen. This will need to be
   refactored with an adjustment to the split panel design token.
   */
   &:not(.is-split-panel-open).position-bottom {
@@ -114,8 +114,8 @@ section.split-panel-side {
   }
 
   /*
-  The min and max widths are applied when the Split Panel is opened otherwise 
-  it would not be possible to animate the width and the box shadow would 
+  The min and max widths are applied when the Split Panel is opened otherwise
+  it would not be possible to animate the width and the box shadow would
   be persistent in the DOM when closed.
   */
   &.is-split-panel-open.position-side {
@@ -130,8 +130,8 @@ section.split-panel-side {
   }
 
   /*
-  A non-semantic node is added with a fixed width equal to the final Split Panel 
-  width. This will create the visual appearance of horizontal movement and 
+  A non-semantic node is added with a fixed width equal to the final Split Panel
+  width. This will create the visual appearance of horizontal movement and
   prevent unwanted text wrapping.
   */
   > .animated-content {

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

@@ -8,12 +8,12 @@
 @use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 /*
-The Tools component container has a max width calculation that depends on the 
+The Tools component container has a max width calculation that depends on the
 state of the other siblings within the Layout grid definition. The layout width
-is set in the resize observer in the Layout component. The main offset left 
-will calculate the distance from the start of the Layout component. The minimum 
+is set in the resize observer in the Layout component. The main offset left
+will calculate the distance from the start of the Layout component. The minimum
 content width has a default value that can be set directly with the minContentWidth
-property. The content gap right is computed in the Layout styles based on the 
+property. The content gap right is computed in the Layout styles based on the
 viewport size and state of the Tools drawer.
 */
 .tools-container {
@@ -31,7 +31,7 @@ viewport size and state of the Tools drawer.
   max-width: var(#{custom-props.$toolsMaxWidth});
   position: sticky;
   top: var(#{custom-props.$offsetTop});
-  z-index: 850;
+  z-index: 830;
 
   pointer-events: none;
 
@@ -91,8 +91,8 @@ viewport size and state of the Tools drawer.
   }
 
   /*
-  A non-semantic node is added with a fixed width equal to the final Tools 
-  width. This will create the visual appearance of horizontal movement and 
+  A non-semantic node is added with a fixed width equal to the final Tools
+  width. This will create the visual appearance of horizontal movement and
   prevent unwanted text wrapping.
   */
   > .animated-content {
@@ -101,7 +101,7 @@ viewport size and state of the Tools drawer.
 
   /*
   A right border is needed if the Tools is open and the buttons are persistent in
-  the DOM. This creates a visual vertical boundary between the Tools and the Buttons 
+  the DOM. This creates a visual vertical boundary between the Tools and the Buttons
   only when they are both present. This is the circumstance when there is a Split Panel
   in the side position.
   */
@@ -125,8 +125,8 @@ viewport size and state of the Tools drawer.
 }
 
 /*
-Warning! If these design tokens for padding change it will adversely impact 
-the calculation used to determine the Split Panel maximum width in the 
+Warning! If these design tokens for padding change it will adversely impact
+the calculation used to determine the Split Panel maximum width in the
 handleSplitPanelMaxWidth function in the context.
 */
 .show-tools {
@@ -149,7 +149,7 @@ handleSplitPanelMaxWidth function in the context.
   }
 
   /*
-  Apply the animation only in desktop viewports because the AppBar will 
+  Apply the animation only in desktop viewports because the AppBar will
   take control in responsive viewports.
   */
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {

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

@@ -52,7 +52,7 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   word-wrap: break-word;
   background-color: awsui.$color-background-layout-panel-content;
   // should be above tools and navigation panels to avoid their shadows
-  z-index: 851;
+  z-index: 840;
   &-closed {
     cursor: pointer;
     min-width: constants.$sidebar-size-closed;
@@ -114,7 +114,7 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   }
 
   /*
-  Removed the position fixed with the AppLayout refactor because the 
+  Removed the position fixed with the AppLayout refactor because the
   SplitPanel is no longer in fixed position in the DOM.
   */
   &.refresh {

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

@@ -1,7 +1,7 @@
 
     import './styles.scoped.css';
     export default {
-  "notifications": "awsui_notifications_1hmm4_28zpo_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_28zpo_10"
+  "notifications": "awsui_notifications_1hmm4_1u99k_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1u99k_10"
 };
   

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

@@ -6,17 +6,17 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_notifications_1hmm4_28zpo_9:not(#\9),
-.awsui_notifications-sticky_1hmm4_28zpo_10:not(#\9) {
-  z-index: 825;
+.awsui_notifications_1hmm4_1u99k_9:not(#\9),
+.awsui_notifications-sticky_1hmm4_1u99k_10:not(#\9) {
+  z-index: 850;
 }
 
-.awsui_notifications_1hmm4_28zpo_9:not(#\9) {
+.awsui_notifications_1hmm4_1u99k_9:not(#\9) {
   /* This is necessary for the z-index to have effect */
   position: relative;
 }
 
-.awsui_notifications-sticky_1hmm4_28zpo_10:not(#\9) {
+.awsui_notifications-sticky_1hmm4_1u99k_10:not(#\9) {
   top: 0;
   position: sticky;
   --awsui-flashbar-sticky-bottom-margin-20d8jh: var(--space-xxl-2nvmf1, 32px);

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

@@ -2,7 +2,7 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "notifications": "awsui_notifications_1hmm4_28zpo_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_28zpo_10"
+  "notifications": "awsui_notifications_1hmm4_1u99k_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1u99k_10"
 };
   

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

@@ -1,31 +1,31 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_lm6vo_9anjf_97",
-  "layout-wrapper": "awsui_layout-wrapper_lm6vo_9anjf_98",
-  "root-no-scroll": "awsui_root-no-scroll_lm6vo_9anjf_104",
-  "layout": "awsui_layout_lm6vo_9anjf_98",
-  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_9anjf_115",
-  "layout-main": "awsui_layout-main_lm6vo_9anjf_119",
-  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_9anjf_125",
-  "unfocusable": "awsui_unfocusable_lm6vo_9anjf_130",
-  "navigation-panel": "awsui_navigation-panel_lm6vo_9anjf_134",
-  "drawer": "awsui_drawer_lm6vo_9anjf_138",
-  "drawer-mobile": "awsui_drawer-mobile_lm6vo_9anjf_144",
-  "drawer-closed": "awsui_drawer-closed_lm6vo_9anjf_147",
-  "drawer-content": "awsui_drawer-content_lm6vo_9anjf_155",
-  "toggle": "awsui_toggle_lm6vo_9anjf_177",
-  "visual-refresh-toggle": "awsui_visual-refresh-toggle_lm6vo_9anjf_182",
-  "visual-refresh-toggle-type-tools": "awsui_visual-refresh-toggle-type-tools_lm6vo_9anjf_186",
-  "visual-refresh-toggle-type-navigation": "awsui_visual-refresh-toggle-type-navigation_lm6vo_9anjf_189",
-  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_9anjf_199",
-  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_9anjf_204",
-  "content-wrapper": "awsui_content-wrapper_lm6vo_9anjf_208",
-  "content-overlapped": "awsui_content-overlapped_lm6vo_9anjf_212",
-  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_9anjf_216",
-  "panel-wrapper-outer": "awsui_panel-wrapper-outer_lm6vo_9anjf_220",
-  "mobile": "awsui_mobile_lm6vo_9anjf_226",
-  "open": "awsui_open_lm6vo_9anjf_232",
-  "panel-wrapper-inner": "awsui_panel-wrapper-inner_lm6vo_9anjf_238"
+  "root": "awsui_root_lm6vo_hpygk_97",
+  "layout-wrapper": "awsui_layout-wrapper_lm6vo_hpygk_98",
+  "root-no-scroll": "awsui_root-no-scroll_lm6vo_hpygk_104",
+  "layout": "awsui_layout_lm6vo_hpygk_98",
+  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_hpygk_115",
+  "layout-main": "awsui_layout-main_lm6vo_hpygk_119",
+  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_hpygk_125",
+  "unfocusable": "awsui_unfocusable_lm6vo_hpygk_130",
+  "navigation-panel": "awsui_navigation-panel_lm6vo_hpygk_134",
+  "drawer": "awsui_drawer_lm6vo_hpygk_138",
+  "drawer-mobile": "awsui_drawer-mobile_lm6vo_hpygk_144",
+  "drawer-closed": "awsui_drawer-closed_lm6vo_hpygk_147",
+  "drawer-content": "awsui_drawer-content_lm6vo_hpygk_155",
+  "toggle": "awsui_toggle_lm6vo_hpygk_177",
+  "visual-refresh-toggle": "awsui_visual-refresh-toggle_lm6vo_hpygk_182",
+  "visual-refresh-toggle-type-tools": "awsui_visual-refresh-toggle-type-tools_lm6vo_hpygk_186",
+  "visual-refresh-toggle-type-navigation": "awsui_visual-refresh-toggle-type-navigation_lm6vo_hpygk_189",
+  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_hpygk_199",
+  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_hpygk_204",
+  "content-wrapper": "awsui_content-wrapper_lm6vo_hpygk_208",
+  "content-overlapped": "awsui_content-overlapped_lm6vo_hpygk_212",
+  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_hpygk_216",
+  "panel-wrapper-outer": "awsui_panel-wrapper-outer_lm6vo_hpygk_220",
+  "mobile": "awsui_mobile_lm6vo_hpygk_226",
+  "open": "awsui_open_lm6vo_hpygk_232",
+  "panel-wrapper-inner": "awsui_panel-wrapper-inner_lm6vo_hpygk_238"
 };
   

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

@@ -94,147 +94,147 @@ 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_root_lm6vo_9anjf_97:not(#\9),
-.awsui_layout-wrapper_lm6vo_9anjf_98:not(#\9) {
+.awsui_root_lm6vo_hpygk_97:not(#\9),
+.awsui_layout-wrapper_lm6vo_hpygk_98:not(#\9) {
   display: flex;
   flex-direction: column;
   position: relative;
 }
 
-.awsui_root-no-scroll_lm6vo_9anjf_104:not(#\9) {
+.awsui_root-no-scroll_lm6vo_hpygk_104:not(#\9) {
   position: relative;
   z-index: 1;
 }
 
-.awsui_layout_lm6vo_9anjf_98:not(#\9) {
+.awsui_layout_lm6vo_hpygk_98:not(#\9) {
   flex: 1 1 auto;
   display: flex;
   align-items: stretch;
   background-color: var(--color-background-layout-main-q0tbxx, #f2f3f3);
 }
-.awsui_layout-no-scroll_lm6vo_9anjf_115:not(#\9) {
+.awsui_layout-no-scroll_lm6vo_hpygk_115:not(#\9) {
   overflow: hidden;
 }
 
-.awsui_layout-main_lm6vo_9anjf_119:not(#\9) {
+.awsui_layout-main_lm6vo_hpygk_119:not(#\9) {
   flex: 1;
   min-width: 0;
   background-color: var(--color-background-layout-main-q0tbxx, #f2f3f3);
   position: relative;
 }
-.awsui_layout-main-scrollable_lm6vo_9anjf_125:not(#\9) {
+.awsui_layout-main-scrollable_lm6vo_hpygk_125:not(#\9) {
   overflow: auto;
 }
 
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
-.awsui_unfocusable_lm6vo_9anjf_130 *:not(#\9) {
+.awsui_unfocusable_lm6vo_hpygk_130 *:not(#\9) {
   visibility: hidden;
 }
 
-.awsui_navigation-panel_lm6vo_9anjf_134:not(#\9) {
+.awsui_navigation-panel_lm6vo_hpygk_134:not(#\9) {
   overflow-anchor: none;
 }
 
-.awsui_drawer_lm6vo_9anjf_138:not(#\9) {
+.awsui_drawer_lm6vo_hpygk_138:not(#\9) {
   flex-shrink: 0;
   position: relative;
   word-wrap: break-word;
   box-shadow: var(--shadow-panel-v9vx7i, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
 }
-.awsui_drawer_lm6vo_9anjf_138:not(#\9):not(.awsui_drawer-mobile_lm6vo_9anjf_144) {
-  z-index: 850;
+.awsui_drawer_lm6vo_hpygk_138:not(#\9):not(.awsui_drawer-mobile_lm6vo_hpygk_144) {
+  z-index: 830;
 }
-.awsui_drawer-closed_lm6vo_9anjf_147:not(#\9) {
+.awsui_drawer-closed_lm6vo_hpygk_147:not(#\9) {
   min-width: 40px;
   cursor: pointer;
 }
-.awsui_drawer-closed_lm6vo_9anjf_147.awsui_drawer-mobile_lm6vo_9anjf_144:not(#\9) {
+.awsui_drawer-closed_lm6vo_hpygk_147.awsui_drawer-mobile_lm6vo_hpygk_144:not(#\9) {
   display: none;
 }
 
-.awsui_drawer-content_lm6vo_9anjf_155:not(#\9) {
+.awsui_drawer-content_lm6vo_hpygk_155:not(#\9) {
   position: fixed;
   overflow: auto;
   background-color: var(--color-background-layout-panel-content-r9pdjh, #ffffff);
 }
-.awsui_drawer-mobile_lm6vo_9anjf_144 > .awsui_drawer-content_lm6vo_9anjf_155:not(#\9) {
+.awsui_drawer-mobile_lm6vo_hpygk_144 > .awsui_drawer-content_lm6vo_hpygk_155:not(#\9) {
   z-index: 1001;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
 }
-.awsui_drawer-closed_lm6vo_9anjf_147 > .awsui_drawer-content_lm6vo_9anjf_155:not(#\9) {
+.awsui_drawer-closed_lm6vo_hpygk_147 > .awsui_drawer-content_lm6vo_hpygk_155:not(#\9) {
   width: 40px;
 }
-.awsui_drawer-closed_lm6vo_9anjf_147 > .awsui_drawer-content_lm6vo_9anjf_155:not(#\9):hover {
+.awsui_drawer-closed_lm6vo_hpygk_147 > .awsui_drawer-content_lm6vo_hpygk_155:not(#\9):hover {
   background: var(--color-background-layout-panel-hover-thdv3z, #eaeded);
 }
-.awsui_drawer-content_lm6vo_9anjf_155 > [aria-hidden=true]:not(#\9) {
+.awsui_drawer-content_lm6vo_hpygk_155 > [aria-hidden=true]:not(#\9) {
   display: none;
 }
 
-.awsui_toggle_lm6vo_9anjf_177:not(#\9) {
+.awsui_toggle_lm6vo_hpygk_177:not(#\9) {
   box-sizing: border-box;
   padding: var(--space-xxs-ynfts5, 4px) 7px;
 }
 
-.awsui_visual-refresh-toggle_lm6vo_9anjf_182:not(#\9) {
+.awsui_visual-refresh-toggle_lm6vo_hpygk_182:not(#\9) {
   position: fixed;
   padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-layout-toggle-padding-axl9jr, 20px);
 }
-.awsui_visual-refresh-toggle-type-tools_lm6vo_9anjf_186:not(#\9) {
+.awsui_visual-refresh-toggle-type-tools_lm6vo_hpygk_186:not(#\9) {
   right: 0;
 }
-.awsui_visual-refresh-toggle-type-navigation_lm6vo_9anjf_189:not(#\9) {
+.awsui_visual-refresh-toggle-type-navigation_lm6vo_hpygk_189:not(#\9) {
   left: 0;
 }
-.awsui_visual-refresh-toggle_lm6vo_9anjf_182[aria-hidden=true]:not(#\9) {
+.awsui_visual-refresh-toggle_lm6vo_hpygk_182[aria-hidden=true]:not(#\9) {
   visibility: hidden;
 }
-.awsui_visual-refresh-toggle_lm6vo_9anjf_182[aria-hidden=false]:not(#\9) {
+.awsui_visual-refresh-toggle_lm6vo_hpygk_182[aria-hidden=false]:not(#\9) {
   visibility: visible;
 }
 
-.awsui_breadcrumbs-desktop_lm6vo_9anjf_199:not(#\9) {
+.awsui_breadcrumbs-desktop_lm6vo_hpygk_199:not(#\9) {
   padding-top: var(--space-scaled-m-pv0fmt, 16px);
   padding-bottom: var(--space-scaled-s-cu1hzn, 12px);
 }
 
-.awsui_content-header-wrapper_lm6vo_9anjf_204:not(#\9) {
+.awsui_content-header-wrapper_lm6vo_hpygk_204:not(#\9) {
   padding-bottom: var(--space-content-header-padding-bottom-m7tdoi, 16px);
 }
 
-.awsui_content-wrapper_lm6vo_9anjf_208:not(#\9) {
+.awsui_content-wrapper_lm6vo_hpygk_208:not(#\9) {
   padding-bottom: var(--space-layout-content-bottom-ebez2l, 20px);
 }
 
-.awsui_content-overlapped_lm6vo_9anjf_212:not(#\9) {
+.awsui_content-overlapped_lm6vo_hpygk_212:not(#\9) {
   margin-top: calc(-1 * var(--space-dark-header-overlap-distance-ync2s3, 0px));
 }
 
-.awsui_content-extra-top-padding_lm6vo_9anjf_216:not(#\9) {
+.awsui_content-extra-top-padding_lm6vo_hpygk_216:not(#\9) {
   padding-top: var(--space-scaled-m-pv0fmt, 16px);
 }
 
-.awsui_panel-wrapper-outer_lm6vo_9anjf_220:not(#\9) {
+.awsui_panel-wrapper-outer_lm6vo_hpygk_220:not(#\9) {
   position: fixed;
   height: 100%;
-  z-index: 850;
+  z-index: 830;
   display: flex;
 }
-.awsui_panel-wrapper-outer_lm6vo_9anjf_220.awsui_mobile_lm6vo_9anjf_226:not(#\9) {
+.awsui_panel-wrapper-outer_lm6vo_hpygk_220.awsui_mobile_lm6vo_hpygk_226:not(#\9) {
   left: 0;
   right: 0;
   z-index: -1;
   pointer-events: none;
 }
-.awsui_panel-wrapper-outer_lm6vo_9anjf_220.awsui_mobile_lm6vo_9anjf_226.awsui_open_lm6vo_9anjf_232:not(#\9) {
+.awsui_panel-wrapper-outer_lm6vo_hpygk_220.awsui_mobile_lm6vo_hpygk_226.awsui_open_lm6vo_hpygk_232:not(#\9) {
   z-index: 1001;
   width: 100vw;
   pointer-events: auto;
 }
 
-.awsui_panel-wrapper-inner_lm6vo_9anjf_238:not(#\9) {
+.awsui_panel-wrapper-inner_lm6vo_hpygk_238:not(#\9) {
   background: var(--color-background-layout-panel-content-r9pdjh, #ffffff);
 }

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

@@ -2,31 +2,31 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_lm6vo_9anjf_97",
-  "layout-wrapper": "awsui_layout-wrapper_lm6vo_9anjf_98",
-  "root-no-scroll": "awsui_root-no-scroll_lm6vo_9anjf_104",
-  "layout": "awsui_layout_lm6vo_9anjf_98",
-  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_9anjf_115",
-  "layout-main": "awsui_layout-main_lm6vo_9anjf_119",
-  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_9anjf_125",
-  "unfocusable": "awsui_unfocusable_lm6vo_9anjf_130",
-  "navigation-panel": "awsui_navigation-panel_lm6vo_9anjf_134",
-  "drawer": "awsui_drawer_lm6vo_9anjf_138",
-  "drawer-mobile": "awsui_drawer-mobile_lm6vo_9anjf_144",
-  "drawer-closed": "awsui_drawer-closed_lm6vo_9anjf_147",
-  "drawer-content": "awsui_drawer-content_lm6vo_9anjf_155",
-  "toggle": "awsui_toggle_lm6vo_9anjf_177",
-  "visual-refresh-toggle": "awsui_visual-refresh-toggle_lm6vo_9anjf_182",
-  "visual-refresh-toggle-type-tools": "awsui_visual-refresh-toggle-type-tools_lm6vo_9anjf_186",
-  "visual-refresh-toggle-type-navigation": "awsui_visual-refresh-toggle-type-navigation_lm6vo_9anjf_189",
-  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_9anjf_199",
-  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_9anjf_204",
-  "content-wrapper": "awsui_content-wrapper_lm6vo_9anjf_208",
-  "content-overlapped": "awsui_content-overlapped_lm6vo_9anjf_212",
-  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_9anjf_216",
-  "panel-wrapper-outer": "awsui_panel-wrapper-outer_lm6vo_9anjf_220",
-  "mobile": "awsui_mobile_lm6vo_9anjf_226",
-  "open": "awsui_open_lm6vo_9anjf_232",
-  "panel-wrapper-inner": "awsui_panel-wrapper-inner_lm6vo_9anjf_238"
+  "root": "awsui_root_lm6vo_hpygk_97",
+  "layout-wrapper": "awsui_layout-wrapper_lm6vo_hpygk_98",
+  "root-no-scroll": "awsui_root-no-scroll_lm6vo_hpygk_104",
+  "layout": "awsui_layout_lm6vo_hpygk_98",
+  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_hpygk_115",
+  "layout-main": "awsui_layout-main_lm6vo_hpygk_119",
+  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_hpygk_125",
+  "unfocusable": "awsui_unfocusable_lm6vo_hpygk_130",
+  "navigation-panel": "awsui_navigation-panel_lm6vo_hpygk_134",
+  "drawer": "awsui_drawer_lm6vo_hpygk_138",
+  "drawer-mobile": "awsui_drawer-mobile_lm6vo_hpygk_144",
+  "drawer-closed": "awsui_drawer-closed_lm6vo_hpygk_147",
+  "drawer-content": "awsui_drawer-content_lm6vo_hpygk_155",
+  "toggle": "awsui_toggle_lm6vo_hpygk_177",
+  "visual-refresh-toggle": "awsui_visual-refresh-toggle_lm6vo_hpygk_182",
+  "visual-refresh-toggle-type-tools": "awsui_visual-refresh-toggle-type-tools_lm6vo_hpygk_186",
+  "visual-refresh-toggle-type-navigation": "awsui_visual-refresh-toggle-type-navigation_lm6vo_hpygk_189",
+  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_hpygk_199",
+  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_hpygk_204",
+  "content-wrapper": "awsui_content-wrapper_lm6vo_hpygk_208",
+  "content-overlapped": "awsui_content-overlapped_lm6vo_hpygk_212",
+  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_hpygk_216",
+  "panel-wrapper-outer": "awsui_panel-wrapper-outer_lm6vo_hpygk_220",
+  "mobile": "awsui_mobile_lm6vo_hpygk_226",
+  "open": "awsui_open_lm6vo_hpygk_232",
+  "panel-wrapper-inner": "awsui_panel-wrapper-inner_lm6vo_hpygk_238"
 };