@cloudscape-design/components-themeable 3.0.306 → 3.0.308

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

@@ -8,50 +8,15 @@
 @use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 .notifications {
-  grid-column: 3;
-  grid-row: 1;
-  z-index: 850;
   color: awsui.$color-text-body-default;
+  grid-area: notifications;
+  z-index: 850;
 
-  /*
-  In desktop viewports the notifications will always be the first
-  slot rendered in the center column. The padding should create
-  a centered vertical alignment with the circular buttons for the
-  navigation and tools drawers.
-  */
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
-    margin: awsui.$space-xs 0;
-
-    /*
-    #{awsui.$space-xs} token needs to align with the $offsetTopWithNotifications
-    calculation in the layout CSS.
-    */
     &.sticky-notifications {
+      #{custom-props.$flashbarStickyBottomMargin}: #{awsui.$space-xxl};
       position: sticky;
       top: calc(var(#{custom-props.$offsetTop}) + #{awsui.$space-xs});
-      #{custom-props.$flashbarStickyBottomMargin}: #{awsui.$space-xxl};
-    }
-
-    &:not(.has-notifications-content) {
-      margin: 0;
-    }
-  }
-
-  /*
-  In mobile viewports the notifications should never be sticky even
-  if the property is set. Padding is added to give adequate
-  vertical space from the sticky AppBar the subsequent adjacent sibling.
-  */
-  @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
-    grid-row: 2;
-    margin: awsui.$space-scaled-s 0;
-
-    &.sticky-notifications {
-      position: static;
-    }
-
-    &:not(.has-notifications-content) {
-      margin: 0;
     }
   }
 }

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

@@ -22,7 +22,7 @@ section.split-panel-bottom {
   bottom: var(#{custom-props.$footerHeight});
   display: none;
   grid-column: 1 / 6;
-  grid-row: 5;
+  grid-row: 10;
   height: auto;
   /*
   The position sticky will work in conjunction with the align self: end; property.

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

@@ -3,12 +3,13 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use './app-bar.scss';
 @use './background.scss';
+@use './breadcrumbs.scss';
 @use './drawers.scss';
 @use './header.scss';
 @use './layout.scss';
 @use './main.scss';
+@use './mobile-toolbar.scss';
 @use './navigation.scss';
 @use './notifications.scss';
 @use './split-panel.scss';

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

@@ -26,7 +26,7 @@ viewport size and state of the Tools drawer.
   #{custom-props.$toolsWidth}: 290px;
   display: flex;
   grid-column: 5;
-  grid-row: 1 / span 5;
+  grid-row: 1 / span 10;
   height: var(#{custom-props.$contentHeight});
   max-width: var(#{custom-props.$toolsMaxWidth});
   position: sticky;
@@ -67,11 +67,10 @@ viewport size and state of the Tools drawer.
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior-y: contain;
+  pointer-events: auto;
   position: relative;
   word-wrap: break-word;
 
-  pointer-events: auto;
-
   // Animation for the Tools opacity and width when it is added to the DOM
   @keyframes openTools {
     from {
@@ -160,7 +159,7 @@ handleSplitPanelMaxWidth function in the context.
   }
 
   /*
-  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) {

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

@@ -18,10 +18,10 @@
 .header {
   &-variant-full-page.header-refresh {
     @include container.borders-and-shadows;
-    padding-top: awsui.$space-container-header-vertical;
+    padding-top: 0;
     padding-left: 0;
     padding-right: 0;
-    padding-bottom: calc(#{awsui.$space-container-header-vertical} + #{awsui.$space-scaled-xxs});
+    padding-bottom: #{awsui.$space-container-header-vertical};
   }
 }
 

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

@@ -48,16 +48,6 @@ nodes will directly touch with no gap between them.
     grid-column: 1;
     grid-row: 1;
     padding-bottom: awsui.$space-content-header-padding-bottom;
-
-    @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
-      &.has-breadcrumbs {
-        padding-top: awsui.$space-xxs;
-      }
-    }
-
-    @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
-      padding: awsui.$space-m 0 awsui.$space-content-header-padding-bottom;
-    }
   }
 
   > .content {

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

@@ -1,34 +1,39 @@
 
-    $activeDrawerWidth: --awsui-active-drawer-width-rrnppm;
-$offsetTop: --awsui-offset-top-rrnppm;
-$offsetTopWithNotifications: --awsui-offset-top-with-notifications-rrnppm;
-$contentGapLeft: --awsui-content-gap-left-rrnppm;
-$contentGapRight: --awsui-content-gap-right-rrnppm;
-$contentHeight: --awsui-content-height-rrnppm;
-$defaultMaxContentWidth: --awsui-default-max-content-width-rrnppm;
-$defaultMinContentWidth: --awsui-default-min-content-width-rrnppm;
-$footerHeight: --awsui-footer-height-rrnppm;
-$headerHeight: --awsui-header-height-rrnppm;
-$layoutWidth: --awsui-layout-width-rrnppm;
-$mainOffsetLeft: --awsui-main-offset-left-rrnppm;
-$maxContentWidth: --awsui-max-content-width-rrnppm;
-$minContentWidth: --awsui-min-content-width-rrnppm;
-$mobileBarHeight: --awsui-mobile-bar-height-rrnppm;
-$notificationsHeight: --awsui-notifications-height-rrnppm;
-$overlapHeight: --awsui-overlap-height-rrnppm;
-$navigationWidth: --awsui-navigation-width-rrnppm;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-rrnppm;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-rrnppm;
-$splitPanelHeight: --awsui-split-panel-height-rrnppm;
-$splitPanelMinWidth: --awsui-split-panel-min-width-rrnppm;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-rrnppm;
-$toolsMaxWidth: --awsui-tools-max-width-rrnppm;
-$toolsWidth: --awsui-tools-width-rrnppm;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-rrnppm;
-$contentScrollMargin: --awsui-content-scroll-margin-rrnppm;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-rrnppm;
-$flashbarStackIndex: --awsui-flashbar-stack-index-rrnppm;
-$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-rrnppm;
-$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-rrnppm;
-$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-rrnppm;
+    $activeDrawerWidth: --awsui-active-drawer-width-en6003;
+$breadcrumbsGap: --awsui-breadcrumbs-gap-en6003;
+$contentGapLeft: --awsui-content-gap-left-en6003;
+$contentGapRight: --awsui-content-gap-right-en6003;
+$contentHeight: --awsui-content-height-en6003;
+$defaultMaxContentWidth: --awsui-default-max-content-width-en6003;
+$defaultMinContentWidth: --awsui-default-min-content-width-en6003;
+$footerHeight: --awsui-footer-height-en6003;
+$headerGap: --awsui-header-gap-en6003;
+$headerHeight: --awsui-header-height-en6003;
+$layoutWidth: --awsui-layout-width-en6003;
+$mainGap: --awsui-main-gap-en6003;
+$mainOffsetLeft: --awsui-main-offset-left-en6003;
+$mainTemplateRows: --awsui-main-template-rows-en6003;
+$maxContentWidth: --awsui-max-content-width-en6003;
+$minContentWidth: --awsui-min-content-width-en6003;
+$mobileBarHeight: --awsui-mobile-bar-height-en6003;
+$notificationsGap: --awsui-notifications-gap-en6003;
+$notificationsHeight: --awsui-notifications-height-en6003;
+$offsetTop: --awsui-offset-top-en6003;
+$offsetTopWithNotifications: --awsui-offset-top-with-notifications-en6003;
+$overlapHeight: --awsui-overlap-height-en6003;
+$navigationWidth: --awsui-navigation-width-en6003;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-en6003;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-en6003;
+$splitPanelHeight: --awsui-split-panel-height-en6003;
+$splitPanelMinWidth: --awsui-split-panel-min-width-en6003;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-en6003;
+$toolsMaxWidth: --awsui-tools-max-width-en6003;
+$toolsWidth: --awsui-tools-width-en6003;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-en6003;
+$contentScrollMargin: --awsui-content-scroll-margin-en6003;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-en6003;
+$flashbarStackIndex: --awsui-flashbar-stack-index-en6003;
+$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-en6003;
+$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-en6003;
+$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-en6003;
     

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

@@ -206,6 +206,10 @@ the default white background of the container component.
 .header-controls {
   padding-top: awsui.$space-container-header-vertical;
   padding-bottom: awsui.$space-container-header-vertical;
+
+  &.variant-full-page {
+    padding-top: 0;
+  }
   &.variant-stacked,
   &.variant-container {
     padding-left: calc(awsui.$space-table-horizontal + awsui.$space-table-header-horizontal);

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

@@ -220,8 +220,8 @@
   }
 
   > .form-header > .form-header-content {
-    padding-top: awsui.$space-scaled-xl;
-    padding-bottom: awsui.$space-scaled-xl;
+    padding-top: awsui.$space-scaled-m;
+    padding-bottom: awsui.$space-scaled-m;
   }
 
   > .form-component {
@@ -252,9 +252,6 @@
   color: awsui.$color-text-heading-secondary;
   font-weight: styles.$font-weight-bold;
   padding-top: awsui.$space-scaled-xxs;
-  &-extra-padding {
-    padding-top: awsui.$space-scaled-l;
-  }
   &-hidden {
     display: none;
   }

package/lib/internal/template/alert/interfaces.d.ts

@@ -25,6 +25,7 @@ export interface AlertProps extends BaseComponentProps {
     dismissible?: boolean;
     /**
      * Adds an aria-label to the dismiss button.
+     * @i18n
      */
     dismissAriaLabel?: string;
     /**

package/lib/internal/template/alert/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["alert/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,yBAAiB,UAAU,CAAC;IAC1B,KAAY,IAAI,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;CAC7D;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IAEvB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC;CAC3C"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["alert/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,yBAAiB,UAAU,CAAC;IAC1B,KAAY,IAAI,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;CAC7D;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IAEvB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC;CAC3C"}

package/lib/internal/template/alert/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["alert/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace AlertProps {\n  export type Type = 'success' | 'error' | 'warning' | 'info';\n}\n\nexport interface AlertProps extends BaseComponentProps {\n  /**\n   * Specifies the type of message you want to display.\n   */\n  type?: AlertProps.Type;\n\n  /**\n   * Provides a text alternative for the icon.\n   */\n  statusIconAriaLabel?: string;\n\n  /**\n   * Determines whether the alert is displayed.\n   * @deprecated Use conditional rendering in your code instead of this prop.\n   */\n  visible?: boolean;\n  /**\n   * Adds a close button to the alert when set to `true`.\n   * An `onDismiss` event is fired when a user clicks the button.\n   */\n  dismissible?: boolean;\n  /**\n   * Adds an aria-label to the dismiss button.\n   */\n  dismissAriaLabel?: string;\n  /**\n   * Primary text displayed in the element.\n   */\n  children?: React.ReactNode;\n  /**\n   * Heading text.\n   */\n  header?: React.ReactNode;\n  /**\n   * Displays an action button next to the message area when set.\n   * An `onButtonClick` event is fired when the user clicks it.\n   * @deprecated Replaced by `action`.\n   */\n  buttonText?: React.ReactNode;\n  /**\n   * Specifies an action for the alert message.\n   * Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.\n   */\n  action?: React.ReactNode;\n  /**\n   * Fired when the user clicks the close icon that is displayed\n   * when the `dismissible` property is set to `true`.\n   */\n  onDismiss?: NonCancelableEventHandler;\n  /**\n   * Fired when the user clicks the action button.\n   * **Deprecated** Replaced by `action`.\n   */\n  onButtonClick?: NonCancelableEventHandler;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["alert/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace AlertProps {\n  export type Type = 'success' | 'error' | 'warning' | 'info';\n}\n\nexport interface AlertProps extends BaseComponentProps {\n  /**\n   * Specifies the type of message you want to display.\n   */\n  type?: AlertProps.Type;\n\n  /**\n   * Provides a text alternative for the icon.\n   */\n  statusIconAriaLabel?: string;\n\n  /**\n   * Determines whether the alert is displayed.\n   * @deprecated Use conditional rendering in your code instead of this prop.\n   */\n  visible?: boolean;\n  /**\n   * Adds a close button to the alert when set to `true`.\n   * An `onDismiss` event is fired when a user clicks the button.\n   */\n  dismissible?: boolean;\n  /**\n   * Adds an aria-label to the dismiss button.\n   * @i18n\n   */\n  dismissAriaLabel?: string;\n  /**\n   * Primary text displayed in the element.\n   */\n  children?: React.ReactNode;\n  /**\n   * Heading text.\n   */\n  header?: React.ReactNode;\n  /**\n   * Displays an action button next to the message area when set.\n   * An `onButtonClick` event is fired when the user clicks it.\n   * @deprecated Replaced by `action`.\n   */\n  buttonText?: React.ReactNode;\n  /**\n   * Specifies an action for the alert message.\n   * Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.\n   */\n  action?: React.ReactNode;\n  /**\n   * Fired when the user clicks the close icon that is displayed\n   * when the `dismissible` property is set to `true`.\n   */\n  onDismiss?: NonCancelableEventHandler;\n  /**\n   * Fired when the user clicks the action button.\n   * **Deprecated** Replaced by `action`.\n   */\n  onButtonClick?: NonCancelableEventHandler;\n}\n"]}

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

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_1hpp3_1jvrg_93",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_1jvrg_97",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_1jvrg_97",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1jvrg_128",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1jvrg_128",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1jvrg_131",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1jvrg_131",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1jvrg_134",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1jvrg_134",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1jvrg_137",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1jvrg_137",
-  "annotation": "awsui_annotation_1hpp3_1jvrg_145",
-  "next-button": "awsui_next-button_1hpp3_1jvrg_146",
-  "previous-button": "awsui_previous-button_1hpp3_1jvrg_147",
-  "finish-button": "awsui_finish-button_1hpp3_1jvrg_148",
-  "header": "awsui_header_1hpp3_1jvrg_149",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_1jvrg_150",
-  "content": "awsui_content_1hpp3_1jvrg_151",
-  "description": "awsui_description_1hpp3_1jvrg_155",
-  "actionBar": "awsui_actionBar_1hpp3_1jvrg_160",
-  "stepCounter": "awsui_stepCounter_1hpp3_1jvrg_167",
-  "divider": "awsui_divider_1hpp3_1jvrg_171",
-  "hotspot": "awsui_hotspot_1hpp3_1jvrg_175",
-  "icon": "awsui_icon_1hpp3_1jvrg_215"
+  "arrow": "awsui_arrow_1hpp3_v7c3n_93",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_v7c3n_97",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_v7c3n_97",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_v7c3n_128",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_v7c3n_128",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_v7c3n_131",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_v7c3n_131",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_v7c3n_134",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_v7c3n_134",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_v7c3n_137",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_v7c3n_137",
+  "annotation": "awsui_annotation_1hpp3_v7c3n_145",
+  "next-button": "awsui_next-button_1hpp3_v7c3n_146",
+  "previous-button": "awsui_previous-button_1hpp3_v7c3n_147",
+  "finish-button": "awsui_finish-button_1hpp3_v7c3n_148",
+  "header": "awsui_header_1hpp3_v7c3n_149",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_v7c3n_150",
+  "content": "awsui_content_1hpp3_v7c3n_151",
+  "description": "awsui_description_1hpp3_v7c3n_155",
+  "actionBar": "awsui_actionBar_1hpp3_v7c3n_160",
+  "stepCounter": "awsui_stepCounter_1hpp3_v7c3n_167",
+  "divider": "awsui_divider_1hpp3_v7c3n_171",
+  "hotspot": "awsui_hotspot_1hpp3_v7c3n_175",
+  "icon": "awsui_icon_1hpp3_v7c3n_215"
 };
   

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

@@ -90,11 +90,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_1jvrg_93:not(#\9) {
+.awsui_arrow_1hpp3_v7c3n_93:not(#\9) {
   width: 20px;
   height: 10px;
 }
-.awsui_arrow-outer_1hpp3_1jvrg_97:not(#\9), .awsui_arrow-inner_1hpp3_1jvrg_97:not(#\9) {
+.awsui_arrow-outer_1hpp3_v7c3n_97:not(#\9), .awsui_arrow-inner_1hpp3_v7c3n_97:not(#\9) {
   position: absolute;
   overflow: hidden;
   width: 20px;
@@ -102,7 +102,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   top: 0;
   left: 0;
 }
-.awsui_arrow-outer_1hpp3_1jvrg_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_1jvrg_97:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_v7c3n_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_v7c3n_97:not(#\9)::after {
   content: "";
   box-sizing: border-box;
   display: inline-block;
@@ -115,26 +115,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transform: rotate(45deg);
   transform-origin: 0 100%;
 }
-.awsui_arrow-outer_1hpp3_1jvrg_97:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_v7c3n_97:not(#\9)::after {
   background-color: var(--color-border-status-info-l7as2m, #0073bb);
 }
-.awsui_arrow-inner_1hpp3_1jvrg_97:not(#\9) {
+.awsui_arrow-inner_1hpp3_v7c3n_97:not(#\9) {
   top: 2px;
 }
-.awsui_arrow-inner_1hpp3_1jvrg_97:not(#\9)::after {
+.awsui_arrow-inner_1hpp3_v7c3n_97:not(#\9)::after {
   border-radius: 1px 0 0 0;
   background-color: var(--color-background-status-info-efxlh5, #f1faff);
 }
-.awsui_arrow-position-right-top_1hpp3_1jvrg_128 > .awsui_arrow-outer_1hpp3_1jvrg_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1jvrg_128 > .awsui_arrow-outer_1hpp3_1jvrg_97:not(#\9)::after {
+.awsui_arrow-position-right-top_1hpp3_v7c3n_128 > .awsui_arrow-outer_1hpp3_v7c3n_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_v7c3n_128 > .awsui_arrow-outer_1hpp3_v7c3n_97:not(#\9)::after {
   box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-h3jxfr, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-left-top_1hpp3_1jvrg_131 > .awsui_arrow-outer_1hpp3_1jvrg_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1jvrg_131 > .awsui_arrow-outer_1hpp3_1jvrg_97:not(#\9)::after {
+.awsui_arrow-position-left-top_1hpp3_v7c3n_131 > .awsui_arrow-outer_1hpp3_v7c3n_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_v7c3n_131 > .awsui_arrow-outer_1hpp3_v7c3n_97:not(#\9)::after {
   box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-h3jxfr, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-top-center_1hpp3_1jvrg_134 > .awsui_arrow-outer_1hpp3_1jvrg_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1jvrg_134 > .awsui_arrow-outer_1hpp3_1jvrg_97:not(#\9)::after {
+.awsui_arrow-position-top-center_1hpp3_v7c3n_134 > .awsui_arrow-outer_1hpp3_v7c3n_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_v7c3n_134 > .awsui_arrow-outer_1hpp3_v7c3n_97:not(#\9)::after {
   box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-h3jxfr, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-bottom-center_1hpp3_1jvrg_137 > .awsui_arrow-outer_1hpp3_1jvrg_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1jvrg_137 > .awsui_arrow-outer_1hpp3_1jvrg_97:not(#\9)::after {
+.awsui_arrow-position-bottom-center_1hpp3_v7c3n_137 > .awsui_arrow-outer_1hpp3_v7c3n_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_v7c3n_137 > .awsui_arrow-outer_1hpp3_v7c3n_97:not(#\9)::after {
   box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-h3jxfr, rgba(0, 28, 36, 0.5));
 }
 
@@ -142,37 +142,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_1jvrg_145:not(#\9),
-.awsui_next-button_1hpp3_1jvrg_146:not(#\9),
-.awsui_previous-button_1hpp3_1jvrg_147:not(#\9),
-.awsui_finish-button_1hpp3_1jvrg_148:not(#\9),
-.awsui_header_1hpp3_1jvrg_149:not(#\9),
-.awsui_step-counter-content_1hpp3_1jvrg_150:not(#\9),
-.awsui_content_1hpp3_1jvrg_151:not(#\9) {
+.awsui_annotation_1hpp3_v7c3n_145:not(#\9),
+.awsui_next-button_1hpp3_v7c3n_146:not(#\9),
+.awsui_previous-button_1hpp3_v7c3n_147:not(#\9),
+.awsui_finish-button_1hpp3_v7c3n_148:not(#\9),
+.awsui_header_1hpp3_v7c3n_149:not(#\9),
+.awsui_step-counter-content_1hpp3_v7c3n_150:not(#\9),
+.awsui_content_1hpp3_v7c3n_151:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_description_1hpp3_1jvrg_155:not(#\9) {
+.awsui_description_1hpp3_v7c3n_155:not(#\9) {
   overflow: hidden;
   margin-top: var(--space-xxs-68xp1c, 4px);
 }
 
-.awsui_actionBar_1hpp3_1jvrg_160:not(#\9) {
+.awsui_actionBar_1hpp3_v7c3n_160:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
 
-.awsui_stepCounter_1hpp3_1jvrg_167:not(#\9) {
+.awsui_stepCounter_1hpp3_v7c3n_167:not(#\9) {
   margin-right: 20px;
 }
 
-.awsui_divider_1hpp3_1jvrg_171:not(#\9) {
+.awsui_divider_1hpp3_v7c3n_171:not(#\9) {
   border-bottom: var(--border-divider-section-width-om0oy7, 1px) solid var(--color-border-divider-default-77o8t1, #eaeded);
 }
 
-.awsui_hotspot_1hpp3_1jvrg_175:not(#\9) {
+.awsui_hotspot_1hpp3_v7c3n_175:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -213,21 +213,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border: none;
   padding: 0;
   cursor: pointer;
-  scroll-margin: var(--awsui-content-scroll-margin-rrnppm, 40px 0 0 0);
+  scroll-margin: var(--awsui-content-scroll-margin-en6003, 40px 0 0 0);
   width: 16px;
   height: 16px;
 }
-.awsui_hotspot_1hpp3_1jvrg_175:not(#\9):focus {
+.awsui_hotspot_1hpp3_v7c3n_175:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1jvrg_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_v7c3n_175:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1jvrg_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_v7c3n_175:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1jvrg_175:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_v7c3n_175:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -238,13 +238,13 @@ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1jvrg_175:not(#\9):focu
   border-radius: var(--border-radius-control-circular-focus-ring-bmzbt3, 50%);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-oqg5wt, #0073bb);
 }
-.awsui_hotspot_1hpp3_1jvrg_175 > .awsui_icon_1hpp3_1jvrg_215:not(#\9) {
+.awsui_hotspot_1hpp3_v7c3n_175 > .awsui_icon_1hpp3_v7c3n_215:not(#\9) {
   position: relative;
   stroke: var(--color-text-link-default-m21l9v, #0073bb);
 }
-.awsui_hotspot_1hpp3_1jvrg_175:not(#\9):hover > .awsui_icon_1hpp3_1jvrg_215 {
+.awsui_hotspot_1hpp3_v7c3n_175:not(#\9):hover > .awsui_icon_1hpp3_v7c3n_215 {
   stroke: var(--color-text-link-hover-z3rl2f, #0073bb);
 }
-.awsui_hotspot_1hpp3_1jvrg_175:not(#\9):active > .awsui_icon_1hpp3_1jvrg_215 {
+.awsui_hotspot_1hpp3_v7c3n_175:not(#\9):active > .awsui_icon_1hpp3_v7c3n_215 {
   stroke: var(--color-text-link-default-m21l9v, #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_1jvrg_93",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_1jvrg_97",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_1jvrg_97",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1jvrg_128",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1jvrg_128",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1jvrg_131",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1jvrg_131",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1jvrg_134",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1jvrg_134",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1jvrg_137",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1jvrg_137",
-  "annotation": "awsui_annotation_1hpp3_1jvrg_145",
-  "next-button": "awsui_next-button_1hpp3_1jvrg_146",
-  "previous-button": "awsui_previous-button_1hpp3_1jvrg_147",
-  "finish-button": "awsui_finish-button_1hpp3_1jvrg_148",
-  "header": "awsui_header_1hpp3_1jvrg_149",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_1jvrg_150",
-  "content": "awsui_content_1hpp3_1jvrg_151",
-  "description": "awsui_description_1hpp3_1jvrg_155",
-  "actionBar": "awsui_actionBar_1hpp3_1jvrg_160",
-  "stepCounter": "awsui_stepCounter_1hpp3_1jvrg_167",
-  "divider": "awsui_divider_1hpp3_1jvrg_171",
-  "hotspot": "awsui_hotspot_1hpp3_1jvrg_175",
-  "icon": "awsui_icon_1hpp3_1jvrg_215"
+  "arrow": "awsui_arrow_1hpp3_v7c3n_93",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_v7c3n_97",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_v7c3n_97",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_v7c3n_128",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_v7c3n_128",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_v7c3n_131",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_v7c3n_131",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_v7c3n_134",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_v7c3n_134",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_v7c3n_137",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_v7c3n_137",
+  "annotation": "awsui_annotation_1hpp3_v7c3n_145",
+  "next-button": "awsui_next-button_1hpp3_v7c3n_146",
+  "previous-button": "awsui_previous-button_1hpp3_v7c3n_147",
+  "finish-button": "awsui_finish-button_1hpp3_v7c3n_148",
+  "header": "awsui_header_1hpp3_v7c3n_149",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_v7c3n_150",
+  "content": "awsui_content_1hpp3_v7c3n_151",
+  "description": "awsui_description_1hpp3_v7c3n_155",
+  "actionBar": "awsui_actionBar_1hpp3_v7c3n_160",
+  "stepCounter": "awsui_stepCounter_1hpp3_v7c3n_167",
+  "divider": "awsui_divider_1hpp3_v7c3n_171",
+  "hotspot": "awsui_hotspot_1hpp3_v7c3n_175",
+  "icon": "awsui_icon_1hpp3_v7c3n_215"
 };
   

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

@@ -88,6 +88,7 @@ export interface AppLayoutProps extends BaseComponentProps {
      *   toolsToggle: "Open help panel"
      * }
      * ```
+     * @i18n
      */
     ariaLabels?: AppLayoutProps.Labels;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/interfaces.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/interfaces.ts"],"names":[],"mappings":"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"}

package/lib/internal/template/app-layout/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface AppLayoutProps extends BaseComponentProps {\n  /**\n   * Determines the default behavior of the component based on some predefined page layouts.\n   * Individual properties will always take precedence over the default coming from the content type.\n   */\n  contentType?: AppLayoutProps.ContentType;\n\n  /**\n   * If `true`, disables outer paddings for the content slot.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Activates a backwards-compatibility mode for applications with non-fixed headers and footers.\n   * @deprecated This layout is being phased out and may miss some features.\n   */\n  disableBodyScroll?: boolean;\n\n  /**\n   * State of the navigation drawer.\n   */\n  navigationOpen?: boolean;\n\n  /**\n   * Navigation drawer width in pixels.\n   */\n  navigationWidth?: number;\n\n  /**\n   * If `true`, the navigation drawer is not displayed at all.\n   */\n  navigationHide?: boolean;\n\n  /**\n   * State of the tools drawer.\n   */\n  toolsOpen?: boolean;\n\n  /**\n   * If `true`, the tools drawer is not displayed at all.\n   */\n  toolsHide?: boolean;\n\n  /**\n   * Tools drawer width in pixels.\n   */\n  toolsWidth?: number;\n\n  /**\n   * Maximum main content panel width in pixels.\n   *\n   * If set to `Number.MAX_VALUE`, the main content panel will occupy the full available width.\n   */\n  maxContentWidth?: number;\n\n  /**\n   * Minimum main content panel width in pixels.\n   */\n  minContentWidth?: number;\n\n  /**\n   * If true, the notification slot is rendered above the scrollable\n   * content area so it is always visible.\n   *\n   * Note that sticky notifications are not supported in Internet Explorer.\n   */\n  stickyNotifications?: boolean;\n\n  /**\n   * CSS selector for the application header.\n   */\n  headerSelector?: string;\n\n  /**\n   * CSS selector for the application footer.\n   */\n  footerSelector?: string;\n\n  /**\n   * Aria labels for the drawer operating buttons. Use this property to ensure accessibility.\n   *\n   * * `navigation` (string) - Label for the landmark that wraps the navigation drawer.\n   * * `navigationClose` (string) - Label for the button that closes the navigation drawer.\n   * * `navigationToggle` (string) - Label for the button that opens the navigation drawer.\n   * * `notification` (string) - Label for the region that contains notification messages.\n   * * `tools` (string) - Label for the landmark that wraps the tools drawer.\n   * * `toolsClose` (string) - Label for the button that closes the tools drawer.\n   * * `toolsToggle` (string) - Label for the button that opens the tools drawer.\n   *\n   * Example:\n   * ```\n   * {\n   *   navigation: \"Navigation drawer\",\n   *   navigationClose: \"Close navigation drawer\",\n   *   navigationToggle: \"Open navigation drawer\",\n   *   notifications: \"Notifications\",\n   *   tools: \"Help panel\",\n   *   toolsClose: \"Close help panel\",\n   *   toolsToggle: \"Open help panel\"\n   * }\n   * ```\n   */\n  ariaLabels?: AppLayoutProps.Labels;\n\n  /**\n   * Navigation drawer.\n   */\n  navigation?: React.ReactNode;\n\n  /**\n   * Top area of the page content.\n   * @deprecated Replaced by the `header` slot of the [content layout](/components/content-layout/) component.\n   * @visualrefresh\n   */\n  contentHeader?: React.ReactNode;\n\n  /**\n   * Disables overlap between `contentHeader` and `content` slots.\n   * @deprecated Replaced by the `disableOverlap` property of the [content layout](/components/content-layout/) component.\n   * @visualrefresh\n   */\n  disableContentHeaderOverlap?: boolean;\n\n  /**\n   * Main content.\n   */\n  content?: React.ReactNode;\n\n  /**\n   * Tools drawer.\n   */\n  tools?: React.ReactNode;\n\n  /**\n   * Displayed on top of the main content in the scrollable area.\n   *\n   * Conceived to contain notifications (flash messages).\n   */\n  notifications?: React.ReactNode;\n\n  /**\n   * Use this slot to add the [breadcrumb group component](/components/breadcrumb-group/) to the app layout.\n   */\n  breadcrumbs?: React.ReactNode;\n\n  /**\n   * Fired when the navigation drawer is toggled.\n   */\n  onNavigationChange?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n\n  /**\n   * Fired when the tools drawer is toggled.\n   */\n  onToolsChange?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n\n  /**\n   * Use this slot to add the [split panel component](/components/split-panel/) to the app layout.\n   *\n   * Note: If provided, this property should be set to `null` or `undefined` if a split panel should not be rendered.\n   */\n  splitPanel?: React.ReactNode;\n\n  /**\n   * The size of the split panel in pixels.\n   */\n  splitPanelSize?: number;\n\n  /**\n   * State of the split panel.\n   */\n  splitPanelOpen?: boolean;\n  /**\n   * Controls the split panel preferences.\n   *\n   * By default, the preference is `{ position: 'bottom' }`\n   */\n  splitPanelPreferences?: AppLayoutProps.SplitPanelPreferences;\n  /**\n   * Fired when the split panel is resized.\n   */\n  onSplitPanelResize?: NonCancelableEventHandler<AppLayoutProps.SplitPanelResizeDetail>;\n  /**\n   * Fired when the split panel is toggled.\n   */\n  onSplitPanelToggle?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n  /**\n   * Fired when the split panel preferences change.\n   */\n  onSplitPanelPreferencesChange?: NonCancelableEventHandler<AppLayoutProps.SplitPanelPreferences>;\n}\n\nexport namespace AppLayoutProps {\n  export type ContentType = 'default' | 'form' | 'table' | 'cards' | 'wizard' | 'dashboard';\n\n  export interface Ref {\n    /**\n     * Manually closes the navigation drawer if it is necessary for the current\n     * viewport size.\n     */\n    closeNavigationIfNecessary(): void;\n\n    /**\n     * Opens the tools panel if it is not already open. Note that it is preferable\n     * to control the state by listening to `toolsChange` and providing `toolsOpen`.\n     */\n    openTools(): void;\n\n    /**\n     * Focuses the tools panel if it is open. Use this to focus the tools panel\n     * after changing the content, for example when clicking on an 'info' link while\n     * the panel is already open.\n     */\n    focusToolsClose(): void;\n  }\n\n  export interface Labels {\n    notifications?: string;\n\n    navigation?: string;\n    navigationToggle?: string;\n    navigationClose?: string;\n\n    tools?: string;\n    toolsToggle?: string;\n    toolsClose?: string;\n  }\n\n  export interface ChangeDetail {\n    open: boolean;\n  }\n\n  export interface SplitPanelResizeDetail {\n    size: number;\n  }\n\n  export interface SplitPanelPreferences {\n    position: 'side' | 'bottom';\n  }\n  // Duplicated the positions because using this definition in SplitPanelPreferences would display\n  // 'AppLayoutProps.SplitPanelPosition' on the API docs instead of the string values.\n  export type SplitPanelPosition = 'side' | 'bottom';\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface AppLayoutProps extends BaseComponentProps {\n  /**\n   * Determines the default behavior of the component based on some predefined page layouts.\n   * Individual properties will always take precedence over the default coming from the content type.\n   */\n  contentType?: AppLayoutProps.ContentType;\n\n  /**\n   * If `true`, disables outer paddings for the content slot.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Activates a backwards-compatibility mode for applications with non-fixed headers and footers.\n   * @deprecated This layout is being phased out and may miss some features.\n   */\n  disableBodyScroll?: boolean;\n\n  /**\n   * State of the navigation drawer.\n   */\n  navigationOpen?: boolean;\n\n  /**\n   * Navigation drawer width in pixels.\n   */\n  navigationWidth?: number;\n\n  /**\n   * If `true`, the navigation drawer is not displayed at all.\n   */\n  navigationHide?: boolean;\n\n  /**\n   * State of the tools drawer.\n   */\n  toolsOpen?: boolean;\n\n  /**\n   * If `true`, the tools drawer is not displayed at all.\n   */\n  toolsHide?: boolean;\n\n  /**\n   * Tools drawer width in pixels.\n   */\n  toolsWidth?: number;\n\n  /**\n   * Maximum main content panel width in pixels.\n   *\n   * If set to `Number.MAX_VALUE`, the main content panel will occupy the full available width.\n   */\n  maxContentWidth?: number;\n\n  /**\n   * Minimum main content panel width in pixels.\n   */\n  minContentWidth?: number;\n\n  /**\n   * If true, the notification slot is rendered above the scrollable\n   * content area so it is always visible.\n   *\n   * Note that sticky notifications are not supported in Internet Explorer.\n   */\n  stickyNotifications?: boolean;\n\n  /**\n   * CSS selector for the application header.\n   */\n  headerSelector?: string;\n\n  /**\n   * CSS selector for the application footer.\n   */\n  footerSelector?: string;\n\n  /**\n   * Aria labels for the drawer operating buttons. Use this property to ensure accessibility.\n   *\n   * * `navigation` (string) - Label for the landmark that wraps the navigation drawer.\n   * * `navigationClose` (string) - Label for the button that closes the navigation drawer.\n   * * `navigationToggle` (string) - Label for the button that opens the navigation drawer.\n   * * `notification` (string) - Label for the region that contains notification messages.\n   * * `tools` (string) - Label for the landmark that wraps the tools drawer.\n   * * `toolsClose` (string) - Label for the button that closes the tools drawer.\n   * * `toolsToggle` (string) - Label for the button that opens the tools drawer.\n   *\n   * Example:\n   * ```\n   * {\n   *   navigation: \"Navigation drawer\",\n   *   navigationClose: \"Close navigation drawer\",\n   *   navigationToggle: \"Open navigation drawer\",\n   *   notifications: \"Notifications\",\n   *   tools: \"Help panel\",\n   *   toolsClose: \"Close help panel\",\n   *   toolsToggle: \"Open help panel\"\n   * }\n   * ```\n   * @i18n\n   */\n  ariaLabels?: AppLayoutProps.Labels;\n\n  /**\n   * Navigation drawer.\n   */\n  navigation?: React.ReactNode;\n\n  /**\n   * Top area of the page content.\n   * @deprecated Replaced by the `header` slot of the [content layout](/components/content-layout/) component.\n   * @visualrefresh\n   */\n  contentHeader?: React.ReactNode;\n\n  /**\n   * Disables overlap between `contentHeader` and `content` slots.\n   * @deprecated Replaced by the `disableOverlap` property of the [content layout](/components/content-layout/) component.\n   * @visualrefresh\n   */\n  disableContentHeaderOverlap?: boolean;\n\n  /**\n   * Main content.\n   */\n  content?: React.ReactNode;\n\n  /**\n   * Tools drawer.\n   */\n  tools?: React.ReactNode;\n\n  /**\n   * Displayed on top of the main content in the scrollable area.\n   *\n   * Conceived to contain notifications (flash messages).\n   */\n  notifications?: React.ReactNode;\n\n  /**\n   * Use this slot to add the [breadcrumb group component](/components/breadcrumb-group/) to the app layout.\n   */\n  breadcrumbs?: React.ReactNode;\n\n  /**\n   * Fired when the navigation drawer is toggled.\n   */\n  onNavigationChange?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n\n  /**\n   * Fired when the tools drawer is toggled.\n   */\n  onToolsChange?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n\n  /**\n   * Use this slot to add the [split panel component](/components/split-panel/) to the app layout.\n   *\n   * Note: If provided, this property should be set to `null` or `undefined` if a split panel should not be rendered.\n   */\n  splitPanel?: React.ReactNode;\n\n  /**\n   * The size of the split panel in pixels.\n   */\n  splitPanelSize?: number;\n\n  /**\n   * State of the split panel.\n   */\n  splitPanelOpen?: boolean;\n  /**\n   * Controls the split panel preferences.\n   *\n   * By default, the preference is `{ position: 'bottom' }`\n   */\n  splitPanelPreferences?: AppLayoutProps.SplitPanelPreferences;\n  /**\n   * Fired when the split panel is resized.\n   */\n  onSplitPanelResize?: NonCancelableEventHandler<AppLayoutProps.SplitPanelResizeDetail>;\n  /**\n   * Fired when the split panel is toggled.\n   */\n  onSplitPanelToggle?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n  /**\n   * Fired when the split panel preferences change.\n   */\n  onSplitPanelPreferencesChange?: NonCancelableEventHandler<AppLayoutProps.SplitPanelPreferences>;\n}\n\nexport namespace AppLayoutProps {\n  export type ContentType = 'default' | 'form' | 'table' | 'cards' | 'wizard' | 'dashboard';\n\n  export interface Ref {\n    /**\n     * Manually closes the navigation drawer if it is necessary for the current\n     * viewport size.\n     */\n    closeNavigationIfNecessary(): void;\n\n    /**\n     * Opens the tools panel if it is not already open. Note that it is preferable\n     * to control the state by listening to `toolsChange` and providing `toolsOpen`.\n     */\n    openTools(): void;\n\n    /**\n     * Focuses the tools panel if it is open. Use this to focus the tools panel\n     * after changing the content, for example when clicking on an 'info' link while\n     * the panel is already open.\n     */\n    focusToolsClose(): void;\n  }\n\n  export interface Labels {\n    notifications?: string;\n\n    navigation?: string;\n    navigationToggle?: string;\n    navigationClose?: string;\n\n    tools?: string;\n    toolsToggle?: string;\n    toolsClose?: string;\n  }\n\n  export interface ChangeDetail {\n    open: boolean;\n  }\n\n  export interface SplitPanelResizeDetail {\n    size: number;\n  }\n\n  export interface SplitPanelPreferences {\n    position: 'side' | 'bottom';\n  }\n  // Duplicated the positions because using this definition in SplitPanelPreferences would display\n  // 'AppLayoutProps.SplitPanelPosition' on the API docs instead of the string values.\n  export type SplitPanelPosition = 'side' | 'bottom';\n}\n"]}

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

@@ -1,8 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "notifications": "awsui_notifications_1hmm4_14suh_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_14suh_10",
-  "no-content-paddings": "awsui_no-content-paddings_1hmm4_14suh_25"
+  "notifications": "awsui_notifications_1hmm4_1trtz_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1trtz_10",
+  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1trtz_25"
 };