@cloudscape-design/components-themeable 3.0.634 → 3.0.635

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "7ce554a30164c16cb0bde29850e5463a74fa403e"
+  "commit": "f55b9e7957b22f6ce2a58ad2d6d3fdfb48a3b27a"
 }

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

@@ -41,7 +41,6 @@ explicitly set in script.
   #{custom-props.$notificationsGap}: 0px;
   #{custom-props.$notificationsHeight}: 0px;
   #{custom-props.$offsetTop}: var(#{custom-props.$headerHeight});
-  #{custom-props.$offsetTopWithNotifications}: 0px;
   #{custom-props.$overlapHeight}: #{awsui.$space-dark-header-overlap-distance};
   background-color: awsui.$color-background-layout-main;
   color: awsui.$color-text-body-default;
@@ -136,37 +135,6 @@ explicitly set in script.
     #{custom-props.$defaultMinContentWidth}: 0px;
   }
 
-  /*
-  The offset top value for components with position: sticky (AppBar, Navigation, 
-  Notifications, Tools) will be set to the header height value. The offset top value 
-  for AppLayout contentMain children with position: sticky will be the combined value 
-  of the header and notifications height in addition to the notifications top margin
-  and some additional vertical space for aesthetics.
-  */
-  &:not(.has-sticky-notifications):not(.has-sticky-background) {
-    #{custom-props.$offsetTopWithNotifications}: var(#{custom-props.$headerHeight});
-  }
-
-  &:not(.has-sticky-notifications).has-sticky-background {
-    #{custom-props.$offsetTopWithNotifications}: calc(var(#{custom-props.$headerHeight}) + #{awsui.$space-scaled-s});
-  }
-
-  /* stylelint-disable scss/operator-no-newline-after */
-  &.has-sticky-notifications:not(.has-sticky-background) {
-    #{custom-props.$offsetTopWithNotifications}: calc(
-      var(#{custom-props.$offsetTop}) + var(#{custom-props.$notificationsGap}) +
-        var(#{custom-props.$notificationsHeight}) + #{awsui.$space-xxxs}
-    );
-  }
-
-  &.has-sticky-notifications.has-sticky-background {
-    #{custom-props.$offsetTopWithNotifications}: calc(
-      var(#{custom-props.$offsetTop}) + var(#{custom-props.$notificationsGap}) +
-        var(#{custom-props.$notificationsHeight}) + #{awsui.$space-scaled-s}
-    );
-  }
-  /* stylelint-enable scss/operator-no-newline-after */
-
   /*
   In desktop viewports the content gap property for the left and right
   columns should override the default of zero if the navigationHide
@@ -293,17 +261,6 @@ notifications top margin and some additional vertical space for aesthetics.
   &.has-split-panel.split-panel-position-bottom {
     #{custom-props.$mainTemplateRows}: repeat(2, auto);
   }
-
-  &:not(.has-sticky-notifications) {
-    #{custom-props.$offsetTopWithNotifications}: 0px;
-  }
-
-  // #{awsui.$space-xs} token needs to align with the top margin in the notifications CSS
-  &.has-sticky-notifications {
-    #{custom-props.$offsetTopWithNotifications}: calc(
-      var(#{custom-props.$notificationsHeight}) + #{awsui.$space-xs} + #{awsui.$space-xxs}
-    );
-  }
 }
 
 /*

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

@@ -17,6 +17,9 @@
   inline-size: 100%;
   flex-wrap: wrap;
   justify-content: space-between;
+  &-with-toolbar {
+    padding-block-start: awsui.$space-scaled-s;
+  }
 
   &.refresh,
   &:not(.root-no-actions) {

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

@@ -1,46 +1,45 @@
 
-    $breadcrumbsGap: --awsui-breadcrumbs-gap-lgosor;
-$contentGapLeft: --awsui-content-gap-left-lgosor;
-$contentGapRight: --awsui-content-gap-right-lgosor;
-$contentHeight: --awsui-content-height-lgosor;
-$defaultMaxContentWidth: --awsui-default-max-content-width-lgosor;
-$defaultMinContentWidth: --awsui-default-min-content-width-lgosor;
-$drawerSize: --awsui-drawer-size-lgosor;
-$footerHeight: --awsui-footer-height-lgosor;
-$headerGap: --awsui-header-gap-lgosor;
-$headerHeight: --awsui-header-height-lgosor;
-$layoutWidth: --awsui-layout-width-lgosor;
-$mainGap: --awsui-main-gap-lgosor;
-$mainOffsetLeft: --awsui-main-offset-left-lgosor;
-$mainTemplateRows: --awsui-main-template-rows-lgosor;
-$maxContentWidth: --awsui-max-content-width-lgosor;
-$minContentWidth: --awsui-min-content-width-lgosor;
-$mobileBarHeight: --awsui-mobile-bar-height-lgosor;
-$notificationsGap: --awsui-notifications-gap-lgosor;
-$notificationsHeight: --awsui-notifications-height-lgosor;
-$offsetTop: --awsui-offset-top-lgosor;
-$offsetTopWithNotifications: --awsui-offset-top-with-notifications-lgosor;
-$overlapHeight: --awsui-overlap-height-lgosor;
-$navigationWidth: --awsui-navigation-width-lgosor;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-lgosor;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-lgosor;
-$splitPanelHeight: --awsui-split-panel-height-lgosor;
-$splitPanelMinWidth: --awsui-split-panel-min-width-lgosor;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-lgosor;
-$toolsMaxWidth: --awsui-tools-max-width-lgosor;
-$toolsWidth: --awsui-tools-width-lgosor;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-lgosor;
-$contentScrollMargin: --awsui-content-scroll-margin-lgosor;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-lgosor;
-$flashbarStackIndex: --awsui-flashbar-stack-index-lgosor;
-$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-lgosor;
-$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-lgosor;
-$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-lgosor;
-$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-lgosor;
-$spinnerRotatorFrom: --awsui-spinner-rotator-from-lgosor;
-$spinnerRotatorTo: --awsui-spinner-rotator-to-lgosor;
-$spinnerLineLeftFrom: --awsui-spinner-line-left-from-lgosor;
-$spinnerLineLeftTo: --awsui-spinner-line-left-to-lgosor;
-$spinnerLineRightFrom: --awsui-spinner-line-right-from-lgosor;
-$spinnerLineRightTo: --awsui-spinner-line-right-to-lgosor;
+    $breadcrumbsGap: --awsui-breadcrumbs-gap-ud5fvm;
+$contentGapLeft: --awsui-content-gap-left-ud5fvm;
+$contentGapRight: --awsui-content-gap-right-ud5fvm;
+$contentHeight: --awsui-content-height-ud5fvm;
+$defaultMaxContentWidth: --awsui-default-max-content-width-ud5fvm;
+$defaultMinContentWidth: --awsui-default-min-content-width-ud5fvm;
+$drawerSize: --awsui-drawer-size-ud5fvm;
+$footerHeight: --awsui-footer-height-ud5fvm;
+$headerGap: --awsui-header-gap-ud5fvm;
+$headerHeight: --awsui-header-height-ud5fvm;
+$layoutWidth: --awsui-layout-width-ud5fvm;
+$mainGap: --awsui-main-gap-ud5fvm;
+$mainOffsetLeft: --awsui-main-offset-left-ud5fvm;
+$mainTemplateRows: --awsui-main-template-rows-ud5fvm;
+$maxContentWidth: --awsui-max-content-width-ud5fvm;
+$minContentWidth: --awsui-min-content-width-ud5fvm;
+$mobileBarHeight: --awsui-mobile-bar-height-ud5fvm;
+$notificationsGap: --awsui-notifications-gap-ud5fvm;
+$notificationsHeight: --awsui-notifications-height-ud5fvm;
+$offsetTop: --awsui-offset-top-ud5fvm;
+$overlapHeight: --awsui-overlap-height-ud5fvm;
+$navigationWidth: --awsui-navigation-width-ud5fvm;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-ud5fvm;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-ud5fvm;
+$splitPanelHeight: --awsui-split-panel-height-ud5fvm;
+$splitPanelMinWidth: --awsui-split-panel-min-width-ud5fvm;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-ud5fvm;
+$toolsMaxWidth: --awsui-tools-max-width-ud5fvm;
+$toolsWidth: --awsui-tools-width-ud5fvm;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-ud5fvm;
+$contentScrollMargin: --awsui-content-scroll-margin-ud5fvm;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-ud5fvm;
+$flashbarStackIndex: --awsui-flashbar-stack-index-ud5fvm;
+$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-ud5fvm;
+$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-ud5fvm;
+$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-ud5fvm;
+$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-ud5fvm;
+$spinnerRotatorFrom: --awsui-spinner-rotator-from-ud5fvm;
+$spinnerRotatorTo: --awsui-spinner-rotator-to-ud5fvm;
+$spinnerLineLeftFrom: --awsui-spinner-line-left-from-ud5fvm;
+$spinnerLineLeftTo: --awsui-spinner-line-left-to-ud5fvm;
+$spinnerLineRightFrom: --awsui-spinner-line-right-from-ud5fvm;
+$spinnerLineRightTo: --awsui-spinner-line-right-to-ud5fvm;
     

package/lib/internal/scss/internal/styles/global-vars.scss

@@ -0,0 +1,7 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+$stickyVerticalTopOffset: --awsui-sticky-vertical-top-offset;
+$stickyVerticalBottomOffset: --awsui-sticky-vertical-bottom-offset;

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

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_1hpp3_ekxhq_99",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_ekxhq_103",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_ekxhq_103",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_ekxhq_144",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_ekxhq_144",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_ekxhq_147",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_ekxhq_147",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_ekxhq_150",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_ekxhq_150",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_ekxhq_153",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_ekxhq_153",
-  "annotation": "awsui_annotation_1hpp3_ekxhq_161",
-  "next-button": "awsui_next-button_1hpp3_ekxhq_162",
-  "previous-button": "awsui_previous-button_1hpp3_ekxhq_163",
-  "finish-button": "awsui_finish-button_1hpp3_ekxhq_164",
-  "header": "awsui_header_1hpp3_ekxhq_165",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_ekxhq_166",
-  "content": "awsui_content_1hpp3_ekxhq_167",
-  "description": "awsui_description_1hpp3_ekxhq_171",
-  "actionBar": "awsui_actionBar_1hpp3_ekxhq_176",
-  "stepCounter": "awsui_stepCounter_1hpp3_ekxhq_183",
-  "divider": "awsui_divider_1hpp3_ekxhq_187",
-  "hotspot": "awsui_hotspot_1hpp3_ekxhq_191",
-  "icon": "awsui_icon_1hpp3_ekxhq_258"
+  "arrow": "awsui_arrow_1hpp3_9xnyj_99",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_9xnyj_103",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_9xnyj_103",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_9xnyj_144",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_9xnyj_144",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_9xnyj_147",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_9xnyj_147",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_9xnyj_150",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_9xnyj_150",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_9xnyj_153",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_9xnyj_153",
+  "annotation": "awsui_annotation_1hpp3_9xnyj_161",
+  "next-button": "awsui_next-button_1hpp3_9xnyj_162",
+  "previous-button": "awsui_previous-button_1hpp3_9xnyj_163",
+  "finish-button": "awsui_finish-button_1hpp3_9xnyj_164",
+  "header": "awsui_header_1hpp3_9xnyj_165",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_9xnyj_166",
+  "content": "awsui_content_1hpp3_9xnyj_167",
+  "description": "awsui_description_1hpp3_9xnyj_171",
+  "actionBar": "awsui_actionBar_1hpp3_9xnyj_176",
+  "stepCounter": "awsui_stepCounter_1hpp3_9xnyj_183",
+  "divider": "awsui_divider_1hpp3_9xnyj_187",
+  "hotspot": "awsui_hotspot_1hpp3_9xnyj_191",
+  "icon": "awsui_icon_1hpp3_9xnyj_258"
 };
   

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

@@ -96,11 +96,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_arrow_1hpp3_ekxhq_99:not(#\9) {
+.awsui_arrow_1hpp3_9xnyj_99:not(#\9) {
   inline-size: 20px;
   block-size: 10px;
 }
-.awsui_arrow-outer_1hpp3_ekxhq_103:not(#\9), .awsui_arrow-inner_1hpp3_ekxhq_103:not(#\9) {
+.awsui_arrow-outer_1hpp3_9xnyj_103:not(#\9), .awsui_arrow-inner_1hpp3_9xnyj_103:not(#\9) {
   position: absolute;
   overflow: hidden;
   inline-size: 20px;
@@ -108,7 +108,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-block-start: 0;
   inset-inline-start: 0;
 }
-.awsui_arrow-outer_1hpp3_ekxhq_103:not(#\9)::after, .awsui_arrow-inner_1hpp3_ekxhq_103:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_9xnyj_103:not(#\9)::after, .awsui_arrow-inner_1hpp3_9xnyj_103:not(#\9)::after {
   content: "";
   box-sizing: border-box;
   display: inline-block;
@@ -124,33 +124,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transform: rotate(45deg);
   transform-origin: 0 100%;
 }
-.awsui_arrow-outer_1hpp3_ekxhq_103:not(#\9):dir(rtl)::after, .awsui_arrow-inner_1hpp3_ekxhq_103:not(#\9):dir(rtl)::after {
+.awsui_arrow-outer_1hpp3_9xnyj_103:not(#\9):dir(rtl)::after, .awsui_arrow-inner_1hpp3_9xnyj_103:not(#\9):dir(rtl)::after {
   transform: rotate(-45deg);
   transform-origin: 100% 100%;
 }
-.awsui_arrow-outer_1hpp3_ekxhq_103:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_9xnyj_103:not(#\9)::after {
   background-color: var(--color-border-status-info-q9np44, #0073bb);
 }
-.awsui_arrow-inner_1hpp3_ekxhq_103:not(#\9) {
+.awsui_arrow-inner_1hpp3_9xnyj_103:not(#\9) {
   inset-block-start: 2px;
 }
-.awsui_arrow-inner_1hpp3_ekxhq_103:not(#\9)::after {
+.awsui_arrow-inner_1hpp3_9xnyj_103:not(#\9)::after {
   border-start-start-radius: 1px;
   border-start-end-radius: 0;
   border-end-start-radius: 0;
   border-end-end-radius: 0;
   background-color: var(--color-background-status-info-pgxhez, #f1faff);
 }
-.awsui_arrow-position-right-top_1hpp3_ekxhq_144 > .awsui_arrow-outer_1hpp3_ekxhq_103:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_ekxhq_144 > .awsui_arrow-outer_1hpp3_ekxhq_103:not(#\9)::after {
+.awsui_arrow-position-right-top_1hpp3_9xnyj_144 > .awsui_arrow-outer_1hpp3_9xnyj_103:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_9xnyj_144 > .awsui_arrow-outer_1hpp3_9xnyj_103:not(#\9)::after {
   box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-left-top_1hpp3_ekxhq_147 > .awsui_arrow-outer_1hpp3_ekxhq_103:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_ekxhq_147 > .awsui_arrow-outer_1hpp3_ekxhq_103:not(#\9)::after {
+.awsui_arrow-position-left-top_1hpp3_9xnyj_147 > .awsui_arrow-outer_1hpp3_9xnyj_103:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_9xnyj_147 > .awsui_arrow-outer_1hpp3_9xnyj_103:not(#\9)::after {
   box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-top-center_1hpp3_ekxhq_150 > .awsui_arrow-outer_1hpp3_ekxhq_103:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_ekxhq_150 > .awsui_arrow-outer_1hpp3_ekxhq_103:not(#\9)::after {
+.awsui_arrow-position-top-center_1hpp3_9xnyj_150 > .awsui_arrow-outer_1hpp3_9xnyj_103:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_9xnyj_150 > .awsui_arrow-outer_1hpp3_9xnyj_103:not(#\9)::after {
   box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-bottom-center_1hpp3_ekxhq_153 > .awsui_arrow-outer_1hpp3_ekxhq_103:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_ekxhq_153 > .awsui_arrow-outer_1hpp3_ekxhq_103:not(#\9)::after {
+.awsui_arrow-position-bottom-center_1hpp3_9xnyj_153 > .awsui_arrow-outer_1hpp3_9xnyj_103:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_9xnyj_153 > .awsui_arrow-outer_1hpp3_9xnyj_103:not(#\9)::after {
   box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
 }
 
@@ -158,37 +158,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_annotation_1hpp3_ekxhq_161:not(#\9),
-.awsui_next-button_1hpp3_ekxhq_162:not(#\9),
-.awsui_previous-button_1hpp3_ekxhq_163:not(#\9),
-.awsui_finish-button_1hpp3_ekxhq_164:not(#\9),
-.awsui_header_1hpp3_ekxhq_165:not(#\9),
-.awsui_step-counter-content_1hpp3_ekxhq_166:not(#\9),
-.awsui_content_1hpp3_ekxhq_167:not(#\9) {
+.awsui_annotation_1hpp3_9xnyj_161:not(#\9),
+.awsui_next-button_1hpp3_9xnyj_162:not(#\9),
+.awsui_previous-button_1hpp3_9xnyj_163:not(#\9),
+.awsui_finish-button_1hpp3_9xnyj_164:not(#\9),
+.awsui_header_1hpp3_9xnyj_165:not(#\9),
+.awsui_step-counter-content_1hpp3_9xnyj_166:not(#\9),
+.awsui_content_1hpp3_9xnyj_167:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_description_1hpp3_ekxhq_171:not(#\9) {
+.awsui_description_1hpp3_9xnyj_171:not(#\9) {
   overflow: hidden;
   margin-block-start: var(--space-xxs-9rrxti, 4px);
 }
 
-.awsui_actionBar_1hpp3_ekxhq_176:not(#\9) {
+.awsui_actionBar_1hpp3_9xnyj_176:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
 
-.awsui_stepCounter_1hpp3_ekxhq_183:not(#\9) {
+.awsui_stepCounter_1hpp3_9xnyj_183:not(#\9) {
   margin-inline-end: 20px;
 }
 
-.awsui_divider_1hpp3_ekxhq_187:not(#\9) {
+.awsui_divider_1hpp3_9xnyj_187:not(#\9) {
   border-block-end: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);
 }
 
-.awsui_hotspot_1hpp3_ekxhq_191:not(#\9) {
+.awsui_hotspot_1hpp3_9xnyj_191:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -228,21 +228,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: 0;
   padding-inline: 0;
   cursor: pointer;
-  scroll-margin: var(--awsui-content-scroll-margin-lgosor, 40px 0 0 0);
+  scroll-margin: var(--awsui-content-scroll-margin-ud5fvm, 40px 0 0 0);
   inline-size: 16px;
   block-size: 16px;
 }
-.awsui_hotspot_1hpp3_ekxhq_191:not(#\9):focus {
+.awsui_hotspot_1hpp3_9xnyj_191:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_ekxhq_191:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_9xnyj_191:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_ekxhq_191:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_9xnyj_191:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_ekxhq_191:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_9xnyj_191:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -256,13 +256,13 @@ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_ekxhq_191:not(#\9):focu
   border-end-end-radius: var(--border-radius-control-circular-focus-ring-mxepal, 50%);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_hotspot_1hpp3_ekxhq_191 > .awsui_icon_1hpp3_ekxhq_258:not(#\9) {
+.awsui_hotspot_1hpp3_9xnyj_191 > .awsui_icon_1hpp3_9xnyj_258:not(#\9) {
   position: relative;
   stroke: var(--color-text-link-default-hop3gv, #0073bb);
 }
-.awsui_hotspot_1hpp3_ekxhq_191:not(#\9):hover > .awsui_icon_1hpp3_ekxhq_258 {
+.awsui_hotspot_1hpp3_9xnyj_191:not(#\9):hover > .awsui_icon_1hpp3_9xnyj_258 {
   stroke: var(--color-text-link-hover-8s5z9d, #0a4a74);
 }
-.awsui_hotspot_1hpp3_ekxhq_191:not(#\9):active > .awsui_icon_1hpp3_ekxhq_258 {
+.awsui_hotspot_1hpp3_9xnyj_191:not(#\9):active > .awsui_icon_1hpp3_9xnyj_258 {
   stroke: var(--color-text-link-default-hop3gv, #0073bb);
 }

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

@@ -2,29 +2,29 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "arrow": "awsui_arrow_1hpp3_ekxhq_99",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_ekxhq_103",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_ekxhq_103",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_ekxhq_144",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_ekxhq_144",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_ekxhq_147",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_ekxhq_147",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_ekxhq_150",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_ekxhq_150",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_ekxhq_153",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_ekxhq_153",
-  "annotation": "awsui_annotation_1hpp3_ekxhq_161",
-  "next-button": "awsui_next-button_1hpp3_ekxhq_162",
-  "previous-button": "awsui_previous-button_1hpp3_ekxhq_163",
-  "finish-button": "awsui_finish-button_1hpp3_ekxhq_164",
-  "header": "awsui_header_1hpp3_ekxhq_165",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_ekxhq_166",
-  "content": "awsui_content_1hpp3_ekxhq_167",
-  "description": "awsui_description_1hpp3_ekxhq_171",
-  "actionBar": "awsui_actionBar_1hpp3_ekxhq_176",
-  "stepCounter": "awsui_stepCounter_1hpp3_ekxhq_183",
-  "divider": "awsui_divider_1hpp3_ekxhq_187",
-  "hotspot": "awsui_hotspot_1hpp3_ekxhq_191",
-  "icon": "awsui_icon_1hpp3_ekxhq_258"
+  "arrow": "awsui_arrow_1hpp3_9xnyj_99",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_9xnyj_103",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_9xnyj_103",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_9xnyj_144",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_9xnyj_144",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_9xnyj_147",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_9xnyj_147",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_9xnyj_150",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_9xnyj_150",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_9xnyj_153",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_9xnyj_153",
+  "annotation": "awsui_annotation_1hpp3_9xnyj_161",
+  "next-button": "awsui_next-button_1hpp3_9xnyj_162",
+  "previous-button": "awsui_previous-button_1hpp3_9xnyj_163",
+  "finish-button": "awsui_finish-button_1hpp3_9xnyj_164",
+  "header": "awsui_header_1hpp3_9xnyj_165",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_9xnyj_166",
+  "content": "awsui_content_1hpp3_9xnyj_167",
+  "description": "awsui_description_1hpp3_9xnyj_171",
+  "actionBar": "awsui_actionBar_1hpp3_9xnyj_176",
+  "stepCounter": "awsui_stepCounter_1hpp3_9xnyj_183",
+  "divider": "awsui_divider_1hpp3_9xnyj_187",
+  "hotspot": "awsui_hotspot_1hpp3_9xnyj_191",
+  "icon": "awsui_icon_1hpp3_9xnyj_258"
 };
   

package/lib/internal/template/app-layout/classic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"classic.d.ts","sourceRoot":"","sources":["../../../src/app-layout/classic.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAI7F,OAAO,EAAE,cAAc,EAA8B,MAAM,cAAc,CAAC;AA+B1E,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;4CA0jBrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"classic.d.ts","sourceRoot":"","sources":["../../../src/app-layout/classic.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAI7F,OAAO,EAAE,cAAc,EAA8B,MAAM,cAAc,CAAC;AA+B1E,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;4CAqjBrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/internal/template/app-layout/classic.js

@@ -12,7 +12,6 @@ import { useFocusControl } from './utils/use-focus-control';
 import styles from './styles.css.js';
 import testutilStyles from './test-classes/styles.css.js';
 import { findUpUntil } from '../internal/utils/dom';
-import { AppLayoutContext } from '../internal/context/app-layout-context';
 import { CONSTRAINED_MAIN_PANEL_MIN_HEIGHT, CONSTRAINED_PAGE_HEIGHT, getSplitPanelDefaultSize, MAIN_PANEL_MIN_HEIGHT, } from '../split-panel/utils/size-utils';
 import ContentWrapper from './content-wrapper';
 import { Drawer, DrawerTriggersBar } from './drawer';
@@ -21,6 +20,7 @@ import { SPLIT_PANEL_MIN_WIDTH, SideSplitPanelDrawer, SplitPanelProvider, } from
 import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
 import { useSplitPanelFocusControl } from './utils/use-split-panel-focus-control';
 import { TOOLS_DRAWER_ID, useDrawers } from './utils/use-drawers';
+import { getStickyOffsetVars } from './utils/sticky-offsets';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 import { togglesConfig } from './toggles';
 const ClassicAppLayout = React.forwardRef((_a, ref) => {
@@ -85,7 +85,7 @@ const ClassicAppLayout = React.forwardRef((_a, ref) => {
     const [notificationsHeight, notificationsRef] = useContainerQuery(rect => rect.contentBoxHeight);
     const anyPanelOpen = navigationVisible || toolsVisible || !!activeDrawer;
     const hasRenderedNotifications = notificationsHeight ? notificationsHeight > 0 : false;
-    const stickyNotificationsHeight = stickyNotifications ? notificationsHeight : null;
+    const stickyNotificationsHeight = stickyNotifications ? notificationsHeight !== null && notificationsHeight !== void 0 ? notificationsHeight : 0 : 0;
     const [splitPanelPreferences, setSplitPanelPreferences] = useControllable(controlledSplitPanelPreferences, onSplitPanelPreferencesChange, undefined, {
         componentName: 'AppLayout',
         controlledProp: 'splitPanelPreferences',
@@ -174,7 +174,7 @@ const ClassicAppLayout = React.forwardRef((_a, ref) => {
     const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);
     const [splitPanelReportedHeaderHeight, setSplitPanelReportedHeaderHeight] = useState(0);
     const splitPanelContextProps = {
-        topOffset: placement.insetBlockStart + (finalSplitPanePosition === 'bottom' ? stickyNotificationsHeight || 0 : 0),
+        topOffset: placement.insetBlockStart + (finalSplitPanePosition === 'bottom' ? stickyNotificationsHeight : 0),
         bottomOffset: placement.insetBlockEnd,
         leftOffset: placement.insetInlineStart +
             (isMobile ? 0 : !navigationHide && navigationOpen ? navigationWidth : navigationClosedWidth),
@@ -257,25 +257,14 @@ const ClassicAppLayout = React.forwardRef((_a, ref) => {
                     ((!isMobile && breadcrumbs) || contentHeader) && (React.createElement(ContentWrapper, Object.assign({}, contentWrapperProps),
                         !isMobile && breadcrumbs && (React.createElement("div", { className: clsx(testutilStyles.breadcrumbs, styles['breadcrumbs-desktop']) }, breadcrumbs)),
                         contentHeader && (React.createElement("div", { className: clsx(styles['content-header-wrapper'], !hasRenderedNotifications && (isMobile || !breadcrumbs) && styles['content-extra-top-padding'], !hasRenderedNotifications && !breadcrumbs && styles['content-header-wrapper-first-child'], !disableContentHeaderOverlap && styles['content-header-wrapper-overlapped']) }, contentHeader)))),
-                    React.createElement(ContentWrapper, Object.assign({}, contentWrapperProps, { ref: mainContentRef, disablePaddings: disableContentPaddings, 
-                        // eslint-disable-next-line react/forbid-component-props
-                        className: clsx(!disableContentPaddings && styles['content-wrapper'], !disableContentPaddings &&
+                    React.createElement(ContentWrapper, Object.assign({}, contentWrapperProps, { ref: mainContentRef, disablePaddings: disableContentPaddings, className: clsx(!disableContentPaddings && styles['content-wrapper'], !disableContentPaddings &&
                             (isMobile || !breadcrumbs) &&
                             !contentHeader &&
                             styles['content-extra-top-padding'], testutilStyles.content, !disableContentHeaderOverlap && contentHeader && styles['content-overlapped'], !hasRenderedNotifications &&
                             !breadcrumbs &&
                             !isMobile &&
                             !contentHeader &&
-                            styles['content-wrapper-first-child']) }),
-                        React.createElement(AppLayoutContext.Provider, { value: {
-                                stickyOffsetTop: 
-                                // We don't support the table header being sticky in case the deprecated disableBodyScroll is enabled,
-                                // therefore we ensure the table header scrolls out of view by offseting a large enough value (9999px)
-                                (disableBodyScroll ? (isMobile ? -9999 : 0) : placement.insetBlockStart) +
-                                    (isMobile ? 0 : stickyNotificationsHeight !== null ? stickyNotificationsHeight : 0),
-                                stickyOffsetBottom: placement.insetBlockEnd + (splitPanelBottomOffset || 0),
-                                mobileBarHeight: mobileBarHeight !== null && mobileBarHeight !== void 0 ? mobileBarHeight : 0,
-                            } }, content))),
+                            styles['content-wrapper-first-child']), style: getStickyOffsetVars(placement.insetBlockStart, placement.insetBlockEnd + (splitPanelBottomOffset || 0), `${stickyNotificationsHeight}px`, mobileBarHeight && !disableBodyScroll ? `${mobileBarHeight}px` : '0px', !!disableBodyScroll, isMobile) }), content)),
                 finalSplitPanePosition === 'bottom' && splitPanelWrapped),
             finalSplitPanePosition === 'side' && splitPanelWrapped,
             hasDrawers ? (React.createElement(ResizableDrawer, { contentClassName: clsx(activeDrawerId && testutilStyles['active-drawer'], activeDrawerId === TOOLS_DRAWER_ID && testutilStyles.tools), toggleClassName: testutilStyles['tools-toggle'], closeClassName: clsx(testutilStyles['active-drawer-close-button'], activeDrawerId === TOOLS_DRAWER_ID && testutilStyles['tools-close']), ariaLabels: {