@cloudscape-design/components-themeable 3.0.348 → 3.0.349

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "b500fa02c42a0e1fd5bdc54e65c61208f3fb0829"
+  "commit": "f2157d08391a051b016df6a34ee27029a2b2084d"
 }

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

@@ -61,6 +61,7 @@
   height: 100%;
   overflow-y: hidden;
   overflow-x: hidden;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   overscroll-behavior-y: contain;
 
   &:not(.has-multiple-triggers).has-open-drawer {
@@ -124,6 +125,7 @@
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   overscroll-behavior-y: contain;
   pointer-events: auto;
   word-wrap: break-word;

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

@@ -211,7 +211,7 @@ explicitly set in script.
 
   // The Header gap is slightly smaller when it comes after the Breadcrumbs
   &.has-breadcrumbs.has-header {
-    #{custom-props.$headerGap}: #{awsui.$space-scaled-xxs};
+    #{custom-props.$headerGap}: #{awsui.$space-scaled-xs};
   }
 
   // Set the Main gap when it follows the Notifications
@@ -236,13 +236,13 @@ explicitly set in script.
 
   // Set the Main gap when it follows the Header
   &.has-header {
-    #{custom-props.$mainGap}: #{awsui.$space-scaled-xl};
+    #{custom-props.$mainGap}: #{awsui.$space-content-header-padding-bottom};
   }
 
   // Set the Main gap when it is the first page content
   &.content-first-child-main:not(.is-overlap-disabled),
   &.content-first-child-main.is-overlap-disabled:not(.disable-content-paddings) {
-    #{custom-props.$mainGap}: #{awsui.$space-scaled-xs};
+    #{custom-props.$mainGap}: #{awsui.$space-scaled-s};
   }
 
   // Set an extension of the overlap and an additional gap on top to be used by content-layout without header

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

@@ -92,6 +92,7 @@ nav.navigation {
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   overscroll-behavior-y: contain;
   position: relative;
   word-wrap: break-word;

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

@@ -66,6 +66,7 @@ viewport size and state of the Tools drawer.
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   overscroll-behavior-y: contain;
   pointer-events: auto;
   position: relative;

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

@@ -80,7 +80,7 @@
   letter-spacing: awsui.$font-button-letter-spacing;
   border-radius: awsui.$border-radius-button;
   border: styles.$control-border-width solid;
-  padding: styles.$control-padding-vertical awsui.$space-l;
+  padding: styles.$control-padding-vertical awsui.$space-button-horizontal;
   display: inline-block; // for <a> as a button
   text-decoration: none;
   cursor: pointer;

package/lib/internal/scss/button-dropdown/category-elements/styles.scss

@@ -6,7 +6,6 @@
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
 
-$option-padding-horizontal: awsui.$space-l;
 .header {
   position: relative;
   margin: 0;
@@ -21,7 +20,7 @@ $option-padding-horizontal: awsui.$space-l;
   // to compensate for the loss of padding due to the removal of the left and right borders
   // and differences in default divider + selected border widths (visual refresh)
   padding: styles.$option-padding-with-border-placeholder-vertical
-    calc(#{$option-padding-horizontal} + #{awsui.$border-item-width});
+    calc(#{awsui.$space-button-horizontal} + #{awsui.$border-item-width});
   z-index: 1;
 
   &.disabled {
@@ -46,7 +45,7 @@ $option-padding-horizontal: awsui.$space-l;
       background-color: awsui.$color-background-dropdown-item-hover;
       color: awsui.$color-text-dropdown-item-highlighted;
       // reset padding when adding border back in
-      padding: styles.$option-padding-vertical $option-padding-horizontal;
+      padding: styles.$option-padding-vertical awsui.$space-button-horizontal;
       border: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
       border-radius: awsui.$border-radius-item;
       z-index: 2;

package/lib/internal/scss/button-dropdown/item-element/styles.scss

@@ -77,7 +77,7 @@
   @include styles.text-wrapping;
   display: flex;
   align-items: flex-start;
-  padding: styles.$option-padding-vertical awsui.$space-l;
+  padding: styles.$option-padding-vertical awsui.$space-button-horizontal;
   color: inherit;
   text-decoration: none;
 
@@ -88,7 +88,7 @@
   /* stylelint-disable-next-line selector-max-type */
   .has-category-header > &,
   .has-category-header > span > & {
-    padding-left: awsui.$space-xxl;
+    padding-left: calc(#{awsui.$space-s} + #{awsui.$space-button-horizontal});
   }
 }
 

package/lib/internal/scss/cards/styles.scss

@@ -21,7 +21,7 @@
     padding-top: 0;
     padding-left: 0;
     padding-right: 0;
-    padding-bottom: #{awsui.$space-container-header-vertical};
+    padding-bottom: calc(#{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom});
   }
 }
 
@@ -49,7 +49,7 @@
   width: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
   top: 0;
   right: 0;
-  padding: awsui.$space-scaled-l awsui.$space-card-horizontal;
+  padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
 }
 
 .loading,
@@ -77,13 +77,7 @@
     position: relative;
     background-color: awsui.$color-background-container-content;
     margin: 0 0 awsui.$space-grid-gutter awsui.$space-grid-gutter;
-    padding: awsui.$space-scaled-l awsui.$space-card-horizontal awsui.$space-scaled-l;
-    // HACK: IE shadow comes with full border that we need to take into account
-    @media screen and (-ms-high-contrast: active) {
-      padding: calc(#{awsui.$space-scaled-l} - #{awsui.$border-item-width})
-        calc(#{awsui.$space-card-horizontal} - #{awsui.$border-item-width})
-        calc(#{awsui.$space-scaled-l} - #{awsui.$border-item-width});
-    }
+    padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
     @include styles.container-shadow;
     width: 100%;
     min-width: 0;

package/lib/internal/scss/container/shared.scss

@@ -7,8 +7,8 @@
 @use '../internal/styles/tokens' as awsui;
 
 $header-padding-horizontal: awsui.$space-container-horizontal;
-$header-padding-vertical: awsui.$space-container-header-vertical;
-$header-padding: $header-padding-vertical $header-padding-horizontal;
+$header-padding: awsui.$space-container-header-top awsui.$space-container-horizontal
+  awsui.$space-container-header-bottom;
 $footer-padding: awsui.$space-scaled-s awsui.$space-container-horizontal;
 
 // HACK: Remediate focus border for expandable section

package/lib/internal/scss/container/styles.scss

@@ -158,6 +158,9 @@
 
   &.with-paddings {
     padding: shared.$header-padding;
+    &.header-variant-cards {
+      padding: awsui.$space-scaled-s awsui.$space-container-horizontal;
+    }
   }
 
   &.with-hidden-content {

package/lib/internal/scss/expandable-section/styles.scss

@@ -105,8 +105,8 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   }
 
   &-container {
-    padding-top: container.$header-padding-vertical;
-    padding-bottom: container.$header-padding-vertical;
+    padding-top: awsui.$space-container-header-top;
+    padding-bottom: awsui.$space-container-header-bottom;
     padding-right: container.$header-padding-horizontal;
 
     &.header-deprecated {

package/lib/internal/scss/header/styles.scss

@@ -13,31 +13,23 @@
   width: 100%;
   flex-wrap: wrap;
   justify-content: space-between;
-
-  &-no-actions {
-    &.root-variant-h1 {
-      padding-bottom: 0;
-      &-refresh {
-        padding-bottom: awsui.$space-xxxs;
-      }
-    }
+  column-gap: awsui.$space-xs;
+  &.refresh {
+    row-gap: awsui.$space-scaled-xxs;
   }
 
   &-no-actions,
   &-has-description {
-    &.root-variant-h2 {
+    &.root-variant-h2:not(.refresh),
+    &.root-variant-h3:not(.refresh) {
       padding-bottom: awsui.$space-scaled-xxs;
-      &-refresh {
-        padding-bottom: awsui.$space-xxxs;
-      }
-    }
-    &.root-variant-h3 {
-      padding-bottom: awsui.$space-scaled-xxs;
-      &-refresh {
-        padding-bottom: 0;
-      }
     }
   }
+  // H3s are most often used inside containers, so minimal headings have extra padding below
+  // to prevent info links from having overlapping touch targets with surrounding elements.
+  &-no-actions:not(.root-has-description).refresh.root-variant-h3 {
+    padding-bottom: awsui.$space-scaled-xs;
+  }
 
   &-no-wrap {
     flex-wrap: nowrap;
@@ -49,32 +41,31 @@
   word-wrap: break-word;
   max-width: 100%;
 
-  :not(.root-no-actions) > & {
-    margin-right: awsui.$space-xs;
+  &.refresh {
+    display: flex;
+    flex-direction: column;
+    // Can't use justify-content: center because it won't align with configurable dashboard handle icon
   }
 
   &-variant-h1 {
     padding: awsui.$space-scaled-2x-xxs 0;
-    &-refresh {
-      padding: awsui.$space-xxs 0;
+    &.refresh {
+      padding: 0;
+      row-gap: awsui.$space-scaled-xxs;
     }
   }
-  :not(.root-no-actions) > &-variant-h1-refresh {
-    padding-top: awsui.$space-scaled-xxxs;
-  }
 
   // So that headers with only a title have the same height as headers with actions and descriptions
   &-variant-h2,
   &-variant-h3 {
-    padding-top: awsui.$space-scaled-xxs;
-    :not(.root-has-description) > & {
-      padding-bottom: awsui.$space-xxxs;
+    &:not(.refresh) {
+      padding-top: awsui.$space-scaled-xxs;
+      :not(.root-has-description) > & {
+        padding-bottom: awsui.$space-xxxs;
+      }
     }
-  }
-  &-variant-h2-refresh {
-    padding-top: 0;
-    :not(.root-has-description) > & {
-      padding-bottom: 0;
+    &.refresh {
+      row-gap: awsui.$space-scaled-xxxs;
     }
   }
 }
@@ -84,25 +75,29 @@
   // https://github.com/philipwalton/flexbugs/issues/170
   display: flex;
   align-items: flex-start;
-  &-variant-h1 {
+
+  // Calculate padding so the heading text is better aligned with the buttons.
+  // Can't align-items: middle because we want buttons to stay at the top of the container when text wraps to multiple lines.
+  &-variant-h1.refresh {
+    padding: calc((#{awsui.$font-heading-xl-line-height} - #{awsui.$size-vertical-input}) / 2) 0;
+  }
+  &-variant-h2.refresh {
+    padding: calc((#{awsui.$font-heading-l-line-height} - #{awsui.$size-vertical-input}) / 2) 0;
+  }
+  &-variant-h3.refresh {
+    padding: calc((#{awsui.$font-heading-m-line-height} - #{awsui.$size-vertical-input}) / 2) 0;
+  }
+
+  &-variant-h1:not(.refresh) {
     padding: awsui.$space-scaled-xs 0;
-    &-refresh {
-      padding: awsui.$space-xs 0;
-    }
   }
-  &-variant-h2,
-  &-variant-h3 {
+  &-variant-h2:not(.refresh),
+  &-variant-h3:not(.refresh) {
     padding: awsui.$space-scaled-xxs 0;
     .root-has-description > & {
       padding-bottom: 0;
     }
   }
-  &-variant-h2-refresh {
-    padding-bottom: awsui.$space-xxxs;
-  }
-  &-variant-h3-refresh {
-    padding-bottom: 0;
-  }
 }
 
 .title {
@@ -111,19 +106,27 @@
 
   &-variant-h1 {
     font-size: awsui.$font-heading-xl-size;
-  }
-  &-variant-h2,
-  &-variant-h3 {
-    padding: awsui.$space-scaled-xxs 0;
+    // Use padding rather than center align so that all headers of the same size start at the same height in the container,
+    // whether there are buttons present or not; otherwise configurable dashboard handles are misaligned.
+    &.refresh {
+      padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-xl-line-height}) / 2);
+    }
   }
   &-variant-h2 {
     font-size: awsui.$font-heading-l-size;
-    &-refresh {
-      padding-top: awsui.$space-scaled-2x-xxs;
+    &.refresh {
+      padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-l-line-height}) / 2);
     }
   }
   &-variant-h3 {
     font-size: awsui.$font-heading-m-size;
+    &.refresh {
+      padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-m-line-height}) / 2);
+    }
+  }
+  &-variant-h2:not(.refresh),
+  &-variant-h3:not(.refresh) {
+    padding: awsui.$space-scaled-xxs 0;
   }
 }
 
@@ -140,21 +143,21 @@
 
   &-variant-h1 {
     @include styles.font-body-m;
-    padding-top: awsui.$space-scaled-xxs;
-    &-refresh {
-      padding-top: awsui.$space-scaled-xs;
+    &:not(.refresh) {
+      padding-top: awsui.$space-scaled-xxs;
     }
   }
   &-variant-h2 {
     font-size: awsui.$font-header-h2-description-size;
     line-height: awsui.$font-header-h2-description-line-height;
-    padding-bottom: awsui.$space-scaled-xxs;
+    &:not(.refresh) {
+      padding-bottom: awsui.$space-scaled-xxs;
+    }
   }
   &-variant-h3 {
     @include styles.font-body-s;
-    padding-bottom: awsui.$space-scaled-xxs;
-    &-refresh {
-      padding-top: awsui.$space-xxxs;
+    &:not(.refresh) {
+      padding-bottom: awsui.$space-scaled-xxs;
     }
   }
 }

package/lib/internal/scss/modal/styles.scss

@@ -93,7 +93,7 @@ $modal-z-index: 5000;
 }
 
 .header {
-  padding: awsui.$space-s awsui.$space-modal-horizontal;
+  padding: awsui.$space-container-header-top awsui.$space-modal-horizontal awsui.$space-container-header-bottom;
   background-color: awsui.$color-background-container-header;
   border-bottom: 1px solid awsui.$color-border-container-divider;
   border-radius: awsui.$border-radius-container awsui.$border-radius-container 0 0;

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

@@ -39,7 +39,7 @@ $selected-color: awsui.$color-text-segment-active;
   @include styles.font-button;
   letter-spacing: 0.25px;
   border: styles.$control-border-width solid $default-border-color;
-  padding: styles.$control-padding-vertical awsui.$space-l;
+  padding: styles.$control-padding-vertical awsui.$space-button-horizontal;
   border-right-width: 0;
   background: $default-background;
   color: $default-color;

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

@@ -17,7 +17,7 @@
   display: flex;
   align-items: flex-end;
   flex-wrap: wrap;
-  padding: awsui.$space-scaled-xs 0 awsui.$space-scaled-xxs;
+  padding: awsui.$space-scaled-xs 0 awsui.$space-table-header-tools-bottom;
 
   &-filtering {
     @supports (flex-basis: fit-content) {
@@ -63,8 +63,6 @@
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  padding-top: awsui.$space-table-content-top;
-  padding-bottom: awsui.$space-table-content-bottom;
   overflow-x: auto;
 
   scrollbar-width: none; /* Hide scrollbar in Firefox */
@@ -75,15 +73,8 @@
       padding-right: awsui.$space-table-horizontal;
     }
   }
-  &.variant-embedded,
-  &.variant-borderless {
-    padding-bottom: awsui.$space-table-embedded-content-bottom;
-  }
-  &.has-header {
-    padding-top: 0px;
-  }
-  &.has-footer {
-    padding-bottom: 0px;
+  &.variant-container:not(.has-footer) {
+    padding-bottom: awsui.$space-table-content-bottom;
   }
   &:not(.has-header) {
     border-top-right-radius: awsui.$border-radius-container;
@@ -182,11 +173,12 @@ the default white background of the container component.
 }
 
 .header-controls {
-  padding-top: awsui.$space-container-header-vertical;
-  padding-bottom: awsui.$space-container-header-vertical;
+  padding-top: awsui.$space-container-header-top;
+  padding-bottom: awsui.$space-container-header-bottom;
 
   &.variant-full-page {
     padding-top: 0;
+    padding-bottom: calc(#{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom});
   }
   &.variant-stacked,
   &.variant-container {

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

@@ -1,22 +1,22 @@
 
     import './styles.scoped.css';
     export default {
-  "resize-active": "awsui_resize-active_lm6vo_2ctod_98",
-  "resize-side": "awsui_resize-side_lm6vo_2ctod_104",
-  "resize-bottom": "awsui_resize-bottom_lm6vo_2ctod_107",
-  "with-motion": "awsui_with-motion_lm6vo_2ctod_112",
-  "root": "awsui_root_lm6vo_2ctod_127",
-  "layout-wrapper": "awsui_layout-wrapper_lm6vo_2ctod_128",
-  "root-no-scroll": "awsui_root-no-scroll_lm6vo_2ctod_135",
-  "layout": "awsui_layout_lm6vo_2ctod_128",
-  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_2ctod_146",
-  "layout-main": "awsui_layout-main_lm6vo_2ctod_150",
-  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_2ctod_156",
-  "unfocusable": "awsui_unfocusable_lm6vo_2ctod_161",
-  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_2ctod_165",
-  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_2ctod_170",
-  "content-wrapper": "awsui_content-wrapper_lm6vo_2ctod_174",
-  "content-overlapped": "awsui_content-overlapped_lm6vo_2ctod_178",
-  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_2ctod_182"
+  "resize-active": "awsui_resize-active_lm6vo_iriab_98",
+  "resize-side": "awsui_resize-side_lm6vo_iriab_104",
+  "resize-bottom": "awsui_resize-bottom_lm6vo_iriab_107",
+  "with-motion": "awsui_with-motion_lm6vo_iriab_112",
+  "root": "awsui_root_lm6vo_iriab_127",
+  "layout-wrapper": "awsui_layout-wrapper_lm6vo_iriab_128",
+  "root-no-scroll": "awsui_root-no-scroll_lm6vo_iriab_135",
+  "layout": "awsui_layout_lm6vo_iriab_128",
+  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_iriab_146",
+  "layout-main": "awsui_layout-main_lm6vo_iriab_150",
+  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_iriab_156",
+  "unfocusable": "awsui_unfocusable_lm6vo_iriab_161",
+  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_iriab_165",
+  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_iriab_170",
+  "content-wrapper": "awsui_content-wrapper_lm6vo_iriab_174",
+  "content-overlapped": "awsui_content-overlapped_lm6vo_iriab_178",
+  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_iriab_182"
 };
   

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

@@ -95,91 +95,91 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  SPDX-License-Identifier: Apache-2.0
 */
 /* stylelint-disable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
-.awsui_resize-active_lm6vo_2ctod_98 *:not(#\9) {
+.awsui_resize-active_lm6vo_iriab_98 *:not(#\9) {
   -webkit-user-select: none;
           user-select: none;
 }
-.awsui_resize-active_lm6vo_2ctod_98 iframe:not(#\9) {
+.awsui_resize-active_lm6vo_iriab_98 iframe:not(#\9) {
   pointer-events: none;
 }
-.awsui_resize-side_lm6vo_2ctod_104 *:not(#\9) {
+.awsui_resize-side_lm6vo_iriab_104 *:not(#\9) {
   cursor: ew-resize;
 }
-.awsui_resize-bottom_lm6vo_2ctod_107 *:not(#\9) {
+.awsui_resize-bottom_lm6vo_iriab_107 *:not(#\9) {
   cursor: ns-resize;
 }
 
 /* stylelint-enable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
-.awsui_with-motion_lm6vo_2ctod_112:not(#\9) {
+.awsui_with-motion_lm6vo_iriab_112:not(#\9) {
   transition: var(--motion-duration-refresh-only-fast-osz7cj, 115ms);
   transition-property: border-color, opacity, width;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_with-motion_lm6vo_2ctod_112:not(#\9) {
+  .awsui_with-motion_lm6vo_iriab_112:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_with-motion_lm6vo_2ctod_112:not(#\9), .awsui-mode-entering .awsui_with-motion_lm6vo_2ctod_112:not(#\9) {
+.awsui-motion-disabled .awsui_with-motion_lm6vo_iriab_112:not(#\9), .awsui-mode-entering .awsui_with-motion_lm6vo_iriab_112:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_lm6vo_2ctod_127:not(#\9),
-.awsui_layout-wrapper_lm6vo_2ctod_128:not(#\9) {
+.awsui_root_lm6vo_iriab_127:not(#\9),
+.awsui_layout-wrapper_lm6vo_iriab_128:not(#\9) {
   display: flex;
   flex-direction: column;
   position: relative;
   color: var(--color-text-body-default-4colr5, #16191f);
 }
 
-.awsui_root-no-scroll_lm6vo_2ctod_135:not(#\9) {
+.awsui_root-no-scroll_lm6vo_iriab_135:not(#\9) {
   position: relative;
   z-index: 1;
 }
 
-.awsui_layout_lm6vo_2ctod_128:not(#\9) {
+.awsui_layout_lm6vo_iriab_128:not(#\9) {
   flex: 1 1 auto;
   display: flex;
   align-items: stretch;
   background-color: var(--color-background-layout-main-nd5gs3, #f2f3f3);
 }
-.awsui_layout-no-scroll_lm6vo_2ctod_146:not(#\9) {
+.awsui_layout-no-scroll_lm6vo_iriab_146:not(#\9) {
   overflow: hidden;
 }
 
-.awsui_layout-main_lm6vo_2ctod_150:not(#\9) {
+.awsui_layout-main_lm6vo_iriab_150:not(#\9) {
   flex: 1;
   min-width: 0;
   background-color: var(--color-background-layout-main-nd5gs3, #f2f3f3);
   position: relative;
 }
-.awsui_layout-main-scrollable_lm6vo_2ctod_156:not(#\9) {
+.awsui_layout-main-scrollable_lm6vo_iriab_156:not(#\9) {
   overflow: auto;
 }
 
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
-.awsui_unfocusable_lm6vo_2ctod_161 *:not(#\9) {
+.awsui_unfocusable_lm6vo_iriab_161 *:not(#\9) {
   visibility: hidden;
 }
 
-.awsui_breadcrumbs-desktop_lm6vo_2ctod_165:not(#\9) {
+.awsui_breadcrumbs-desktop_lm6vo_iriab_165:not(#\9) {
   padding-top: var(--space-scaled-m-5caa5e, 16px);
   padding-bottom: var(--space-scaled-s-73r995, 12px);
 }
 
-.awsui_content-header-wrapper_lm6vo_2ctod_170:not(#\9) {
-  padding-bottom: var(--space-content-header-padding-bottom-v55qlt, 16px);
+.awsui_content-header-wrapper_lm6vo_iriab_170:not(#\9) {
+  padding-bottom: var(--space-content-header-padding-bottom-bdft6l, 16px);
 }
 
-.awsui_content-wrapper_lm6vo_2ctod_174:not(#\9) {
+.awsui_content-wrapper_lm6vo_iriab_174:not(#\9) {
   padding-bottom: var(--space-layout-content-bottom-zu47sf, 20px);
 }
 
-.awsui_content-overlapped_lm6vo_2ctod_178:not(#\9) {
+.awsui_content-overlapped_lm6vo_iriab_178:not(#\9) {
   margin-top: calc(-1 * var(--space-dark-header-overlap-distance-g5z45b, 0px));
 }
 
-.awsui_content-extra-top-padding_lm6vo_2ctod_182:not(#\9) {
+.awsui_content-extra-top-padding_lm6vo_iriab_182:not(#\9) {
   padding-top: var(--space-scaled-m-5caa5e, 16px);
 }

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

@@ -2,22 +2,22 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "resize-active": "awsui_resize-active_lm6vo_2ctod_98",
-  "resize-side": "awsui_resize-side_lm6vo_2ctod_104",
-  "resize-bottom": "awsui_resize-bottom_lm6vo_2ctod_107",
-  "with-motion": "awsui_with-motion_lm6vo_2ctod_112",
-  "root": "awsui_root_lm6vo_2ctod_127",
-  "layout-wrapper": "awsui_layout-wrapper_lm6vo_2ctod_128",
-  "root-no-scroll": "awsui_root-no-scroll_lm6vo_2ctod_135",
-  "layout": "awsui_layout_lm6vo_2ctod_128",
-  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_2ctod_146",
-  "layout-main": "awsui_layout-main_lm6vo_2ctod_150",
-  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_2ctod_156",
-  "unfocusable": "awsui_unfocusable_lm6vo_2ctod_161",
-  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_2ctod_165",
-  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_2ctod_170",
-  "content-wrapper": "awsui_content-wrapper_lm6vo_2ctod_174",
-  "content-overlapped": "awsui_content-overlapped_lm6vo_2ctod_178",
-  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_2ctod_182"
+  "resize-active": "awsui_resize-active_lm6vo_iriab_98",
+  "resize-side": "awsui_resize-side_lm6vo_iriab_104",
+  "resize-bottom": "awsui_resize-bottom_lm6vo_iriab_107",
+  "with-motion": "awsui_with-motion_lm6vo_iriab_112",
+  "root": "awsui_root_lm6vo_iriab_127",
+  "layout-wrapper": "awsui_layout-wrapper_lm6vo_iriab_128",
+  "root-no-scroll": "awsui_root-no-scroll_lm6vo_iriab_135",
+  "layout": "awsui_layout_lm6vo_iriab_128",
+  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_iriab_146",
+  "layout-main": "awsui_layout-main_lm6vo_iriab_150",
+  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_iriab_156",
+  "unfocusable": "awsui_unfocusable_lm6vo_iriab_161",
+  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_iriab_165",
+  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_iriab_170",
+  "content-wrapper": "awsui_content-wrapper_lm6vo_iriab_174",
+  "content-overlapped": "awsui_content-overlapped_lm6vo_iriab_178",
+  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_iriab_182"
 };