@cloudscape-design/components 3.0.648 → 3.0.649

package/container/styles.css.js

@@ -1,34 +1,35 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_14iqq_1w0sy_103",
-  "fit-height": "awsui_fit-height_14iqq_1w0sy_139",
-  "with-side-media": "awsui_with-side-media_14iqq_1w0sy_144",
-  "variant-default": "awsui_variant-default_14iqq_1w0sy_147",
-  "variant-stacked": "awsui_variant-stacked_14iqq_1w0sy_147",
-  "refresh": "awsui_refresh_14iqq_1w0sy_155",
-  "sticky-enabled": "awsui_sticky-enabled_14iqq_1w0sy_205",
-  "with-top-media": "awsui_with-top-media_14iqq_1w0sy_217",
-  "content-wrapper": "awsui_content-wrapper_14iqq_1w0sy_222",
-  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_1w0sy_227",
-  "media": "awsui_media_14iqq_1w0sy_234",
-  "media-top": "awsui_media-top_14iqq_1w0sy_252",
-  "media-side": "awsui_media-side_14iqq_1w0sy_257",
-  "header": "awsui_header_14iqq_1w0sy_263",
-  "header-with-media": "awsui_header-with-media_14iqq_1w0sy_268",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1w0sy_274",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1w0sy_278",
-  "header-stuck": "awsui_header-stuck_14iqq_1w0sy_284",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_1w0sy_294",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1w0sy_297",
-  "with-paddings": "awsui_with-paddings_14iqq_1w0sy_303",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_1w0sy_312",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1w0sy_370",
-  "with-toolbar": "awsui_with-toolbar_14iqq_1w0sy_370",
-  "content": "awsui_content_14iqq_1w0sy_222",
-  "content-fit-height": "awsui_content-fit-height_14iqq_1w0sy_397",
-  "content-with-media": "awsui_content-with-media_14iqq_1w0sy_407",
-  "footer": "awsui_footer_14iqq_1w0sy_411",
-  "with-divider": "awsui_with-divider_14iqq_1w0sy_415"
+  "root": "awsui_root_14iqq_fgdim_103",
+  "fit-height": "awsui_fit-height_14iqq_fgdim_139",
+  "with-side-media": "awsui_with-side-media_14iqq_fgdim_144",
+  "variant-default": "awsui_variant-default_14iqq_fgdim_147",
+  "variant-stacked": "awsui_variant-stacked_14iqq_fgdim_147",
+  "refresh": "awsui_refresh_14iqq_fgdim_155",
+  "sticky-enabled": "awsui_sticky-enabled_14iqq_fgdim_205",
+  "with-top-media": "awsui_with-top-media_14iqq_fgdim_217",
+  "content-wrapper": "awsui_content-wrapper_14iqq_fgdim_222",
+  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_fgdim_227",
+  "media": "awsui_media_14iqq_fgdim_234",
+  "media-top": "awsui_media-top_14iqq_fgdim_252",
+  "media-side": "awsui_media-side_14iqq_fgdim_257",
+  "header": "awsui_header_14iqq_fgdim_263",
+  "header-with-media": "awsui_header-with-media_14iqq_fgdim_268",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_fgdim_274",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_fgdim_278",
+  "header-stuck": "awsui_header-stuck_14iqq_fgdim_284",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_fgdim_294",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_fgdim_297",
+  "with-paddings": "awsui_with-paddings_14iqq_fgdim_303",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_fgdim_312",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_fgdim_370",
+  "with-toolbar": "awsui_with-toolbar_14iqq_fgdim_370",
+  "header-cover": "awsui_header-cover_14iqq_fgdim_376",
+  "content": "awsui_content_14iqq_fgdim_222",
+  "content-fit-height": "awsui_content-fit-height_14iqq_fgdim_404",
+  "content-with-media": "awsui_content-with-media_14iqq_fgdim_414",
+  "footer": "awsui_footer_14iqq_fgdim_418",
+  "with-divider": "awsui_with-divider_14iqq_fgdim_422"
 };
   

package/container/styles.scoped.css

@@ -100,7 +100,7 @@ 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_14iqq_1w0sy_103:not(#\9) {
+.awsui_root_14iqq_fgdim_103:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -137,15 +137,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-wrap: break-word;
   position: relative;
 }
-.awsui_root_14iqq_1w0sy_103.awsui_fit-height_14iqq_1w0sy_139:not(#\9) {
+.awsui_root_14iqq_fgdim_103.awsui_fit-height_14iqq_fgdim_139:not(#\9) {
   display: flex;
   flex-direction: column;
   block-size: 100%;
 }
-.awsui_root_14iqq_1w0sy_103.awsui_fit-height_14iqq_1w0sy_139.awsui_with-side-media_14iqq_1w0sy_144:not(#\9) {
+.awsui_root_14iqq_fgdim_103.awsui_fit-height_14iqq_fgdim_139.awsui_with-side-media_14iqq_fgdim_144:not(#\9) {
   flex-direction: row;
 }
-.awsui_root_14iqq_1w0sy_103.awsui_variant-default_14iqq_1w0sy_147:not(#\9), .awsui_root_14iqq_1w0sy_103.awsui_variant-stacked_14iqq_1w0sy_147:not(#\9) {
+.awsui_root_14iqq_fgdim_103.awsui_variant-default_14iqq_fgdim_147:not(#\9), .awsui_root_14iqq_fgdim_103.awsui_variant-stacked_14iqq_fgdim_147:not(#\9) {
   background-color: var(--color-background-container-content-4un1ap, #ffffff);
   border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
   border-start-end-radius: var(--border-radius-container-wqv1zi, 16px);
@@ -153,11 +153,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
   box-sizing: border-box;
 }
-.awsui_root_14iqq_1w0sy_103.awsui_variant-default_14iqq_1w0sy_147.awsui_refresh_14iqq_1w0sy_155:not(#\9), .awsui_root_14iqq_1w0sy_103.awsui_variant-stacked_14iqq_1w0sy_147.awsui_refresh_14iqq_1w0sy_155:not(#\9) {
+.awsui_root_14iqq_fgdim_103.awsui_variant-default_14iqq_fgdim_147.awsui_refresh_14iqq_fgdim_155:not(#\9), .awsui_root_14iqq_fgdim_103.awsui_variant-stacked_14iqq_fgdim_147.awsui_refresh_14iqq_fgdim_155:not(#\9) {
   border-block: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
   border-inline: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
 }
-.awsui_root_14iqq_1w0sy_103.awsui_variant-default_14iqq_1w0sy_147:not(#\9):not(.awsui_refresh_14iqq_1w0sy_155)::before, .awsui_root_14iqq_1w0sy_103.awsui_variant-stacked_14iqq_1w0sy_147:not(#\9):not(.awsui_refresh_14iqq_1w0sy_155)::before {
+.awsui_root_14iqq_fgdim_103.awsui_variant-default_14iqq_fgdim_147:not(#\9):not(.awsui_refresh_14iqq_fgdim_155)::before, .awsui_root_14iqq_fgdim_103.awsui_variant-stacked_14iqq_fgdim_147:not(#\9):not(.awsui_refresh_14iqq_fgdim_155)::before {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -175,7 +175,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
   z-index: 1;
 }
-.awsui_root_14iqq_1w0sy_103.awsui_variant-default_14iqq_1w0sy_147:not(#\9):not(.awsui_refresh_14iqq_1w0sy_155)::after, .awsui_root_14iqq_1w0sy_103.awsui_variant-stacked_14iqq_1w0sy_147:not(#\9):not(.awsui_refresh_14iqq_1w0sy_155)::after {
+.awsui_root_14iqq_fgdim_103.awsui_variant-default_14iqq_fgdim_147:not(#\9):not(.awsui_refresh_14iqq_fgdim_155)::after, .awsui_root_14iqq_fgdim_103.awsui_variant-stacked_14iqq_fgdim_147:not(#\9):not(.awsui_refresh_14iqq_fgdim_155)::after {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -191,141 +191,141 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
   box-shadow: var(--shadow-container-fxmdn3, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
 }
-.awsui_root_14iqq_1w0sy_103.awsui_variant-stacked_14iqq_1w0sy_147:not(#\9):not(:last-child), .awsui_root_14iqq_1w0sy_103.awsui_variant-stacked_14iqq_1w0sy_147:not(#\9):not(:last-child)::before, .awsui_root_14iqq_1w0sy_103.awsui_variant-stacked_14iqq_1w0sy_147:not(#\9):not(:last-child)::after {
+.awsui_root_14iqq_fgdim_103.awsui_variant-stacked_14iqq_fgdim_147:not(#\9):not(:last-child), .awsui_root_14iqq_fgdim_103.awsui_variant-stacked_14iqq_fgdim_147:not(#\9):not(:last-child)::before, .awsui_root_14iqq_fgdim_103.awsui_variant-stacked_14iqq_fgdim_147:not(#\9):not(:last-child)::after {
   border-end-end-radius: 0;
   border-end-start-radius: 0;
   border-block-end-width: 0;
 }
-.awsui_root_14iqq_1w0sy_103.awsui_variant-stacked_14iqq_1w0sy_147 + .awsui_root_14iqq_1w0sy_103.awsui_variant-stacked_14iqq_1w0sy_147:not(#\9), .awsui_root_14iqq_1w0sy_103.awsui_variant-stacked_14iqq_1w0sy_147 + .awsui_root_14iqq_1w0sy_103.awsui_variant-stacked_14iqq_1w0sy_147:not(#\9)::before, .awsui_root_14iqq_1w0sy_103.awsui_variant-stacked_14iqq_1w0sy_147 + .awsui_root_14iqq_1w0sy_103.awsui_variant-stacked_14iqq_1w0sy_147:not(#\9)::after {
+.awsui_root_14iqq_fgdim_103.awsui_variant-stacked_14iqq_fgdim_147 + .awsui_root_14iqq_fgdim_103.awsui_variant-stacked_14iqq_fgdim_147:not(#\9), .awsui_root_14iqq_fgdim_103.awsui_variant-stacked_14iqq_fgdim_147 + .awsui_root_14iqq_fgdim_103.awsui_variant-stacked_14iqq_fgdim_147:not(#\9)::before, .awsui_root_14iqq_fgdim_103.awsui_variant-stacked_14iqq_fgdim_147 + .awsui_root_14iqq_fgdim_103.awsui_variant-stacked_14iqq_fgdim_147:not(#\9)::after {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
-.awsui_root_14iqq_1w0sy_103.awsui_variant-stacked_14iqq_1w0sy_147 + .awsui_root_14iqq_1w0sy_103.awsui_variant-stacked_14iqq_1w0sy_147:not(#\9):not(.awsui_refresh_14iqq_1w0sy_155)::before {
+.awsui_root_14iqq_fgdim_103.awsui_variant-stacked_14iqq_fgdim_147 + .awsui_root_14iqq_fgdim_103.awsui_variant-stacked_14iqq_fgdim_147:not(#\9):not(.awsui_refresh_14iqq_fgdim_155)::before {
   border-block-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
 }
-.awsui_root_14iqq_1w0sy_103.awsui_sticky-enabled_14iqq_1w0sy_205:not(#\9):not(.awsui_refresh_14iqq_1w0sy_155)::before {
+.awsui_root_14iqq_fgdim_103.awsui_sticky-enabled_14iqq_fgdim_205:not(#\9):not(.awsui_refresh_14iqq_fgdim_155)::before {
   inset-block-start: calc(-1 * var(--border-container-top-width-uugwwl, 0px));
 }
-.awsui_root_14iqq_1w0sy_103.awsui_sticky-enabled_14iqq_1w0sy_205:not(#\9):not(.awsui_refresh_14iqq_1w0sy_155).awsui_variant-stacked_14iqq_1w0sy_147::before {
+.awsui_root_14iqq_fgdim_103.awsui_sticky-enabled_14iqq_fgdim_205:not(#\9):not(.awsui_refresh_14iqq_fgdim_155).awsui_variant-stacked_14iqq_fgdim_147::before {
   inset-block-start: calc(-1 * var(--border-divider-section-width-1061zr, 1px));
 }
 
-.awsui_with-side-media_14iqq_1w0sy_144:not(#\9) {
+.awsui_with-side-media_14iqq_fgdim_144:not(#\9) {
   display: flex;
   flex-direction: row;
 }
 
-.awsui_with-top-media_14iqq_1w0sy_217:not(#\9) {
+.awsui_with-top-media_14iqq_fgdim_217:not(#\9) {
   display: flex;
   flex-direction: column;
 }
 
-.awsui_content-wrapper_14iqq_1w0sy_222:not(#\9) {
+.awsui_content-wrapper_14iqq_fgdim_222:not(#\9) {
   display: flex;
   flex-direction: column;
   inline-size: 100%;
 }
-.awsui_content-wrapper-fit-height_14iqq_1w0sy_227:not(#\9) {
+.awsui_content-wrapper-fit-height_14iqq_fgdim_227:not(#\9) {
   block-size: 100%;
   overflow: hidden;
   border-end-start-radius: var(--border-radius-container-wqv1zi, 16px);
   border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
 }
 
-.awsui_media_14iqq_1w0sy_234:not(#\9) {
+.awsui_media_14iqq_fgdim_234:not(#\9) {
   overflow: hidden;
   flex-shrink: 0;
 }
-.awsui_media_14iqq_1w0sy_234 img:not(#\9),
-.awsui_media_14iqq_1w0sy_234 video:not(#\9),
-.awsui_media_14iqq_1w0sy_234 picture:not(#\9) {
+.awsui_media_14iqq_fgdim_234 img:not(#\9),
+.awsui_media_14iqq_fgdim_234 video:not(#\9),
+.awsui_media_14iqq_fgdim_234 picture:not(#\9) {
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   object-position: center;
 }
-.awsui_media_14iqq_1w0sy_234 iframe:not(#\9) {
+.awsui_media_14iqq_fgdim_234 iframe:not(#\9) {
   inline-size: 100%;
   block-size: 100%;
   border-block: 0;
   border-inline: 0;
 }
-.awsui_media-top_14iqq_1w0sy_252:not(#\9) {
+.awsui_media-top_14iqq_fgdim_252:not(#\9) {
   max-block-size: 66%;
   border-start-start-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
   border-start-end-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
 }
-.awsui_media-side_14iqq_1w0sy_257:not(#\9) {
+.awsui_media-side_14iqq_fgdim_257:not(#\9) {
   max-inline-size: 66%;
   border-start-start-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
   border-end-start-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
 }
 
-.awsui_header_14iqq_1w0sy_263:not(#\9) {
+.awsui_header_14iqq_fgdim_263:not(#\9) {
   background-color: var(--color-background-container-header-8b9fgi, #ffffff);
   border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
   border-start-end-radius: var(--border-radius-container-wqv1zi, 16px);
 }
-.awsui_header_14iqq_1w0sy_263.awsui_header-with-media_14iqq_1w0sy_268:not(#\9) {
+.awsui_header_14iqq_fgdim_263.awsui_header-with-media_14iqq_fgdim_268:not(#\9) {
   background: none;
 }
-.awsui_header_14iqq_1w0sy_263.awsui_header-with-media_14iqq_1w0sy_268:not(#\9):not(:empty) {
+.awsui_header_14iqq_fgdim_263.awsui_header-with-media_14iqq_fgdim_268:not(#\9):not(:empty) {
   border-block-end: none;
 }
-.awsui_header-sticky-disabled_14iqq_1w0sy_274:not(#\9) {
+.awsui_header-sticky-disabled_14iqq_fgdim_274:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_header-sticky-enabled_14iqq_1w0sy_278:not(#\9) {
+.awsui_header-sticky-enabled_14iqq_fgdim_278:not(#\9) {
   inset-block-start: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   position: sticky;
   z-index: 800;
 }
-.awsui_header-stuck_14iqq_1w0sy_284:not(#\9) {
+.awsui_header-stuck_14iqq_fgdim_284:not(#\9) {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
-.awsui_header-stuck_14iqq_1w0sy_284:not(#\9)::before {
+.awsui_header-stuck_14iqq_fgdim_284:not(#\9)::before {
   border-block: 0;
   border-inline: 0;
 }
-.awsui_header-stuck_14iqq_1w0sy_284:not(#\9):not(.awsui_header-variant-cards_14iqq_1w0sy_294) {
+.awsui_header-stuck_14iqq_fgdim_284:not(#\9):not(.awsui_header-variant-cards_14iqq_fgdim_294) {
   box-shadow: var(--shadow-sticky-embedded-uvh5ry, 0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.1));
 }
-.awsui_header-dynamic-height_14iqq_1w0sy_297.awsui_header-stuck_14iqq_1w0sy_284:not(#\9) {
+.awsui_header-dynamic-height_14iqq_fgdim_297.awsui_header-stuck_14iqq_fgdim_284:not(#\9) {
   margin-block-end: calc(var(--line-height-heading-xl-avbttk, 30px) - var(--line-height-heading-l-mmm3my, 24px));
 }
-.awsui_header_14iqq_1w0sy_263:not(#\9):not(:empty) {
+.awsui_header_14iqq_fgdim_263:not(#\9):not(:empty) {
   border-block-end: var(--border-container-sticky-width-6asz33, 0px) solid var(--color-border-container-divider-p2uygo, transparent);
 }
-.awsui_header_14iqq_1w0sy_263.awsui_with-paddings_14iqq_1w0sy_303:not(#\9) {
+.awsui_header_14iqq_fgdim_263.awsui_with-paddings_14iqq_fgdim_303:not(#\9) {
   padding-block-start: var(--space-container-header-top-5qav00, 12px);
   padding-block-end: var(--space-container-header-bottom-vj01hn, 8px);
   padding-inline: var(--space-container-horizontal-wfukh3, 20px);
 }
-.awsui_header_14iqq_1w0sy_263.awsui_with-paddings_14iqq_1w0sy_303.awsui_header-variant-cards_14iqq_1w0sy_294:not(#\9) {
+.awsui_header_14iqq_fgdim_263.awsui_with-paddings_14iqq_fgdim_303.awsui_header-variant-cards_14iqq_fgdim_294:not(#\9) {
   padding-block: var(--space-container-header-top-5qav00, 12px);
   padding-inline: var(--space-container-horizontal-wfukh3, 20px);
 }
-.awsui_header_14iqq_1w0sy_263.awsui_with-hidden-content_14iqq_1w0sy_312:not(#\9) {
+.awsui_header_14iqq_fgdim_263.awsui_with-hidden-content_14iqq_fgdim_312:not(#\9) {
   border-end-start-radius: var(--border-radius-container-wqv1zi, 16px);
   border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
 }
-.awsui_header-variant-cards_14iqq_1w0sy_294:not(#\9) {
+.awsui_header-variant-cards_14iqq_fgdim_294:not(#\9) {
   border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
   border-start-end-radius: var(--border-radius-container-wqv1zi, 16px);
   border-end-start-radius: var(--border-radius-container-wqv1zi, 16px);
   border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
   box-sizing: border-box;
 }
-.awsui_header-variant-cards_14iqq_1w0sy_294.awsui_refresh_14iqq_1w0sy_155:not(#\9) {
+.awsui_header-variant-cards_14iqq_fgdim_294.awsui_refresh_14iqq_fgdim_155:not(#\9) {
   border-block: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
   border-inline: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
 }
-.awsui_header-variant-cards_14iqq_1w0sy_294:not(#\9):not(.awsui_refresh_14iqq_1w0sy_155)::before {
+.awsui_header-variant-cards_14iqq_fgdim_294:not(#\9):not(.awsui_refresh_14iqq_fgdim_155)::before {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -343,7 +343,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
   z-index: 1;
 }
-.awsui_header-variant-cards_14iqq_1w0sy_294:not(#\9):not(.awsui_refresh_14iqq_1w0sy_155)::after {
+.awsui_header-variant-cards_14iqq_fgdim_294:not(#\9):not(.awsui_refresh_14iqq_fgdim_155)::after {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -359,22 +359,29 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
   box-shadow: var(--shadow-container-fxmdn3, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
 }
-.awsui_header-variant-cards_14iqq_1w0sy_294:not(#\9):not(.awsui_header-sticky-enabled_14iqq_1w0sy_278) {
+.awsui_header-variant-cards_14iqq_fgdim_294:not(#\9):not(.awsui_header-sticky-enabled_14iqq_fgdim_278) {
   position: relative;
 }
-.awsui_header-variant-cards_14iqq_1w0sy_294.awsui_header-stuck_14iqq_1w0sy_284:not(#\9)::after, .awsui_header-variant-cards_14iqq_1w0sy_294.awsui_header-stuck_14iqq_1w0sy_284:not(#\9)::before {
+.awsui_header-variant-cards_14iqq_fgdim_294.awsui_header-stuck_14iqq_fgdim_284:not(#\9)::after, .awsui_header-variant-cards_14iqq_fgdim_294.awsui_header-stuck_14iqq_fgdim_284:not(#\9)::before {
   border-block: 0;
   border-inline: 0;
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
-.awsui_header-variant-full-page_14iqq_1w0sy_370.awsui_with-toolbar_14iqq_1w0sy_370:not(#\9) {
+.awsui_header-variant-full-page_14iqq_fgdim_370.awsui_with-toolbar_14iqq_fgdim_370:not(#\9) {
   padding-block-start: var(--space-scaled-s-aqzyko, 12px);
 }
-.awsui_header-variant-full-page_14iqq_1w0sy_370.awsui_header-stuck_14iqq_1w0sy_284:not(#\9) {
+.awsui_header-variant-full-page_14iqq_fgdim_370.awsui_header-stuck_14iqq_fgdim_284:not(#\9) {
   box-shadow: none;
 }
-.awsui_header-variant-full-page_14iqq_1w0sy_370.awsui_header-stuck_14iqq_1w0sy_284:not(#\9)::before {
+.awsui_header-variant-full-page_14iqq_fgdim_370.awsui_header-stuck_14iqq_fgdim_284 > .awsui_header-cover_14iqq_fgdim_376:not(#\9) {
+  background-color: var(--color-background-layout-main-nx09lr, #ffffff);
+  inline-size: 100%;
+  position: absolute;
+  block-size: var(--space-scaled-s-aqzyko, 12px);
+  inset-block-start: calc(-1 * var(--space-scaled-s-aqzyko, 12px));
+}
+.awsui_header-variant-full-page_14iqq_fgdim_370.awsui_header-stuck_14iqq_fgdim_284:not(#\9)::before {
   content: "";
   position: absolute;
   pointer-events: none;
@@ -384,7 +391,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-block-start: 0;
   border-block-end: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
 }
-.awsui_header-variant-full-page_14iqq_1w0sy_370.awsui_header-stuck_14iqq_1w0sy_284:not(#\9)::after {
+.awsui_header-variant-full-page_14iqq_fgdim_370.awsui_header-stuck_14iqq_fgdim_284:not(#\9)::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -392,27 +399,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   clip-path: polygon(-999% 100%, 999% 100%, 999% 999%, -999% 999%);
 }
 
-.awsui_content_14iqq_1w0sy_222:not(#\9) {
+.awsui_content_14iqq_fgdim_222:not(#\9) {
   flex: 1;
 }
-.awsui_content-fit-height_14iqq_1w0sy_397:not(#\9) {
+.awsui_content-fit-height_14iqq_fgdim_404:not(#\9) {
   overflow: auto;
 }
-.awsui_content_14iqq_1w0sy_222.awsui_with-paddings_14iqq_1w0sy_303:not(#\9) {
+.awsui_content_14iqq_fgdim_222.awsui_with-paddings_14iqq_fgdim_303:not(#\9) {
   padding-block: var(--space-scaled-l-0hpmd7, 20px);
   padding-inline: var(--space-container-horizontal-wfukh3, 20px);
 }
-.awsui_header_14iqq_1w0sy_263 + .awsui_content_14iqq_1w0sy_222.awsui_with-paddings_14iqq_1w0sy_303:not(#\9) {
+.awsui_header_14iqq_fgdim_263 + .awsui_content_14iqq_fgdim_222.awsui_with-paddings_14iqq_fgdim_303:not(#\9) {
   padding-block-start: var(--space-container-content-top-1ae0r3, 4px);
 }
-.awsui_header_14iqq_1w0sy_263 + .awsui_content_14iqq_1w0sy_222.awsui_with-paddings_14iqq_1w0sy_303.awsui_content-with-media_14iqq_1w0sy_407:not(#\9) {
+.awsui_header_14iqq_fgdim_263 + .awsui_content_14iqq_fgdim_222.awsui_with-paddings_14iqq_fgdim_303.awsui_content-with-media_14iqq_fgdim_414:not(#\9) {
   padding-block-start: 0;
 }
 
-.awsui_footer_14iqq_1w0sy_411.awsui_with-paddings_14iqq_1w0sy_303:not(#\9) {
+.awsui_footer_14iqq_fgdim_418.awsui_with-paddings_14iqq_fgdim_303:not(#\9) {
   padding-block: var(--space-scaled-s-aqzyko, 12px);
   padding-inline: var(--space-container-horizontal-wfukh3, 20px);
 }
-.awsui_footer_14iqq_1w0sy_411.awsui_with-divider_14iqq_1w0sy_415:not(#\9) {
+.awsui_footer_14iqq_fgdim_418.awsui_with-divider_14iqq_fgdim_422:not(#\9) {
   border-block-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
 }

package/container/styles.selectors.js

@@ -2,34 +2,35 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_14iqq_1w0sy_103",
-  "fit-height": "awsui_fit-height_14iqq_1w0sy_139",
-  "with-side-media": "awsui_with-side-media_14iqq_1w0sy_144",
-  "variant-default": "awsui_variant-default_14iqq_1w0sy_147",
-  "variant-stacked": "awsui_variant-stacked_14iqq_1w0sy_147",
-  "refresh": "awsui_refresh_14iqq_1w0sy_155",
-  "sticky-enabled": "awsui_sticky-enabled_14iqq_1w0sy_205",
-  "with-top-media": "awsui_with-top-media_14iqq_1w0sy_217",
-  "content-wrapper": "awsui_content-wrapper_14iqq_1w0sy_222",
-  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_1w0sy_227",
-  "media": "awsui_media_14iqq_1w0sy_234",
-  "media-top": "awsui_media-top_14iqq_1w0sy_252",
-  "media-side": "awsui_media-side_14iqq_1w0sy_257",
-  "header": "awsui_header_14iqq_1w0sy_263",
-  "header-with-media": "awsui_header-with-media_14iqq_1w0sy_268",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1w0sy_274",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1w0sy_278",
-  "header-stuck": "awsui_header-stuck_14iqq_1w0sy_284",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_1w0sy_294",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1w0sy_297",
-  "with-paddings": "awsui_with-paddings_14iqq_1w0sy_303",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_1w0sy_312",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1w0sy_370",
-  "with-toolbar": "awsui_with-toolbar_14iqq_1w0sy_370",
-  "content": "awsui_content_14iqq_1w0sy_222",
-  "content-fit-height": "awsui_content-fit-height_14iqq_1w0sy_397",
-  "content-with-media": "awsui_content-with-media_14iqq_1w0sy_407",
-  "footer": "awsui_footer_14iqq_1w0sy_411",
-  "with-divider": "awsui_with-divider_14iqq_1w0sy_415"
+  "root": "awsui_root_14iqq_fgdim_103",
+  "fit-height": "awsui_fit-height_14iqq_fgdim_139",
+  "with-side-media": "awsui_with-side-media_14iqq_fgdim_144",
+  "variant-default": "awsui_variant-default_14iqq_fgdim_147",
+  "variant-stacked": "awsui_variant-stacked_14iqq_fgdim_147",
+  "refresh": "awsui_refresh_14iqq_fgdim_155",
+  "sticky-enabled": "awsui_sticky-enabled_14iqq_fgdim_205",
+  "with-top-media": "awsui_with-top-media_14iqq_fgdim_217",
+  "content-wrapper": "awsui_content-wrapper_14iqq_fgdim_222",
+  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_fgdim_227",
+  "media": "awsui_media_14iqq_fgdim_234",
+  "media-top": "awsui_media-top_14iqq_fgdim_252",
+  "media-side": "awsui_media-side_14iqq_fgdim_257",
+  "header": "awsui_header_14iqq_fgdim_263",
+  "header-with-media": "awsui_header-with-media_14iqq_fgdim_268",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_fgdim_274",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_fgdim_278",
+  "header-stuck": "awsui_header-stuck_14iqq_fgdim_284",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_fgdim_294",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_fgdim_297",
+  "with-paddings": "awsui_with-paddings_14iqq_fgdim_303",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_fgdim_312",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_fgdim_370",
+  "with-toolbar": "awsui_with-toolbar_14iqq_fgdim_370",
+  "header-cover": "awsui_header-cover_14iqq_fgdim_376",
+  "content": "awsui_content_14iqq_fgdim_222",
+  "content-fit-height": "awsui_content-fit-height_14iqq_fgdim_404",
+  "content-with-media": "awsui_content-with-media_14iqq_fgdim_414",
+  "footer": "awsui_footer_14iqq_fgdim_418",
+  "with-divider": "awsui_with-divider_14iqq_fgdim_422"
 };
   

package/container/use-sticky-header.d.ts

@@ -7,10 +7,11 @@ interface ComputeOffsetProps {
     __stickyOffset?: number;
     __mobileStickyOffset?: number;
     hasInnerOverflowParents: boolean;
+    __additionalOffset?: boolean;
 }
-export declare function computeOffset({ isMobile, __stickyOffset, __mobileStickyOffset, hasInnerOverflowParents, }: ComputeOffsetProps): string;
+export declare function computeOffset({ isMobile, __stickyOffset, __mobileStickyOffset, hasInnerOverflowParents, __additionalOffset, }: ComputeOffsetProps): string;
 export declare const StickyHeaderContext: import("react").Context<StickyHeaderContextProps>;
-export declare const useStickyHeader: (rootRef: RefObject<HTMLDivElement>, headerRef: RefObject<HTMLDivElement>, __stickyHeader?: boolean, __stickyOffset?: number, __mobileStickyOffset?: number, __disableMobile?: boolean) => {
+export declare const useStickyHeader: (rootRef: RefObject<HTMLDivElement>, headerRef: RefObject<HTMLDivElement>, __stickyHeader?: boolean, __stickyOffset?: number, __mobileStickyOffset?: number, __disableMobile?: boolean, __additionalOffset?: boolean) => {
     isSticky: boolean;
     isStuck: boolean;
     stickyStyles: {

package/container/use-sticky-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-header.d.ts","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAoE,MAAM,OAAO,CAAC;AAMpG,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,EAAE,OAAO,CAAC;CAClC;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,cAAc,EACd,oBAAoB,EACpB,uBAAuB,GACxB,EAAE,kBAAkB,GAAG,MAAM,CAQ7B;AAED,eAAO,MAAM,mBAAmB,mDAE9B,CAAC;AAEH,eAAO,MAAM,eAAe,YACjB,UAAU,cAAc,CAAC,aACvB,UAAU,cAAc,CAAC,mBACnB,OAAO,mBACP,MAAM,yBACA,MAAM;;;;;;;;;;CAmE9B,CAAC"}
+{"version":3,"file":"use-sticky-header.d.ts","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAoE,MAAM,OAAO,CAAC;AAOpG,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,EAAE,OAAO,CAAC;IACjC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,cAAc,EACd,oBAAoB,EACpB,uBAAuB,EACvB,kBAAkB,GACnB,EAAE,kBAAkB,GAAG,MAAM,CAQ7B;AAED,eAAO,MAAM,mBAAmB,mDAE9B,CAAC;AAEH,eAAO,MAAM,eAAe,YACjB,UAAU,cAAc,CAAC,aACvB,UAAU,cAAc,CAAC,mBACnB,OAAO,mBACP,MAAM,yBACA,MAAM,oBACX,OAAO;;;;;;;;;;CAoE1B,CAAC"}

package/container/use-sticky-header.js

@@ -5,18 +5,19 @@ import { findUpUntil } from '../internal/utils/dom';
 import { getOverflowParents } from '../internal/utils/scrollable-containers';
 import { useMobile } from '../internal/hooks/use-mobile';
 import globalVars from '../internal/styles/global-vars';
-export function computeOffset({ isMobile, __stickyOffset, __mobileStickyOffset, hasInnerOverflowParents, }) {
+import * as tokens from '../internal/generated/styles/tokens';
+export function computeOffset({ isMobile, __stickyOffset, __mobileStickyOffset, hasInnerOverflowParents, __additionalOffset, }) {
     const localOffset = isMobile ? (__stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : 0) - (__mobileStickyOffset !== null && __mobileStickyOffset !== void 0 ? __mobileStickyOffset : 0) : __stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : 0;
     if (hasInnerOverflowParents || __stickyOffset !== undefined) {
         return `${localOffset}px`;
     }
     const globalOffset = `var(${globalVars.stickyVerticalTopOffset}, 0px)`;
-    return `calc(${globalOffset} + ${localOffset}px)`;
+    return `calc(${globalOffset} + ${localOffset}px + ${__additionalOffset ? tokens.spaceScaledS : '0px'})`;
 }
 export const StickyHeaderContext = createContext({
     isStuck: false,
 });
-export const useStickyHeader = (rootRef, headerRef, __stickyHeader, __stickyOffset, __mobileStickyOffset, __disableMobile = true) => {
+export const useStickyHeader = (rootRef, headerRef, __stickyHeader, __stickyOffset, __mobileStickyOffset, __disableMobile, __additionalOffset = false) => {
     const isMobile = useMobile();
     const disableSticky = isMobile && __disableMobile;
     const isSticky = !disableSticky && !!__stickyHeader;
@@ -39,6 +40,7 @@ export const useStickyHeader = (rootRef, headerRef, __stickyHeader, __stickyOffs
         __stickyOffset,
         __mobileStickyOffset,
         hasInnerOverflowParents,
+        __additionalOffset,
     });
     const stickyStyles = isSticky
         ? {

package/container/use-sticky-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { RefObject, useState, useLayoutEffect, useCallback, useEffect, createContext } from 'react';\nimport { findUpUntil } from '../internal/utils/dom';\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport globalVars from '../internal/styles/global-vars';\n\ninterface StickyHeaderContextProps {\n  isStuck: boolean;\n}\n\ninterface ComputeOffsetProps {\n  isMobile: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  hasInnerOverflowParents: boolean;\n}\n\nexport function computeOffset({\n  isMobile,\n  __stickyOffset,\n  __mobileStickyOffset,\n  hasInnerOverflowParents,\n}: ComputeOffsetProps): string {\n  const localOffset = isMobile ? (__stickyOffset ?? 0) - (__mobileStickyOffset ?? 0) : __stickyOffset ?? 0;\n  if (hasInnerOverflowParents || __stickyOffset !== undefined) {\n    return `${localOffset}px`;\n  }\n  const globalOffset = `var(${globalVars.stickyVerticalTopOffset}, 0px)`;\n\n  return `calc(${globalOffset} + ${localOffset}px)`;\n}\n\nexport const StickyHeaderContext = createContext<StickyHeaderContextProps>({\n  isStuck: false,\n});\n\nexport const useStickyHeader = (\n  rootRef: RefObject<HTMLDivElement>,\n  headerRef: RefObject<HTMLDivElement>,\n  __stickyHeader?: boolean,\n  __stickyOffset?: number,\n  __mobileStickyOffset?: number,\n  __disableMobile = true\n) => {\n  const isMobile = useMobile();\n  const disableSticky = isMobile && __disableMobile;\n  const isSticky = !disableSticky && !!__stickyHeader;\n\n  // If it has overflow parents inside the app layout, we shouldn't apply a sticky offset.\n  const [hasInnerOverflowParents, setHasInnerOverflowParents] = useState(false);\n  const [isStuck, setIsStuck] = useState(false);\n  useLayoutEffect(() => {\n    if (rootRef.current) {\n      const overflowParents = getOverflowParents(rootRef.current);\n      const mainElement = findUpUntil(rootRef.current, elem => elem.tagName === 'MAIN');\n      // In both versions of the app layout, the scrolling element for disableBodyScroll\n      // is the <main>. If the closest overflow parent is also the closest <main> and we have\n      // offset values, it's safe to assume that it's the app layout scroll root and we\n      // should stop there.\n      setHasInnerOverflowParents(overflowParents.length > 0 && overflowParents[0] !== mainElement);\n    }\n  }, [rootRef]);\n\n  const computedOffset = computeOffset({\n    isMobile,\n    __stickyOffset,\n    __mobileStickyOffset,\n    hasInnerOverflowParents,\n  });\n\n  const stickyStyles = isSticky\n    ? {\n        style: {\n          top: computedOffset,\n        },\n      }\n    : {};\n\n  // \"stuck\" state, when the header has moved from its original posititon has a\n  // box-shadow, applied here by a \"header-stuck\" className\n  const checkIfStuck = useCallback(() => {\n    if (rootRef.current && headerRef.current) {\n      const rootTopBorderWidth = parseFloat(getComputedStyle(rootRef.current).borderTopWidth) || 0;\n      const rootTop = rootRef.current.getBoundingClientRect().top + rootTopBorderWidth;\n      const headerTop = headerRef.current.getBoundingClientRect().top;\n\n      if (rootTop < headerTop) {\n        setIsStuck(true);\n      } else {\n        setIsStuck(false);\n      }\n    }\n  }, [rootRef, headerRef]);\n  useEffect(() => {\n    if (isSticky) {\n      window.addEventListener('scroll', checkIfStuck, true);\n      window.addEventListener('resize', checkIfStuck);\n      return () => {\n        window.removeEventListener('scroll', checkIfStuck, true);\n        window.removeEventListener('resize', checkIfStuck);\n      };\n    }\n  }, [isSticky, checkIfStuck]);\n  return {\n    isSticky,\n    isStuck,\n    stickyStyles,\n  };\n};\n"]}
+{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { RefObject, useState, useLayoutEffect, useCallback, useEffect, createContext } from 'react';\nimport { findUpUntil } from '../internal/utils/dom';\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport globalVars from '../internal/styles/global-vars';\nimport * as tokens from '../internal/generated/styles/tokens';\n\ninterface StickyHeaderContextProps {\n  isStuck: boolean;\n}\n\ninterface ComputeOffsetProps {\n  isMobile: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  hasInnerOverflowParents: boolean;\n  __additionalOffset?: boolean;\n}\n\nexport function computeOffset({\n  isMobile,\n  __stickyOffset,\n  __mobileStickyOffset,\n  hasInnerOverflowParents,\n  __additionalOffset,\n}: ComputeOffsetProps): string {\n  const localOffset = isMobile ? (__stickyOffset ?? 0) - (__mobileStickyOffset ?? 0) : __stickyOffset ?? 0;\n  if (hasInnerOverflowParents || __stickyOffset !== undefined) {\n    return `${localOffset}px`;\n  }\n  const globalOffset = `var(${globalVars.stickyVerticalTopOffset}, 0px)`;\n\n  return `calc(${globalOffset} + ${localOffset}px + ${__additionalOffset ? tokens.spaceScaledS : '0px'})`;\n}\n\nexport const StickyHeaderContext = createContext<StickyHeaderContextProps>({\n  isStuck: false,\n});\n\nexport const useStickyHeader = (\n  rootRef: RefObject<HTMLDivElement>,\n  headerRef: RefObject<HTMLDivElement>,\n  __stickyHeader?: boolean,\n  __stickyOffset?: number,\n  __mobileStickyOffset?: number,\n  __disableMobile?: boolean,\n  __additionalOffset = false\n) => {\n  const isMobile = useMobile();\n  const disableSticky = isMobile && __disableMobile;\n  const isSticky = !disableSticky && !!__stickyHeader;\n\n  // If it has overflow parents inside the app layout, we shouldn't apply a sticky offset.\n  const [hasInnerOverflowParents, setHasInnerOverflowParents] = useState(false);\n  const [isStuck, setIsStuck] = useState(false);\n  useLayoutEffect(() => {\n    if (rootRef.current) {\n      const overflowParents = getOverflowParents(rootRef.current);\n      const mainElement = findUpUntil(rootRef.current, elem => elem.tagName === 'MAIN');\n      // In both versions of the app layout, the scrolling element for disableBodyScroll\n      // is the <main>. If the closest overflow parent is also the closest <main> and we have\n      // offset values, it's safe to assume that it's the app layout scroll root and we\n      // should stop there.\n      setHasInnerOverflowParents(overflowParents.length > 0 && overflowParents[0] !== mainElement);\n    }\n  }, [rootRef]);\n\n  const computedOffset = computeOffset({\n    isMobile,\n    __stickyOffset,\n    __mobileStickyOffset,\n    hasInnerOverflowParents,\n    __additionalOffset,\n  });\n\n  const stickyStyles = isSticky\n    ? {\n        style: {\n          top: computedOffset,\n        },\n      }\n    : {};\n\n  // \"stuck\" state, when the header has moved from its original posititon has a\n  // box-shadow, applied here by a \"header-stuck\" className\n  const checkIfStuck = useCallback(() => {\n    if (rootRef.current && headerRef.current) {\n      const rootTopBorderWidth = parseFloat(getComputedStyle(rootRef.current).borderTopWidth) || 0;\n      const rootTop = rootRef.current.getBoundingClientRect().top + rootTopBorderWidth;\n      const headerTop = headerRef.current.getBoundingClientRect().top;\n\n      if (rootTop < headerTop) {\n        setIsStuck(true);\n      } else {\n        setIsStuck(false);\n      }\n    }\n  }, [rootRef, headerRef]);\n  useEffect(() => {\n    if (isSticky) {\n      window.addEventListener('scroll', checkIfStuck, true);\n      window.addEventListener('resize', checkIfStuck);\n      return () => {\n        window.removeEventListener('scroll', checkIfStuck, true);\n        window.removeEventListener('resize', checkIfStuck);\n      };\n    }\n  }, [isSticky, checkIfStuck]);\n  return {\n    isSticky,\n    isStuck,\n    stickyStyles,\n  };\n};\n"]}

package/content-layout/internal.js

@@ -35,7 +35,7 @@ export default function InternalContentLayout(_a) {
         }), style: {
             [customCssProps.contentLayoutMaxContentWidth]: maxContentWidth < Number.MAX_VALUE ? `${maxContentWidth}px` : `${halfGeckoMaxCssLength}px`,
         }, ref: mergedRef }),
-        React.createElement("div", { className: clsx(styles.background, { [styles['has-default-background']]: !headerBackgroundStyle }, contentHeaderClassName), ref: overlapElement }, headerBackgroundStyle && (React.createElement("div", { className: clsx(styles['header-background']), style: {
+        React.createElement("div", { className: clsx(styles.background, { [styles['has-default-background']]: !headerBackgroundStyle }, contentHeaderClassName), ref: overlapElement }, headerBackgroundStyle && (React.createElement("div", { className: styles['header-background'], style: {
                 background: typeof headerBackgroundStyle === 'function' ? headerBackgroundStyle(mode) : headerBackgroundStyle,
             } }))),
         notifications && (React.createElement("div", { className: clsx(styles.notifications, testutilStyles.notifications, contentHeaderClassName) }, notifications)),
@@ -48,7 +48,7 @@ export default function InternalContentLayout(_a) {
             }) },
             React.createElement(InternalGrid, { gridDefinition: [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }] },
                 React.createElement("div", { className: clsx(testutilStyles.header, contentHeaderClassName) }, header),
-                React.createElement("div", { className: clsx(testutilStyles['secondary-header']) }, secondaryHeader)))),
+                React.createElement("div", { className: testutilStyles['secondary-header'] }, secondaryHeader)))),
         React.createElement("div", { className: clsx(styles.content, {
                 [styles['with-divider']]: headerVariant === 'divider',
             }) }, children)));

package/content-layout/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/content-layout/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { ContentLayoutProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { highContrastHeaderClassName } from '../internal/utils/content-header-utils';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport styles from './styles.css.js';\nimport testutilStyles from './test-classes/styles.css.js';\nimport InternalGrid from '../grid/internal';\n\ntype InternalContentLayoutProps = ContentLayoutProps & InternalBaseComponentProps;\n\nconst halfGeckoMaxCssLength = ((1 << 30) - 1) / 120;\n// CSS lengths in Gecko are limited to at most (1<<30)-1 app units (Gecko uses 60 as app unit).\n// Limit the maxContentWidth to the half of the upper boundary (≈4230^2) to be on the safe side.\n\nexport default function InternalContentLayout({\n  children,\n  disableOverlap,\n  header,\n  headerVariant = 'default',\n  headerBackgroundStyle,\n  __internalRootRef,\n  maxContentWidth = Number.MAX_VALUE,\n  breadcrumbs,\n  notifications,\n  defaultPadding,\n  secondaryHeader,\n  ...rest\n}: InternalContentLayoutProps) {\n  const mainRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(mainRef, __internalRootRef);\n\n  const baseProps = getBaseProps(rest);\n\n  const isVisualRefresh = useVisualRefresh();\n  const mode = useCurrentMode(mainRef);\n\n  const overlapElement = useDynamicOverlap();\n\n  const isOverlapDisabled = !children || disableOverlap;\n\n  const contentHeaderClassName =\n    headerVariant === 'high-contrast' && isVisualRefresh ? highContrastHeaderClassName : '';\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.layout, {\n        [styles['is-overlap-disabled']]: isOverlapDisabled,\n        [styles['is-visual-refresh']]: isVisualRefresh,\n        [styles['has-header']]: !!header,\n        [styles['default-padding']]: !!defaultPadding,\n        [styles['has-notifications']]: !!notifications,\n      })}\n      style={{\n        [customCssProps.contentLayoutMaxContentWidth]:\n          maxContentWidth < Number.MAX_VALUE ? `${maxContentWidth}px` : `${halfGeckoMaxCssLength}px`,\n      }}\n      ref={mergedRef}\n    >\n      <div\n        className={clsx(\n          styles.background,\n          { [styles['has-default-background']]: !headerBackgroundStyle },\n          contentHeaderClassName\n        )}\n        ref={overlapElement}\n      >\n        {headerBackgroundStyle && (\n          <div\n            className={clsx(styles['header-background'])}\n            style={{\n              background:\n                typeof headerBackgroundStyle === 'function' ? headerBackgroundStyle(mode) : headerBackgroundStyle,\n            }}\n          />\n        )}\n      </div>\n      {notifications && (\n        <div className={clsx(styles.notifications, testutilStyles.notifications, contentHeaderClassName)}>\n          {notifications}\n        </div>\n      )}\n      {breadcrumbs && (\n        <div className={clsx(styles.breadcrumbs, testutilStyles.breadcrumbs, contentHeaderClassName)}>\n          {breadcrumbs}\n        </div>\n      )}\n      {header && !secondaryHeader && (\n        <div\n          className={clsx(styles['header-wrapper'], testutilStyles.header, contentHeaderClassName, {\n            [styles['with-divider']]: headerVariant === 'divider',\n          })}\n        >\n          {header}\n        </div>\n      )}\n      {header && secondaryHeader && (\n        <div\n          className={clsx(styles['header-wrapper'], {\n            [styles['with-divider']]: headerVariant === 'divider',\n          })}\n        >\n          <InternalGrid gridDefinition={[{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }]}>\n            <div className={clsx(testutilStyles.header, contentHeaderClassName)}>{header}</div>\n            <div className={clsx(testutilStyles['secondary-header'])}>{secondaryHeader}</div>\n          </InternalGrid>\n        </div>\n      )}\n\n      <div\n        className={clsx(styles.content, {\n          [styles['with-divider']]: headerVariant === 'divider',\n        })}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/content-layout/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { ContentLayoutProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { highContrastHeaderClassName } from '../internal/utils/content-header-utils';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport styles from './styles.css.js';\nimport testutilStyles from './test-classes/styles.css.js';\nimport InternalGrid from '../grid/internal';\n\ntype InternalContentLayoutProps = ContentLayoutProps & InternalBaseComponentProps;\n\nconst halfGeckoMaxCssLength = ((1 << 30) - 1) / 120;\n// CSS lengths in Gecko are limited to at most (1<<30)-1 app units (Gecko uses 60 as app unit).\n// Limit the maxContentWidth to the half of the upper boundary (≈4230^2) to be on the safe side.\n\nexport default function InternalContentLayout({\n  children,\n  disableOverlap,\n  header,\n  headerVariant = 'default',\n  headerBackgroundStyle,\n  __internalRootRef,\n  maxContentWidth = Number.MAX_VALUE,\n  breadcrumbs,\n  notifications,\n  defaultPadding,\n  secondaryHeader,\n  ...rest\n}: InternalContentLayoutProps) {\n  const mainRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(mainRef, __internalRootRef);\n\n  const baseProps = getBaseProps(rest);\n\n  const isVisualRefresh = useVisualRefresh();\n  const mode = useCurrentMode(mainRef);\n\n  const overlapElement = useDynamicOverlap();\n\n  const isOverlapDisabled = !children || disableOverlap;\n\n  const contentHeaderClassName =\n    headerVariant === 'high-contrast' && isVisualRefresh ? highContrastHeaderClassName : '';\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.layout, {\n        [styles['is-overlap-disabled']]: isOverlapDisabled,\n        [styles['is-visual-refresh']]: isVisualRefresh,\n        [styles['has-header']]: !!header,\n        [styles['default-padding']]: !!defaultPadding,\n        [styles['has-notifications']]: !!notifications,\n      })}\n      style={{\n        [customCssProps.contentLayoutMaxContentWidth]:\n          maxContentWidth < Number.MAX_VALUE ? `${maxContentWidth}px` : `${halfGeckoMaxCssLength}px`,\n      }}\n      ref={mergedRef}\n    >\n      <div\n        className={clsx(\n          styles.background,\n          { [styles['has-default-background']]: !headerBackgroundStyle },\n          contentHeaderClassName\n        )}\n        ref={overlapElement}\n      >\n        {headerBackgroundStyle && (\n          <div\n            className={styles['header-background']}\n            style={{\n              background:\n                typeof headerBackgroundStyle === 'function' ? headerBackgroundStyle(mode) : headerBackgroundStyle,\n            }}\n          />\n        )}\n      </div>\n      {notifications && (\n        <div className={clsx(styles.notifications, testutilStyles.notifications, contentHeaderClassName)}>\n          {notifications}\n        </div>\n      )}\n      {breadcrumbs && (\n        <div className={clsx(styles.breadcrumbs, testutilStyles.breadcrumbs, contentHeaderClassName)}>\n          {breadcrumbs}\n        </div>\n      )}\n      {header && !secondaryHeader && (\n        <div\n          className={clsx(styles['header-wrapper'], testutilStyles.header, contentHeaderClassName, {\n            [styles['with-divider']]: headerVariant === 'divider',\n          })}\n        >\n          {header}\n        </div>\n      )}\n      {header && secondaryHeader && (\n        <div\n          className={clsx(styles['header-wrapper'], {\n            [styles['with-divider']]: headerVariant === 'divider',\n          })}\n        >\n          <InternalGrid gridDefinition={[{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }]}>\n            <div className={clsx(testutilStyles.header, contentHeaderClassName)}>{header}</div>\n            <div className={testutilStyles['secondary-header']}>{secondaryHeader}</div>\n          </InternalGrid>\n        </div>\n      )}\n\n      <div\n        className={clsx(styles.content, {\n          [styles['with-divider']]: headerVariant === 'divider',\n        })}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"]}

package/drawer/implementation.js

@@ -17,8 +17,8 @@ export function DrawerImplementation(_a) {
     return loading ? (React.createElement("div", Object.assign({}, containerProps, { ref: __internalRootRef }),
         React.createElement(InternalStatusIndicator, { type: "loading" },
             React.createElement(LiveRegion, { visible: true }, i18n('i18nStrings.loadingText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.loadingText))))) : (React.createElement("div", Object.assign({}, containerProps, { ref: __internalRootRef }),
-        header && React.createElement("div", { className: clsx(styles.header) }, header),
-        React.createElement("div", { className: clsx(styles['test-utils-drawer-content']) }, children)));
+        header && React.createElement("div", { className: styles.header }, header),
+        React.createElement("div", { className: styles['test-utils-drawer-content'] }, children)));
 }
 export const createWidgetizedDrawer = createWidgetizedComponent(DrawerImplementation);
 //# sourceMappingURL=implementation.js.map