@cloudscape-design/components-themeable 3.0.622 → 3.0.624

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "35995e1f0d8f24c40490a844c1824f1b7d32bd94"
+  "commit": "5250e7bcf024c19ad3baa90b91bbe1275295c4bd"
 }

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

@@ -26,8 +26,6 @@ explicitly set in script.
   #{custom-props.$contentGapLeft}: 0px;
   #{custom-props.$contentGapRight}: 0px;
   #{custom-props.$contentHeight}: calc(100vh - var(#{custom-props.$headerHeight}) - var(#{custom-props.$footerHeight}));
-  #{custom-props.$containerFirstGap}: 0px;
-  #{custom-props.$containerFirstOverlapExtension}: 0px;
   #{custom-props.$defaultMaxContentWidth}: 1280px;
   #{custom-props.$defaultMinContentWidth}: 0px;
   #{custom-props.$footerHeight}: 0px;
@@ -227,11 +225,6 @@ explicitly set in script.
     #{custom-props.$mainGap}: #{awsui.$space-xs};
   }
 
-  // Set gap to be used by content that has a container on top (e.g. content-layout without header) when breadcrumbs are present
-  &.has-breadcrumbs:not(.has-header) {
-    #{custom-props.$containerFirstGap}: calc(var(#{custom-props.$breadcrumbsGap}) - var(#{custom-props.$mainGap}));
-  }
-
   // 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};
@@ -253,14 +246,6 @@ explicitly set in script.
     #{custom-props.$mainGap}: #{awsui.$space-scaled-s};
   }
 
-  // Set an extension of the overlap and an additional gap on top to be used by content-layout without header
-  @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
-    &.content-first-child-main:not(.has-header) {
-      #{custom-props.$containerFirstOverlapExtension}: #{awsui.$space-m};
-      #{custom-props.$containerFirstGap}: #{awsui.$space-xxs};
-    }
-  }
-
   /*
   Override the desktop gap values set above for the Notifications, Header, and Main
   components for mobile viewports.

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

@@ -27,7 +27,7 @@ nodes will directly touch with no gap between them.
 .layout.is-visual-refresh {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: auto #{awsui.$space-dark-header-overlap-distance} 1fr;
+  grid-template-rows: auto awsui.$space-dark-header-overlap-distance 1fr;
   min-block-size: 100%;
 
   > .background {
@@ -53,14 +53,9 @@ nodes will directly touch with no gap between them.
   }
 
   &:not(.has-header) {
-    grid-template-rows:
-      auto calc(
-        #{awsui.$space-dark-header-overlap-distance} + var(#{custom-props.$containerFirstOverlapExtension}, 0px) + var(#{custom-props.$containerFirstGap}, 0px)
-      )
-      1fr;
-
+    grid-template-rows: auto calc(awsui.$space-dark-header-overlap-distance + awsui.$space-xs + awsui.$space-scaled-xxs) 1fr;
     > .content {
-      padding-block-start: var(#{custom-props.$containerFirstGap}, 0px);
+      padding-block-start: calc(awsui.$space-xs + awsui.$space-scaled-xxs);
     }
   }
 

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

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

package/lib/internal/scss/wizard/styles.scss

@@ -36,7 +36,7 @@
 .navigation.refresh {
   grid-column: 1;
   grid-row: 1 / span 2;
-  padding-block-start: var(#{custom-props.$containerFirstGap}, 0px);
+  padding-block-start: calc(awsui.$space-xs + awsui.$space-scaled-xxs);
 
   > ul.refresh {
     background: awsui.$color-background-container-content;
@@ -241,13 +241,13 @@
   }
 
   > .form-header > .form-header-content {
-    padding-block-start: calc(var(#{custom-props.$containerFirstGap}, 0px) + awsui.$space-m - awsui.$space-xxxs);
+    padding-block-start: calc(awsui.$space-xl + awsui.$space-scaled-xxxs);
     padding-block-end: awsui.$space-scaled-s;
   }
 
   &:not(.remove-high-contrast-header) {
     > .form-header > .form-header-content {
-      padding-block-start: calc(var(#{custom-props.$containerFirstGap}, 0px) + awsui.$space-s);
+      padding-block-start: calc(awsui.$space-l + awsui.$space-scaled-xxs);
       padding-block-end: awsui.$space-scaled-m;
     }
   }

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

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_1hpp3_1e67h_99",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_1e67h_103",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_1e67h_103",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1e67h_140",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1e67h_140",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1e67h_143",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1e67h_143",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1e67h_146",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1e67h_146",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1e67h_149",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1e67h_149",
-  "annotation": "awsui_annotation_1hpp3_1e67h_157",
-  "next-button": "awsui_next-button_1hpp3_1e67h_158",
-  "previous-button": "awsui_previous-button_1hpp3_1e67h_159",
-  "finish-button": "awsui_finish-button_1hpp3_1e67h_160",
-  "header": "awsui_header_1hpp3_1e67h_161",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_1e67h_162",
-  "content": "awsui_content_1hpp3_1e67h_163",
-  "description": "awsui_description_1hpp3_1e67h_167",
-  "actionBar": "awsui_actionBar_1hpp3_1e67h_172",
-  "stepCounter": "awsui_stepCounter_1hpp3_1e67h_179",
-  "divider": "awsui_divider_1hpp3_1e67h_183",
-  "hotspot": "awsui_hotspot_1hpp3_1e67h_187",
-  "icon": "awsui_icon_1hpp3_1e67h_254"
+  "arrow": "awsui_arrow_1hpp3_1yqjl_99",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_1yqjl_103",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_1yqjl_103",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1yqjl_140",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1yqjl_140",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1yqjl_143",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1yqjl_143",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1yqjl_146",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1yqjl_146",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1yqjl_149",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1yqjl_149",
+  "annotation": "awsui_annotation_1hpp3_1yqjl_157",
+  "next-button": "awsui_next-button_1hpp3_1yqjl_158",
+  "previous-button": "awsui_previous-button_1hpp3_1yqjl_159",
+  "finish-button": "awsui_finish-button_1hpp3_1yqjl_160",
+  "header": "awsui_header_1hpp3_1yqjl_161",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_1yqjl_162",
+  "content": "awsui_content_1hpp3_1yqjl_163",
+  "description": "awsui_description_1hpp3_1yqjl_167",
+  "actionBar": "awsui_actionBar_1hpp3_1yqjl_172",
+  "stepCounter": "awsui_stepCounter_1hpp3_1yqjl_179",
+  "divider": "awsui_divider_1hpp3_1yqjl_183",
+  "hotspot": "awsui_hotspot_1hpp3_1yqjl_187",
+  "icon": "awsui_icon_1hpp3_1yqjl_254"
 };
   

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_1e67h_99:not(#\9) {
+.awsui_arrow_1hpp3_1yqjl_99:not(#\9) {
   inline-size: 20px;
   block-size: 10px;
 }
-.awsui_arrow-outer_1hpp3_1e67h_103:not(#\9), .awsui_arrow-inner_1hpp3_1e67h_103:not(#\9) {
+.awsui_arrow-outer_1hpp3_1yqjl_103:not(#\9), .awsui_arrow-inner_1hpp3_1yqjl_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_1e67h_103:not(#\9)::after, .awsui_arrow-inner_1hpp3_1e67h_103:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_1yqjl_103:not(#\9)::after, .awsui_arrow-inner_1hpp3_1yqjl_103:not(#\9)::after {
   content: "";
   box-sizing: border-box;
   display: inline-block;
@@ -124,29 +124,29 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transform: rotate(45deg);
   transform-origin: 0 100%;
 }
-.awsui_arrow-outer_1hpp3_1e67h_103:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_1yqjl_103:not(#\9)::after {
   background-color: var(--color-border-status-info-q9np44, #0073bb);
 }
-.awsui_arrow-inner_1hpp3_1e67h_103:not(#\9) {
+.awsui_arrow-inner_1hpp3_1yqjl_103:not(#\9) {
   inset-block-start: 2px;
 }
-.awsui_arrow-inner_1hpp3_1e67h_103:not(#\9)::after {
+.awsui_arrow-inner_1hpp3_1yqjl_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_1e67h_140 > .awsui_arrow-outer_1hpp3_1e67h_103:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1e67h_140 > .awsui_arrow-outer_1hpp3_1e67h_103:not(#\9)::after {
+.awsui_arrow-position-right-top_1hpp3_1yqjl_140 > .awsui_arrow-outer_1hpp3_1yqjl_103:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1yqjl_140 > .awsui_arrow-outer_1hpp3_1yqjl_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_1e67h_143 > .awsui_arrow-outer_1hpp3_1e67h_103:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1e67h_143 > .awsui_arrow-outer_1hpp3_1e67h_103:not(#\9)::after {
+.awsui_arrow-position-left-top_1hpp3_1yqjl_143 > .awsui_arrow-outer_1hpp3_1yqjl_103:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1yqjl_143 > .awsui_arrow-outer_1hpp3_1yqjl_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_1e67h_146 > .awsui_arrow-outer_1hpp3_1e67h_103:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1e67h_146 > .awsui_arrow-outer_1hpp3_1e67h_103:not(#\9)::after {
+.awsui_arrow-position-top-center_1hpp3_1yqjl_146 > .awsui_arrow-outer_1hpp3_1yqjl_103:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1yqjl_146 > .awsui_arrow-outer_1hpp3_1yqjl_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_1e67h_149 > .awsui_arrow-outer_1hpp3_1e67h_103:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1e67h_149 > .awsui_arrow-outer_1hpp3_1e67h_103:not(#\9)::after {
+.awsui_arrow-position-bottom-center_1hpp3_1yqjl_149 > .awsui_arrow-outer_1hpp3_1yqjl_103:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1yqjl_149 > .awsui_arrow-outer_1hpp3_1yqjl_103:not(#\9)::after {
   box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
 }
 
@@ -154,37 +154,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_1e67h_157:not(#\9),
-.awsui_next-button_1hpp3_1e67h_158:not(#\9),
-.awsui_previous-button_1hpp3_1e67h_159:not(#\9),
-.awsui_finish-button_1hpp3_1e67h_160:not(#\9),
-.awsui_header_1hpp3_1e67h_161:not(#\9),
-.awsui_step-counter-content_1hpp3_1e67h_162:not(#\9),
-.awsui_content_1hpp3_1e67h_163:not(#\9) {
+.awsui_annotation_1hpp3_1yqjl_157:not(#\9),
+.awsui_next-button_1hpp3_1yqjl_158:not(#\9),
+.awsui_previous-button_1hpp3_1yqjl_159:not(#\9),
+.awsui_finish-button_1hpp3_1yqjl_160:not(#\9),
+.awsui_header_1hpp3_1yqjl_161:not(#\9),
+.awsui_step-counter-content_1hpp3_1yqjl_162:not(#\9),
+.awsui_content_1hpp3_1yqjl_163:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_description_1hpp3_1e67h_167:not(#\9) {
+.awsui_description_1hpp3_1yqjl_167:not(#\9) {
   overflow: hidden;
   margin-block-start: var(--space-xxs-9rrxti, 4px);
 }
 
-.awsui_actionBar_1hpp3_1e67h_172:not(#\9) {
+.awsui_actionBar_1hpp3_1yqjl_172:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
 
-.awsui_stepCounter_1hpp3_1e67h_179:not(#\9) {
+.awsui_stepCounter_1hpp3_1yqjl_179:not(#\9) {
   margin-inline-end: 20px;
 }
 
-.awsui_divider_1hpp3_1e67h_183:not(#\9) {
+.awsui_divider_1hpp3_1yqjl_183:not(#\9) {
   border-block-end: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);
 }
 
-.awsui_hotspot_1hpp3_1e67h_187:not(#\9) {
+.awsui_hotspot_1hpp3_1yqjl_187:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -224,21 +224,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-iof9y8, 40px 0 0 0);
+  scroll-margin: var(--awsui-content-scroll-margin-lgosor, 40px 0 0 0);
   inline-size: 16px;
   block-size: 16px;
 }
-.awsui_hotspot_1hpp3_1e67h_187:not(#\9):focus {
+.awsui_hotspot_1hpp3_1yqjl_187:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1e67h_187:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1yqjl_187:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1e67h_187:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1yqjl_187:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1e67h_187:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1yqjl_187:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -252,13 +252,13 @@ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1e67h_187: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_1e67h_187 > .awsui_icon_1hpp3_1e67h_254:not(#\9) {
+.awsui_hotspot_1hpp3_1yqjl_187 > .awsui_icon_1hpp3_1yqjl_254:not(#\9) {
   position: relative;
   stroke: var(--color-text-link-default-hop3gv, #0073bb);
 }
-.awsui_hotspot_1hpp3_1e67h_187:not(#\9):hover > .awsui_icon_1hpp3_1e67h_254 {
+.awsui_hotspot_1hpp3_1yqjl_187:not(#\9):hover > .awsui_icon_1hpp3_1yqjl_254 {
   stroke: var(--color-text-link-hover-8s5z9d, #0a4a74);
 }
-.awsui_hotspot_1hpp3_1e67h_187:not(#\9):active > .awsui_icon_1hpp3_1e67h_254 {
+.awsui_hotspot_1hpp3_1yqjl_187:not(#\9):active > .awsui_icon_1hpp3_1yqjl_254 {
   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_1e67h_99",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_1e67h_103",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_1e67h_103",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1e67h_140",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1e67h_140",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1e67h_143",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1e67h_143",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1e67h_146",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1e67h_146",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1e67h_149",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1e67h_149",
-  "annotation": "awsui_annotation_1hpp3_1e67h_157",
-  "next-button": "awsui_next-button_1hpp3_1e67h_158",
-  "previous-button": "awsui_previous-button_1hpp3_1e67h_159",
-  "finish-button": "awsui_finish-button_1hpp3_1e67h_160",
-  "header": "awsui_header_1hpp3_1e67h_161",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_1e67h_162",
-  "content": "awsui_content_1hpp3_1e67h_163",
-  "description": "awsui_description_1hpp3_1e67h_167",
-  "actionBar": "awsui_actionBar_1hpp3_1e67h_172",
-  "stepCounter": "awsui_stepCounter_1hpp3_1e67h_179",
-  "divider": "awsui_divider_1hpp3_1e67h_183",
-  "hotspot": "awsui_hotspot_1hpp3_1e67h_187",
-  "icon": "awsui_icon_1hpp3_1e67h_254"
+  "arrow": "awsui_arrow_1hpp3_1yqjl_99",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_1yqjl_103",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_1yqjl_103",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1yqjl_140",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1yqjl_140",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1yqjl_143",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1yqjl_143",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1yqjl_146",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1yqjl_146",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1yqjl_149",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1yqjl_149",
+  "annotation": "awsui_annotation_1hpp3_1yqjl_157",
+  "next-button": "awsui_next-button_1hpp3_1yqjl_158",
+  "previous-button": "awsui_previous-button_1hpp3_1yqjl_159",
+  "finish-button": "awsui_finish-button_1hpp3_1yqjl_160",
+  "header": "awsui_header_1hpp3_1yqjl_161",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_1yqjl_162",
+  "content": "awsui_content_1hpp3_1yqjl_163",
+  "description": "awsui_description_1hpp3_1yqjl_167",
+  "actionBar": "awsui_actionBar_1hpp3_1yqjl_172",
+  "stepCounter": "awsui_stepCounter_1hpp3_1yqjl_179",
+  "divider": "awsui_divider_1hpp3_1yqjl_183",
+  "hotspot": "awsui_hotspot_1hpp3_1yqjl_187",
+  "icon": "awsui_icon_1hpp3_1yqjl_254"
 };
   

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

@@ -1,14 +1,20 @@
 import React from 'react';
 import { AppLayoutProps } from './interfaces';
-declare const ClassicAppLayout: React.ForwardRefExoticComponent<AppLayoutProps & {
+declare const ClassicAppLayout: React.ForwardRefExoticComponent<Omit<AppLayoutProps, "headerSelector" | "footerSelector"> & {
     contentType: AppLayoutProps.ContentType;
     navigationOpen: boolean;
     navigationWidth: number;
     toolsWidth: number;
     minContentWidth: number;
-    headerSelector: string;
-    footerSelector: string;
     onNavigationChange: import("../internal/events").NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;
+} & {
+    placement: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+        width: number;
+    };
 } & React.RefAttributes<AppLayoutProps.Ref>>;
 export default ClassicAppLayout;
 //# sourceMappingURL=classic.d.ts.map

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;AAiC1E,QAAA,MAAM,gBAAgB;;;;;;;;;4CAwjBrB,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;;;;;;;;;;;;;;;4CAsjBrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}