@cloudscape-design/components-themeable 3.0.306 → 3.0.308

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "8172184cd173668915496435ec2a2a60b60531d2"
+  "commit": "e43ea9a2e752358541497697df1da0748a06285a"
 }

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

@@ -9,45 +9,29 @@
 div.background {
   display: contents;
 
-  > .notifications-appbar-header {
+  > .scrolling-background {
     background-color: awsui.$color-background-layout-main;
-    grid-column: 1 / span 5;
-    grid-row: 1 / span 3;
     color: awsui.$color-text-body-default;
-
-    /*
-    The cards and table content types have a sticky dark header that is 
-    offset beneath the sticky notifications if they exist. If the background 
-    is not sticky then it will scroll out of the viewport leaving a white space
-    behind the notifications above the content dark header.
-    */
-    @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
-      &.has-sticky-background.has-notifications-content.sticky-notifications {
-        position: sticky;
-        top: var(#{custom-props.$offsetTop});
-        z-index: 799;
-      }
-    }
+    grid-column: 1 / span 5;
+    grid-row: 1 / 10;
   }
 
-  > .overlap {
+  > .sticky-background {
     background-color: awsui.$color-background-layout-main;
     grid-column: 1 / span 5;
-    grid-row: 4;
-    color: awsui.$color-text-body-default;
+    grid-row: 1 / 10;
+    position: sticky;
+    top: var(#{custom-props.$headerHeight});
+    z-index: 799;
+
+    &:not(.has-sticky-notifications) {
+      height: calc(#{awsui.$space-scaled-s} + var(#{custom-props.$overlapHeight}));
+    }
 
-    /*
-    The cards and table content types can have sticky header content that 
-    will retain position on viewport scroll. The overlap background needs to 
-    be sticky in desktop viewports to prevent light background gutters with 
-    the high contrast header background only in the content area.
-    */
-    @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
-      &.has-sticky-background {
-        position: sticky;
-        top: var(#{custom-props.$offsetTopWithNotifications});
-        z-index: 799;
-      }
+    &.has-sticky-notifications {
+      height: calc(
+        var(#{custom-props.$notificationsGap}) + var(#{custom-props.$notificationsHeight}) + #{awsui.$space-s} + var(#{custom-props.$overlapHeight})
+      );
     }
   }
 }

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

@@ -0,0 +1,23 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../internal/styles/' as styles;
+@use '../../internal/styles/tokens' as awsui;
+@use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
+
+.breadcrumbs {
+  background-color: awsui.$color-background-layout-main;
+  grid-area: breadcrumbs;
+
+  /*
+  If a child component tells the AppLayout to have a sticky 
+  background (typically because of a stickyHeader with a 
+  full-page variant) the z-index of the breadcrumbs needs to 
+  be lifted so it doesn't render behind the background element.
+  */
+  &.has-sticky-background {
+    z-index: 799;
+  }
+}

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

@@ -11,7 +11,7 @@
   background-color: transparent;
   display: flex;
   grid-column: 5;
-  grid-row: 1 / span 5;
+  grid-row: 1 / span 10;
   height: var(#{custom-props.$contentHeight});
   pointer-events: none;
   position: sticky;

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

@@ -3,53 +3,6 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../../internal/styles/' as styles;
-@use '../../internal/styles/tokens' as awsui;
-
 header.content {
-  grid-column: 3;
-  grid-row: 3;
-  padding-bottom: awsui.$space-content-header-padding-bottom;
-
-  @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
-    /*
-    If Notifications exist and Breadcrumbs do not then Notifications 
-    is the previous adjacent sibling to the Header. Add minimal top padding 
-    in addition to the bottom padding on the Notifications.
-    */
-    &.has-notifications-content:not(.has-breadcrumbs) {
-      padding-top: awsui.$space-scaled-xs;
-    }
-
-    /*
-    If Breadcrumbs exists it is necessarily the previous adjacent 
-    sibling and the Header should have no padding. Add minimal top 
-    padding for vertical space between the Breadcrumbs and Header.
-    */
-    &.has-breadcrumbs {
-      padding-top: awsui.$space-xxs;
-    }
-
-    /*
-    If Notifications and Breadcrumbs do not exist then the Header 
-    is the first rendered center content. The top padding should 
-    vertically align the Header with the Navigation and Tools 
-    circular buttons.
-    */
-    &:not(.has-notifications-content):not(.has-breadcrumbs) {
-      padding-top: awsui.$space-scaled-xs;
-    }
-  }
-
-  @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
-    padding: awsui.$space-m 0 awsui.$space-content-header-padding-bottom;
-
-    /*
-    Breadcrumbs has moved to first position and sticky so Notifications 
-    are now the previous adjacent sibling if they exist.
-    */
-    &.has-notifications-content {
-      padding-top: awsui.$space-scaled-xs;
-    }
-  }
+  grid-area: header;
 }

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

@@ -3,54 +3,86 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../../internal/styles' as styles;
-@use '../../internal/styles/tokens' as awsui;
 @use '../constants' as constants;
 @use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use '../../internal/styles' as styles;
+@use '../../internal/styles/tokens' as awsui;
 
 /*
-  The first and last column definitions have two responsibilities.
-  If Navigation and/or Tools exist then that will determine the width of
-  the first and last columns, respectively, and the content in these drawers
-  will create horizontal space from the center column content. However, if the
-  navigationHide and/or toolsHide properties have been set then the first
-  and last column width will default to the minimum content gap properties to
-  create the necessary visual space around the main content.
-
-  The minimum content width property is set to zero and applied under all
-  circumstances regardless of whether the minContentWidth property is
-  explicitly set in script.
-  */
+The first and last column definitions have two responsibilities.
+If Navigation and/or Tools exist then that will determine the width of
+the first and last columns, respectively, and the content in these drawers
+will create horizontal space from the center column content. However, if the
+navigationHide and/or toolsHide properties have been set then the first
+and last column width will default to the minimum content gap properties to
+create the necessary visual space around the main content.
+
+The minimum content width property is set to zero and applied under all
+circumstances regardless of whether the minContentWidth property is
+explicitly set in script.
+*/
 .layout {
+  #{custom-props.$breadcrumbsGap}: 0px;
   #{custom-props.$contentGapLeft}: 0px;
   #{custom-props.$contentGapRight}: 0px;
   #{custom-props.$contentHeight}: calc(100vh - var(#{custom-props.$headerHeight}) - var(#{custom-props.$footerHeight}));
   #{custom-props.$defaultMaxContentWidth}: 1280px;
   #{custom-props.$defaultMinContentWidth}: 0px;
   #{custom-props.$footerHeight}: 0px;
+  #{custom-props.$headerGap}: 0px;
   #{custom-props.$headerHeight}: 0px;
   #{custom-props.$layoutWidth}: 0px;
+  #{custom-props.$mainGap}: 0px;
   #{custom-props.$mainOffsetLeft}: 0px;
+  #{custom-props.$mainTemplateRows}: 1fr;
   #{custom-props.$maxContentWidth}: 0px;
   #{custom-props.$minContentWidth}: 280px;
   #{custom-props.$mobileBarHeight}: calc(2 * #{awsui.$space-m} + #{awsui.$space-scaled-xs});
+  #{custom-props.$notificationsGap}: 0px;
   #{custom-props.$notificationsHeight}: 0px;
-  #{custom-props.$offsetTop}: 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;
   display: grid;
-  grid-template-rows: repeat(3, auto) var(#{custom-props.$overlapHeight}) 1fr;
+  grid-template-areas:
+    '. . mobileToolbar . .'
+    '. . notificationsGap . .'
+    '. . notifications . .'
+    '. . breadcrumbsGap . .'
+    '. . breadcrumbs . .'
+    '. . headerGap . .'
+    '. . header . .'
+    '. . mainGap . .'
+    '. . main . .'
+    '. . main . .';
   grid-template-columns:
     min-content
     minmax(var(#{custom-props.$contentGapLeft}), 1fr)
     minmax(var(#{custom-props.$defaultMinContentWidth}), var(#{custom-props.$defaultMaxContentWidth}))
     minmax(var(#{custom-props.$contentGapRight}), 1fr)
     min-content;
+  grid-template-rows:
+    auto // mobileToolbar template area
+    var(#{custom-props.$notificationsGap})
+    auto // notifications template area
+    var(#{custom-props.$breadcrumbsGap})
+    auto // breadcrumbs template area
+    var(#{custom-props.$headerGap})
+    auto // contentHeader template area
+    var(#{custom-props.$mainGap})
+    var(#{custom-props.$overlapHeight}) // main template area with overlap
+    var(#{custom-props.$mainTemplateRows}); // main template area
+  min-height: var(#{custom-props.$contentHeight});
   position: relative;
-  color: awsui.$color-text-body-default;
 
-  // Add unified max-width for AppLayout content based on breakpoints.
+  /*
+  Add unified max-width for AppLayout content based on breakpoints. Only use the max content 
+  width custom property for the middle column definition if the maxContentWidth property 
+  has been explicitly set to a non-zero value and subsequently set the has-max-content-width 
+  data attribute to true.
+  */
   &:not(.has-max-content-width) {
     @each $breakpoint, $width in constants.$adaptive-content-widths {
       @include styles.media-breakpoint-up($breakpoint) {
@@ -75,6 +107,11 @@
     #{custom-props.$defaultMaxContentWidth}: var(#{custom-props.$maxContentWidth});
   }
 
+  // Override the dark header overlap height property if disableContentHeaderOverlap is true.
+  &.is-overlap-disabled {
+    #{custom-props.$overlapHeight}: 0;
+  }
+
   /*
   Warning! This is a hack! We are implementing a short term fix to prevent the
   tools drawer from potentially getting pushed off screen. Currently there is no
@@ -92,75 +129,35 @@
   }
 
   /*
-  Override the dark header overlap height property if isOverlapDisabled is true.
-  The is computed state from props that can be found in the AppLayout context.
-  */
-  &.is-overlap-disabled {
-    #{custom-props.$overlapHeight}: 0;
-  }
-
-  /*
-  If disableBodyScroll is false (this is the overwhelming majority
-  of use cases and the default scenario) then the scrollable element
-  will be the document body which is a parent of the AppLayout component.
-  The Layout should have a minimum but not fixed content height set to the
-  viewport height less the header and footer height set by the resize
-  observers in the component. 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
+  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(.disable-body-scroll) {
-    #{custom-props.$offsetTop}: var(#{custom-props.$headerHeight});
-    min-height: var(#{custom-props.$contentHeight});
+  &:not(.has-sticky-notifications):not(.has-sticky-background) {
+    #{custom-props.$offsetTopWithNotifications}: var(#{custom-props.$headerHeight});
   }
 
-  &:not(.disable-body-scroll):not(.has-sticky-notifications) {
-    #{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});
   }
 
-  // #{awsui.$space-xs} token needs to align with the top margin in the notifications CSS
-  &:not(.disable-body-scroll).has-sticky-notifications {
+  /* stylelint-disable scss/operator-no-newline-after */
+  &.has-sticky-notifications:not(.has-sticky-background) {
     #{custom-props.$offsetTopWithNotifications}: calc(
-      var(#{custom-props.$headerHeight}) + var(#{custom-props.$notificationsHeight}) + #{awsui.$space-xs} + #{awsui.$space-xxxs}
+      var(#{custom-props.$offsetTop}) + var(#{custom-props.$notificationsGap}) +
+        var(#{custom-props.$notificationsHeight}) + #{awsui.$space-xxxs}
     );
   }
 
-  /*
-  If disableBodyScroll is true (very uncommon use case) then the
-  AppLayout component and not the document body will be the scrollable
-  element. This requires a fixed height instead of a minimum height
-  with a vertical scroll policy. The offset top value for components
-  with position: sticky (AppBar, Navigation, Notifications, Tools) will
-  be set zero since the AppLayout is nearest scrollable parent and any
-  existing header does not matter. The offset top value for AppLayout
-  contentMain children with position: sticky will be the value of the
-  notifications height in addition to the notifications top margin
-  and some additional vertical space for aesthetics.
-  */
-  &.disable-body-scroll {
-    #{custom-props.$offsetTop}: 0px;
-    grid-template-rows: repeat(3, auto) var(#{custom-props.$overlapHeight}) 1fr auto;
-    height: var(#{custom-props.$contentHeight});
-    overflow-y: scroll;
-  }
-
-  &.disable-body-scroll.has-split-panel.split-panel-position-bottom {
-    grid-template-rows: repeat(3, auto) var(#{custom-props.$overlapHeight}) repeat(2, auto);
-  }
-
-  &.disable-body-scroll:not(.has-sticky-notifications) {
-    #{custom-props.$offsetTopWithNotifications}: 0px;
-  }
-
-  // #{awsui.$space-xs} token needs to align with the top margin in the notifications CSS
-  &.disable-body-scroll.has-sticky-notifications {
+  &.has-sticky-notifications.has-sticky-background {
     #{custom-props.$offsetTopWithNotifications}: calc(
-      var(#{custom-props.$notificationsHeight}) + #{awsui.$space-xs} + #{awsui.$space-xxs}
+      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
@@ -168,9 +165,9 @@
   or toolsHide property is set. This ensures adequate horizontal space
   for the center column from the edges of the viewport when there is
   not left or right content.
-
-  Warning! If these design tokens change it will adversely impact the
-  calculation used to determine the Split Panel maximum width in the
+  
+  Warning! If these design tokens change it will adversely impact the 
+  calculation used to determine the Split Panel maximum width in the 
   handleSplitPanelMaxWidth function in the context.
   */
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
@@ -185,7 +182,7 @@
 
   /*
   In mobile viewports the Navigation and Tools drawers are hidden
-  and triggered by the AppBar which then take up the entire viewport.
+  and triggered by the MobileToolbar which then take up the entire viewport.
   The center column needs permanent space from the horizontal viewport
   edges regardless of whether or not there is a Navigation or Tools.
   */
@@ -193,6 +190,112 @@
     #{custom-props.$contentGapLeft}: #{awsui.$space-l};
     #{custom-props.$contentGapRight}: #{awsui.$space-l};
   }
+
+  // Vertically align the notifications with the trigger buttons
+  &.content-first-child-notifications {
+    #{custom-props.$notificationsGap}: #{awsui.$space-xs};
+  }
+
+  // Vertically align the breadcrumbs with the trigger buttons
+  &.has-breadcrumbs {
+    #{custom-props.$breadcrumbsGap}: #{awsui.$space-scaled-m};
+  }
+
+  // Vertically align the content header with the trigger buttons
+  &.content-first-child-header,
+  &.content-first-child-notifications:not(.has-breadcrumbs).has-header {
+    #{custom-props.$headerGap}: #{awsui.$space-scaled-xs};
+  }
+
+  // The Header gap is slightly smaller when it comes after the Breadcrumbs
+  &.has-breadcrumbs.has-header {
+    #{custom-props.$headerGap}: #{awsui.$space-scaled-xxs};
+  }
+
+  // Set the Main gap when it follows the Notifications
+  &.content-first-child-notifications:not(.has-breadcrumbs):not(.has-header) {
+    #{custom-props.$mainGap}: #{awsui.$space-xs};
+  }
+
+  // Set the Main gap when it follows the Breadcrumbs without an overlap
+  &.has-breadcrumbs:not(.has-header).is-overlap-disabled {
+    #{custom-props.$mainGap}: #{awsui.$space-scaled-m};
+  }
+
+  // Set the Main gap when it follows the Breadcrumbs with an overlap
+  &.has-breadcrumbs:not(.has-header):not(.is-overlap-disabled) {
+    #{custom-props.$mainGap}: #{awsui.$space-scaled-xxs};
+  }
+
+  // Set the Main gap when it follows the Header
+  &.has-header {
+    #{custom-props.$mainGap}: #{awsui.$space-scaled-xl};
+  }
+
+  // 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};
+  }
+
+  /*
+  Override the desktop gap values set above for the Notifications, Header, and Main
+  components for mobile viewports.
+  */
+  @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+    &.content-first-child-notifications {
+      #{custom-props.$notificationsGap}: #{awsui.$space-scaled-s};
+    }
+
+    &.content-first-child-header {
+      #{custom-props.$headerGap}: #{awsui.$space-scaled-s};
+    }
+
+    &.content-first-child-notifications:not(.has-breadcrumbs).has-header {
+      #{custom-props.$headerGap}: #{awsui.$space-scaled-s};
+    }
+
+    &.content-first-child-notifications:not(.has-breadcrumbs):not(.has-header),
+    &.content-first-child-main:not(.is-overlap-disabled) {
+      #{custom-props.$mainGap}: #{awsui.$space-scaled-s};
+    }
+
+    &.content-first-child-main.is-overlap-disabled:not(.disable-content-paddings) {
+      #{custom-props.$mainGap}: #{awsui.$space-scaled-m};
+    }
+  }
+}
+
+/*
+If disableBodyScroll is true (very uncommon use case) then the AppLayout component 
+and not the document body will be the scrollable element. This requires a fixed height 
+instead of a minimum height with a vertical scroll policy. The offset top value for 
+components with position: sticky (MobileToolbar, Navigation, Notifications, Tools) will be 
+set zero since the AppLayout is nearest scrollable parent and any existing header does 
+not matter. The offset top value for AppLayout contentMain children with 
+position: sticky will be the value of the notifications height in addition to the 
+notifications top margin and some additional vertical space for aesthetics.
+*/
+.layout.disable-body-scroll {
+  #{custom-props.$mainTemplateRows}: 1fr auto;
+  #{custom-props.$offsetTop}: 0px;
+  height: var(#{custom-props.$contentHeight});
+  overflow-y: scroll;
+
+  &.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}
+    );
+  }
 }
 
 /*
@@ -202,3 +305,11 @@ when the navigation or tools drawers are open in responsive viewports.
 .block-body-scroll {
   overflow: hidden;
 }
+
+// Prevent content that is visually hidden behind drawers and content area in mobile view from receiving focus
+/* stylelint-disable selector-max-universal, selector-combinator-disallowed-list */
+.unfocusable,
+.unfocusable * {
+  visibility: hidden !important;
+}
+/* stylelint-enable selector-max-universal, selector-combinator-disallowed-list */

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

@@ -8,8 +8,7 @@
 @use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 .container {
-  grid-column: 3;
-  grid-row: 4 / span 2;
+  grid-area: main;
   padding-bottom: awsui.$space-layout-content-bottom;
 
   /*
@@ -44,94 +43,4 @@
       }
     }
   }
-
-  /*
-  If disableContentPaddings is not enabled (the majority of use cases) then
-  the following code block will compute the padding behavior for the Main
-  under various circumstances.
-  */
-  &:not(.disable-content-paddings) {
-    @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
-      /*
-      Notifications is the previous adjacent sibling to the Main in
-      desktop viewports if there are no Breadcrumbs or Header. Use additional
-      to padding on the Main.
-      */
-      &.content-type-default.has-notifications-content:not(.has-breadcrumbs):not(.has-header):not(
-          .has-dynamic-overlap-height
-        ),
-      &.content-type-form.has-notifications-content:not(.has-breadcrumbs):not(.has-header):not(
-          .has-dynamic-overlap-height
-        ) {
-        padding-top: awsui.$space-scaled-m;
-      }
-
-      /*
-      Main is the only rendered center content if there are no Notifications,
-      Breadcrumbs, or Header. Use minimal top padding.
-      */
-      &.content-type-default:not(.has-notifications-content):not(.has-breadcrumbs):not(.has-header):not(
-          .has-dynamic-overlap-height
-        ),
-      &.content-type-form:not(.has-notifications-content):not(.has-breadcrumbs):not(.has-header):not(
-          .has-dynamic-overlap-height
-        ) {
-        padding-top: awsui.$space-scaled-xs;
-      }
-
-      /*
-      If the Header exists then it is necessarily the previous adjacent
-      sibling to the Main which requires no top padding.
-      */
-      &.has-header,
-      &.has-dynamic-overlap-height {
-        padding-top: 0;
-      }
-    }
-
-    @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
-      /*
-      If the Notifications exist but the Header does not then the
-      Notifications is the previous adjacent sibling to the Main
-      requiring additional top padding. This is because the Breadcrumbs
-      are now rendered first and positioned sticky.
-      */
-      &.content-type-default.has-notifications-content:not(.has-header):not(.has-dynamic-overlap-height),
-      &.content-type-form.has-notifications-content:not(.has-header):not(.has-dynamic-overlap-height) {
-        padding-top: awsui.$space-scaled-m;
-      }
-
-      /*
-      Main is the only rendered center content if there are no Notifications or Header.
-      */
-      &.content-type-default:not(.has-notifications-content):not(.has-header):not(.has-dynamic-overlap-height),
-      &.content-type-form:not(.has-notifications-content):not(.has-header):not(.has-dynamic-overlap-height) {
-        padding-top: awsui.$space-scaled-m;
-      }
-
-      /*
-      If the Header exists then it is necessarily the previous adjacent
-      sibling to the Main which requires no top padding.
-      */
-      &.has-header,
-      &.has-dynamic-overlap-height {
-        padding-top: 0;
-      }
-    }
-  }
-
-  // Main should never have top padding for dark header content types
-  &.content-type-cards,
-  &.content-type-table,
-  &.content-type-wizard {
-    padding-top: 0;
-  }
-}
-
-// Prevent content that is visually hidden behind drawers and content area in mobile view from receiving focus
-/* stylelint-disable selector-max-universal, selector-combinator-disallowed-list */
-.unfocusable,
-.unfocusable * {
-  visibility: hidden !important;
 }
-/* stylelint-enable selector-max-universal, selector-combinator-disallowed-list */

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

@@ -0,0 +1,40 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../internal/styles/' as styles;
+@use '../../internal/styles/tokens' as awsui;
+@use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
+
+section.mobile-toolbar {
+  align-items: center;
+  background-color: awsui.$color-background-home-header;
+  border-bottom: 1px solid awsui.$color-border-divider-default;
+  box-shadow: awsui.$shadow-panel-toggle;
+  box-sizing: border-box;
+  height: var(#{custom-props.$mobileBarHeight});
+  display: grid;
+  grid-area: mobileToolbar;
+  grid-column: 1 / span 5;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  padding: 0 awsui.$space-m;
+  position: sticky;
+  top: var(#{custom-props.$offsetTop});
+  z-index: 1000;
+
+  > .mobile-toolbar-nav {
+    grid-column: 1;
+    margin-right: awsui.$space-m;
+  }
+
+  > .mobile-toolbar-breadcrumbs {
+    grid-column: 2;
+    background-color: awsui.$color-background-layout-main;
+  }
+
+  > .mobile-toolbar-tools {
+    grid-column: 3;
+    margin-left: awsui.$space-m;
+  }
+}

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

@@ -11,7 +11,7 @@
   #{custom-props.$navigationWidth}: 280px;
   display: flex;
   grid-column: 1;
-  grid-row: 1 / span 5;
+  grid-row: 1 / span 10;
   height: var(#{custom-props.$contentHeight});
   position: sticky;
   top: var(#{custom-props.$offsetTop});
@@ -70,7 +70,7 @@ nav.show-navigation {
   }
 
   /*
-  Apply the animation only in desktop viewports because the AppBar will
+  Apply the animation only in desktop viewports because the MobileToolbar will
   take control in responsive viewports.
   */
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {