@cloudscape-design/components-themeable 3.0.770 → 3.0.772

package/lib/internal/template/app-layout/drawer/styles.scoped.css

@@ -172,7 +172,7 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* Style used for links in slots/components that are text heavy, to help links stand out among 
+/* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
@@ -186,88 +186,88 @@ 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_toggle_1uo6m_io21l_189:not(#\9) {
+.awsui_toggle_1uo6m_ciexf_189:not(#\9) {
   box-sizing: border-box;
   padding-block: var(--space-xxs-9rrxti, 4px);
   padding-inline: 7px;
 }
 
-.awsui_drawer-triggers_1uo6m_io21l_195:not(#\9) {
+.awsui_drawer-triggers_1uo6m_ciexf_195:not(#\9) {
   box-sizing: border-box;
 }
 
-.awsui_drawer_1uo6m_io21l_195:not(#\9) {
+.awsui_drawer_1uo6m_ciexf_195:not(#\9) {
   flex-shrink: 0;
   position: relative;
   word-wrap: break-word;
   box-shadow: var(--shadow-panel-eyw753, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
 }
-.awsui_drawer_1uo6m_io21l_195:not(#\9):not(.awsui_drawer-mobile_1uo6m_io21l_205) {
+.awsui_drawer_1uo6m_ciexf_195:not(#\9):not(.awsui_drawer-mobile_1uo6m_ciexf_205) {
   z-index: 830;
 }
-.awsui_drawer-closed_1uo6m_io21l_208:not(#\9) {
+.awsui_drawer-closed_1uo6m_ciexf_208:not(#\9) {
   min-inline-size: 40px;
 }
-.awsui_drawer-closed_1uo6m_io21l_208.awsui_drawer-mobile_1uo6m_io21l_205:not(#\9) {
+.awsui_drawer-closed_1uo6m_ciexf_208.awsui_drawer-mobile_1uo6m_ciexf_205:not(#\9) {
   display: none;
 }
 
-.awsui_drawer-content_1uo6m_io21l_215:not(#\9) {
+.awsui_drawer-content_1uo6m_ciexf_215:not(#\9) {
   position: fixed;
   overflow: auto;
   background-color: var(--color-background-layout-panel-content-ml98gw, #ffffff);
 }
-.awsui_drawer-mobile_1uo6m_io21l_205 > .awsui_drawer-content_1uo6m_io21l_215:not(#\9) {
+.awsui_drawer-mobile_1uo6m_ciexf_205 > .awsui_drawer-content_1uo6m_ciexf_215:not(#\9) {
   z-index: 1001;
   inset: 0;
 }
-.awsui_drawer-closed_1uo6m_io21l_208 > .awsui_drawer-content_1uo6m_io21l_215:not(#\9) {
+.awsui_drawer-closed_1uo6m_ciexf_208 > .awsui_drawer-content_1uo6m_ciexf_215:not(#\9) {
   inline-size: 40px;
 }
-.awsui_drawer-closed_1uo6m_io21l_208 > .awsui_drawer-content_1uo6m_io21l_215.awsui_drawer-content-clickable_1uo6m_io21l_227:not(#\9) {
+.awsui_drawer-closed_1uo6m_ciexf_208 > .awsui_drawer-content_1uo6m_ciexf_215.awsui_drawer-content-clickable_1uo6m_ciexf_227:not(#\9) {
   cursor: pointer;
   color: var(--color-text-interactive-default-dt26aj, #545b64);
 }
-.awsui_drawer-closed_1uo6m_io21l_208 > .awsui_drawer-content_1uo6m_io21l_215.awsui_drawer-content-clickable_1uo6m_io21l_227:not(#\9):hover {
+.awsui_drawer-closed_1uo6m_ciexf_208 > .awsui_drawer-content_1uo6m_ciexf_215.awsui_drawer-content-clickable_1uo6m_ciexf_227:not(#\9):hover {
   background: var(--color-background-layout-panel-hover-58t7r5, #eaeded);
 }
-.awsui_drawer-content_1uo6m_io21l_215 > [aria-hidden=true]:not(#\9) {
+.awsui_drawer-content_1uo6m_ciexf_215 > [aria-hidden=true]:not(#\9) {
   display: none;
 }
-.awsui_drawer-content_1uo6m_io21l_215 > .awsui_drawer-resize-content_1uo6m_io21l_237:not(#\9) {
+.awsui_drawer-content_1uo6m_ciexf_215 > .awsui_drawer-resize-content_1uo6m_ciexf_237:not(#\9) {
   overflow: auto;
   block-size: 100%;
   position: relative;
 }
 
-.awsui_drawer-triggers-wrapper_1uo6m_io21l_243:not(#\9) {
+.awsui_drawer-triggers-wrapper_1uo6m_ciexf_243:not(#\9) {
   display: flex;
   flex-direction: column;
   text-align: center;
   align-items: stretch;
 }
 
-.awsui_drawer-trigger_1uo6m_io21l_195:not(#\9) {
+.awsui_drawer-trigger_1uo6m_ciexf_195:not(#\9) {
   padding-block: var(--space-xxs-9rrxti, 4px);
   padding-inline: 7px;
   cursor: pointer;
   color: var(--color-text-interactive-default-dt26aj, #545b64);
 }
-.awsui_drawer-trigger_1uo6m_io21l_195:not(#\9):not(:first-child) {
+.awsui_drawer-trigger_1uo6m_ciexf_195:not(#\9):not(:first-child) {
   border-block-start: 1px solid var(--color-border-layout-5x3d89, #d5dbdb);
 }
-.awsui_drawer-trigger_1uo6m_io21l_195:not(#\9):hover {
+.awsui_drawer-trigger_1uo6m_ciexf_195:not(#\9):hover {
   color: var(--color-text-layout-toggle-hover-j81kcb, #0073bb);
 }
-.awsui_drawer-trigger-active_1uo6m_io21l_262:not(#\9), .awsui_drawer-trigger-active_1uo6m_io21l_262:not(#\9):hover {
+.awsui_drawer-trigger-active_1uo6m_ciexf_262:not(#\9), .awsui_drawer-trigger-active_1uo6m_ciexf_262:not(#\9):hover {
   background-color: var(--color-background-layout-toggle-selected-default-rmibh3, #0073bb);
   color: var(--color-text-layout-toggle-active-zmvv31, #ffffff);
 }
-.awsui_drawer-content-clickable_1uo6m_io21l_227 > .awsui_drawer-triggers-wrapper_1uo6m_io21l_243 > .awsui_drawer-trigger_1uo6m_io21l_195:not(#\9):hover {
+.awsui_drawer-content-clickable_1uo6m_ciexf_227 > .awsui_drawer-triggers-wrapper_1uo6m_ciexf_243 > .awsui_drawer-trigger_1uo6m_ciexf_195:not(#\9):hover {
   color: var(--color-text-interactive-default-dt26aj, #545b64);
 }
 
-.awsui_resize-handle-wrapper_1uo6m_io21l_270:not(#\9) {
+.awsui_resize-handle-wrapper_1uo6m_ciexf_270:not(#\9) {
   position: absolute;
   inset-inline-start: 0;
   inset-block-start: 0;
@@ -277,6 +277,6 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   z-index: 1;
 }
 
-.awsui_hide_1uo6m_io21l_280:not(#\9) {
+.awsui_hide_1uo6m_ciexf_280:not(#\9) {
   display: none;
 }

package/lib/internal/template/app-layout/drawer/styles.selectors.js

@@ -2,18 +2,18 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "toggle": "awsui_toggle_1uo6m_io21l_189",
-  "drawer-triggers": "awsui_drawer-triggers_1uo6m_io21l_195",
-  "drawer": "awsui_drawer_1uo6m_io21l_195",
-  "drawer-mobile": "awsui_drawer-mobile_1uo6m_io21l_205",
-  "drawer-closed": "awsui_drawer-closed_1uo6m_io21l_208",
-  "drawer-content": "awsui_drawer-content_1uo6m_io21l_215",
-  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_io21l_227",
-  "drawer-resize-content": "awsui_drawer-resize-content_1uo6m_io21l_237",
-  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_io21l_243",
-  "drawer-trigger": "awsui_drawer-trigger_1uo6m_io21l_195",
-  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_io21l_262",
-  "resize-handle-wrapper": "awsui_resize-handle-wrapper_1uo6m_io21l_270",
-  "hide": "awsui_hide_1uo6m_io21l_280"
+  "toggle": "awsui_toggle_1uo6m_ciexf_189",
+  "drawer-triggers": "awsui_drawer-triggers_1uo6m_ciexf_195",
+  "drawer": "awsui_drawer_1uo6m_ciexf_195",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_ciexf_205",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_ciexf_208",
+  "drawer-content": "awsui_drawer-content_1uo6m_ciexf_215",
+  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_ciexf_227",
+  "drawer-resize-content": "awsui_drawer-resize-content_1uo6m_ciexf_237",
+  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_ciexf_243",
+  "drawer-trigger": "awsui_drawer-trigger_1uo6m_ciexf_195",
+  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_ciexf_262",
+  "resize-handle-wrapper": "awsui_resize-handle-wrapper_1uo6m_ciexf_270",
+  "hide": "awsui_hide_1uo6m_ciexf_280"
 };
   

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

@@ -36,7 +36,7 @@ export interface AppLayoutProps extends BaseComponentProps {
      * - `iconSvg` (React.ReactNode) - (Optional) Specifies the SVG of a custom icon. For more information, see [SVG icon guidelines](/components/icon/?tabId=api#slots)
      *
      * #### DrawerAriaLabels
-     * - `drawerName` (string) - Label for the drawer itself.
+     * - `drawerName` (string) - Label for the drawer itself, and for the drawer trigger button tooltip text.
      * - `closeButton` (string) - (Optional) Label for the close button.
      * - `triggerButton` (string) - (Optional) Label for the trigger button.
      * - `resizeHandle` (string) - (Optional) Label for the resize handle.

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/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';\n\nimport { IconProps } from '../icon/interfaces';\nimport { FlowType } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { SomeRequired } from '../internal/types';\n\nexport interface AppLayoutProps extends BaseComponentProps {\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n   * * `flowType` -  Identifies the type of flow represented by the component.\n   * **Note:** This API is currently experimental.\n   * @analytics\n   */\n  analyticsMetadata?: AppLayoutProps.AnalyticsMetadata;\n\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   * Drawers property. If you set both `drawers` and `tools`, `drawers` will take precedence.\n\n   * Each Drawer is an item in the drawers wrapper with the following properties:\n   * * id (string) - the id of the drawer.\n   * * content (React.ReactNode) - the content in the drawer.\n   * * trigger (DrawerTrigger) - the button that opens and closes the active drawer.\n   * * ariaLabels (DrawerAriaLabels) - the labels for the interactive elements of the drawer.\n   * * badge (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n   * * resizable (boolean) - if the drawer is resizable or not.\n   * * defaultSize (number) - starting size of the drawer. if not set, defaults to 290.\n   * * onResize (({ size: number }) => void) - Fired when the active drawer is resized.\n   *\n   * #### DrawerTrigger\n   * - `iconName` (IconProps.Name) - (Optional) Specifies the icon to be displayed.\n   * - `iconSvg` (React.ReactNode) - (Optional) Specifies the SVG of a custom icon. For more information, see [SVG icon guidelines](/components/icon/?tabId=api#slots)\n   *\n   * #### DrawerAriaLabels\n   * - `drawerName` (string) - Label for the drawer itself.\n   * - `closeButton` (string) - (Optional) Label for the close button.\n   * - `triggerButton` (string) - (Optional) Label for the trigger button.\n   * - `resizeHandle` (string) - (Optional) Label for the resize handle.\n   */\n  drawers?: Array<AppLayoutProps.Drawer>;\n\n  /**\n   * The active drawer id. If you want to clear the active drawer, use `null`.\n   */\n  activeDrawerId?: string | null;\n\n  /**\n   * Fired when the active drawer is toggled.\n   */\n  onDrawerChange?: NonCancelableEventHandler<AppLayoutProps.DrawerChangeDetail>;\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  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   * * `drawers` (string) - Label for the landmark that wraps the active drawer.\n   * * `drawersOverflow` (string) - Label for the ellipsis button with any overflow drawers.\n   * * `drawersOverflowWithBadge` (string) - Label for the ellipsis button with any overflow drawers, with a badge.\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   *   drawers: \"Drawers\",\n   *   drawersOverflow: \"Overflow drawers\",\n   *   drawersOverflowWithBadge: \"Overflow drawers (Unread notifications)\"\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   * Determines the visual treatment for the breadcrumbs and notifications slots. Specifically:\n   * * `default` - Does not apply any visual treatment.\n   * * `high-contrast` - Applies high-contrast to both slots. Use in conjunction with `headerVariant=\"high-contrast\"` in ContentLayout.\n   * @visualrefresh\n   */\n  headerVariant?: 'default' | 'high-contrast';\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 interface AnalyticsMetadata {\n    instanceIdentifier?: string;\n    flowType?: FlowType;\n  }\n\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     * Focuses the active drawer. Use this to focus the active drawer after opening it programmatically.\n     */\n    focusActiveDrawer(): void;\n\n    /**\n     * Focuses the split panel if it is open.\n     */\n    focusSplitPanel(): void;\n  }\n\n  export interface Drawer {\n    id: string;\n    content: React.ReactNode;\n    trigger: {\n      iconName?: IconProps.Name;\n      iconSvg?: React.ReactNode;\n    };\n    ariaLabels: DrawerAriaLabels;\n    badge?: boolean;\n    resizable?: boolean;\n    defaultSize?: number;\n    onResize?: NonCancelableEventHandler<{ size: number }>;\n  }\n\n  export interface DrawerAriaLabels {\n    drawerName: string;\n    closeButton?: string;\n    triggerButton?: string;\n    resizeHandle?: string;\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    drawers?: string;\n    drawersOverflow?: string;\n    drawersOverflowWithBadge?: 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  export interface DrawerChangeDetail {\n    activeDrawerId: string | null;\n  }\n}\n\nexport type AppLayoutPropsWithDefaults = SomeRequired<\n  Omit<AppLayoutProps, 'headerSelector' | 'footerSelector'>,\n  'contentType' | 'navigationWidth' | 'toolsWidth' | 'minContentWidth' | 'navigationOpen' | 'onNavigationChange'\n> & {\n  placement: {\n    insetBlockStart: number;\n    insetBlockEnd: number;\n    insetInlineStart: number;\n    insetInlineEnd: number;\n    inlineSize: number;\n  };\n};\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/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';\n\nimport { IconProps } from '../icon/interfaces';\nimport { FlowType } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { SomeRequired } from '../internal/types';\n\nexport interface AppLayoutProps extends BaseComponentProps {\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n   * * `flowType` -  Identifies the type of flow represented by the component.\n   * **Note:** This API is currently experimental.\n   * @analytics\n   */\n  analyticsMetadata?: AppLayoutProps.AnalyticsMetadata;\n\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   * Drawers property. If you set both `drawers` and `tools`, `drawers` will take precedence.\n\n   * Each Drawer is an item in the drawers wrapper with the following properties:\n   * * id (string) - the id of the drawer.\n   * * content (React.ReactNode) - the content in the drawer.\n   * * trigger (DrawerTrigger) - the button that opens and closes the active drawer.\n   * * ariaLabels (DrawerAriaLabels) - the labels for the interactive elements of the drawer.\n   * * badge (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n   * * resizable (boolean) - if the drawer is resizable or not.\n   * * defaultSize (number) - starting size of the drawer. if not set, defaults to 290.\n   * * onResize (({ size: number }) => void) - Fired when the active drawer is resized.\n   *\n   * #### DrawerTrigger\n   * - `iconName` (IconProps.Name) - (Optional) Specifies the icon to be displayed.\n   * - `iconSvg` (React.ReactNode) - (Optional) Specifies the SVG of a custom icon. For more information, see [SVG icon guidelines](/components/icon/?tabId=api#slots)\n   *\n   * #### DrawerAriaLabels\n   * - `drawerName` (string) - Label for the drawer itself, and for the drawer trigger button tooltip text.\n   * - `closeButton` (string) - (Optional) Label for the close button.\n   * - `triggerButton` (string) - (Optional) Label for the trigger button.\n   * - `resizeHandle` (string) - (Optional) Label for the resize handle.\n   */\n  drawers?: Array<AppLayoutProps.Drawer>;\n\n  /**\n   * The active drawer id. If you want to clear the active drawer, use `null`.\n   */\n  activeDrawerId?: string | null;\n\n  /**\n   * Fired when the active drawer is toggled.\n   */\n  onDrawerChange?: NonCancelableEventHandler<AppLayoutProps.DrawerChangeDetail>;\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  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   * * `drawers` (string) - Label for the landmark that wraps the active drawer.\n   * * `drawersOverflow` (string) - Label for the ellipsis button with any overflow drawers.\n   * * `drawersOverflowWithBadge` (string) - Label for the ellipsis button with any overflow drawers, with a badge.\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   *   drawers: \"Drawers\",\n   *   drawersOverflow: \"Overflow drawers\",\n   *   drawersOverflowWithBadge: \"Overflow drawers (Unread notifications)\"\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   * Determines the visual treatment for the breadcrumbs and notifications slots. Specifically:\n   * * `default` - Does not apply any visual treatment.\n   * * `high-contrast` - Applies high-contrast to both slots. Use in conjunction with `headerVariant=\"high-contrast\"` in ContentLayout.\n   * @visualrefresh\n   */\n  headerVariant?: 'default' | 'high-contrast';\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 interface AnalyticsMetadata {\n    instanceIdentifier?: string;\n    flowType?: FlowType;\n  }\n\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     * Focuses the active drawer. Use this to focus the active drawer after opening it programmatically.\n     */\n    focusActiveDrawer(): void;\n\n    /**\n     * Focuses the split panel if it is open.\n     */\n    focusSplitPanel(): void;\n  }\n\n  export interface Drawer {\n    id: string;\n    content: React.ReactNode;\n    trigger: {\n      iconName?: IconProps.Name;\n      iconSvg?: React.ReactNode;\n    };\n    ariaLabels: DrawerAriaLabels;\n    badge?: boolean;\n    resizable?: boolean;\n    defaultSize?: number;\n    onResize?: NonCancelableEventHandler<{ size: number }>;\n  }\n\n  export interface DrawerAriaLabels {\n    drawerName: string;\n    closeButton?: string;\n    triggerButton?: string;\n    resizeHandle?: string;\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    drawers?: string;\n    drawersOverflow?: string;\n    drawersOverflowWithBadge?: 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  export interface DrawerChangeDetail {\n    activeDrawerId: string | null;\n  }\n}\n\nexport type AppLayoutPropsWithDefaults = SomeRequired<\n  Omit<AppLayoutProps, 'headerSelector' | 'footerSelector'>,\n  'contentType' | 'navigationWidth' | 'toolsWidth' | 'minContentWidth' | 'navigationOpen' | 'onNavigationChange'\n> & {\n  placement: {\n    insetBlockStart: number;\n    insetBlockEnd: number;\n    insetInlineStart: number;\n    insetInlineEnd: number;\n    inlineSize: number;\n  };\n};\n"]}

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

@@ -1,13 +1,13 @@
 
     import './styles.scoped.css';
     export default {
-  "block-body-scroll": "awsui_block-body-scroll_19d8l_iahtg_149",
-  "mobile-bar": "awsui_mobile-bar_19d8l_iahtg_153",
-  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_iahtg_166",
-  "mobile-toggle": "awsui_mobile-toggle_19d8l_iahtg_173",
-  "mobile-toggle-type-navigation": "awsui_mobile-toggle-type-navigation_19d8l_iahtg_182",
-  "mobile-toggle-type-tools": "awsui_mobile-toggle-type-tools_19d8l_iahtg_185",
-  "mobile-toggle-type-drawer": "awsui_mobile-toggle-type-drawer_19d8l_iahtg_185",
-  "drawers-container": "awsui_drawers-container_19d8l_iahtg_192"
+  "block-body-scroll": "awsui_block-body-scroll_19d8l_rnu3n_149",
+  "mobile-bar": "awsui_mobile-bar_19d8l_rnu3n_153",
+  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_rnu3n_166",
+  "mobile-toggle": "awsui_mobile-toggle_19d8l_rnu3n_173",
+  "mobile-toggle-type-navigation": "awsui_mobile-toggle-type-navigation_19d8l_rnu3n_182",
+  "mobile-toggle-type-tools": "awsui_mobile-toggle-type-tools_19d8l_rnu3n_185",
+  "mobile-toggle-type-drawer": "awsui_mobile-toggle-type-drawer_19d8l_rnu3n_185",
+  "drawers-container": "awsui_drawers-container_19d8l_rnu3n_192"
 };
   

package/lib/internal/template/app-layout/mobile-toolbar/styles.scoped.css

@@ -136,7 +136,7 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* Style used for links in slots/components that are text heavy, to help links stand out among 
+/* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
@@ -146,11 +146,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_block-body-scroll_19d8l_iahtg_149:not(#\9) {
+.awsui_block-body-scroll_19d8l_rnu3n_149:not(#\9) {
   overflow: hidden;
 }
 
-.awsui_mobile-bar_19d8l_iahtg_153:not(#\9) {
+.awsui_mobile-bar_19d8l_rnu3n_153:not(#\9) {
   position: sticky;
   display: flex;
   align-items: center;
@@ -163,14 +163,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   block-size: calc(2 * var(--space-m-kpg8id, 16px) + var(--space-scaled-xs-x91h81, 8px));
 }
 
-.awsui_mobile-bar-breadcrumbs_19d8l_iahtg_166:not(#\9) {
+.awsui_mobile-bar-breadcrumbs_19d8l_rnu3n_166:not(#\9) {
   min-inline-size: 0;
   flex: 1;
   margin-inline-start: var(--space-m-kpg8id, 16px);
   margin-inline-end: var(--space-m-kpg8id, 16px);
 }
 
-.awsui_mobile-toggle_19d8l_iahtg_173:not(#\9) {
+.awsui_mobile-toggle_19d8l_rnu3n_173:not(#\9) {
   box-sizing: border-box;
   cursor: pointer;
   z-index: 1;
@@ -179,17 +179,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inline-size: 40px;
   color: var(--color-text-interactive-default-dt26aj, #545b64);
 }
-.awsui_mobile-toggle-type-navigation_19d8l_iahtg_182:not(#\9) {
+.awsui_mobile-toggle-type-navigation_19d8l_rnu3n_182:not(#\9) {
   border-inline-end: 1px solid var(--color-border-layout-5x3d89, #d5dbdb);
 }
-.awsui_mobile-toggle-type-tools_19d8l_iahtg_185:not(#\9), .awsui_mobile-toggle-type-drawer_19d8l_iahtg_185:not(#\9) {
+.awsui_mobile-toggle-type-tools_19d8l_rnu3n_185:not(#\9), .awsui_mobile-toggle-type-drawer_19d8l_rnu3n_185:not(#\9) {
   border-inline-start: 1px solid var(--color-border-layout-5x3d89, #d5dbdb);
 }
-.awsui_mobile-toggle_19d8l_iahtg_173:not(#\9):hover {
+.awsui_mobile-toggle_19d8l_rnu3n_173:not(#\9):hover {
   background: var(--color-background-layout-panel-hover-58t7r5, #eaeded);
 }
 
-.awsui_drawers-container_19d8l_iahtg_192:not(#\9) {
+.awsui_drawers-container_19d8l_rnu3n_192:not(#\9) {
   display: flex;
   align-items: stretch;
 }

package/lib/internal/template/app-layout/mobile-toolbar/styles.selectors.js

@@ -2,13 +2,13 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "block-body-scroll": "awsui_block-body-scroll_19d8l_iahtg_149",
-  "mobile-bar": "awsui_mobile-bar_19d8l_iahtg_153",
-  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_iahtg_166",
-  "mobile-toggle": "awsui_mobile-toggle_19d8l_iahtg_173",
-  "mobile-toggle-type-navigation": "awsui_mobile-toggle-type-navigation_19d8l_iahtg_182",
-  "mobile-toggle-type-tools": "awsui_mobile-toggle-type-tools_19d8l_iahtg_185",
-  "mobile-toggle-type-drawer": "awsui_mobile-toggle-type-drawer_19d8l_iahtg_185",
-  "drawers-container": "awsui_drawers-container_19d8l_iahtg_192"
+  "block-body-scroll": "awsui_block-body-scroll_19d8l_rnu3n_149",
+  "mobile-bar": "awsui_mobile-bar_19d8l_rnu3n_153",
+  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_rnu3n_166",
+  "mobile-toggle": "awsui_mobile-toggle_19d8l_rnu3n_173",
+  "mobile-toggle-type-navigation": "awsui_mobile-toggle-type-navigation_19d8l_rnu3n_182",
+  "mobile-toggle-type-tools": "awsui_mobile-toggle-type-tools_19d8l_rnu3n_185",
+  "mobile-toggle-type-drawer": "awsui_mobile-toggle-type-drawer_19d8l_rnu3n_185",
+  "drawers-container": "awsui_drawers-container_19d8l_rnu3n_192"
 };
   

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

@@ -1,9 +1,9 @@
 
     import './styles.scoped.css';
     export default {
-  "with-motion": "awsui_with-motion_b18tp_aqyhj_142",
-  "resize-active": "awsui_resize-active_b18tp_aqyhj_161",
-  "resize-side": "awsui_resize-side_b18tp_aqyhj_171",
-  "resize-bottom": "awsui_resize-bottom_b18tp_aqyhj_174"
+  "with-motion": "awsui_with-motion_b18tp_aiswy_142",
+  "resize-active": "awsui_resize-active_b18tp_aiswy_161",
+  "resize-side": "awsui_resize-side_b18tp_aiswy_171",
+  "resize-bottom": "awsui_resize-bottom_b18tp_aiswy_174"
 };
   

package/lib/internal/template/app-layout/resize/styles.scoped.css

@@ -136,43 +136,43 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* Style used for links in slots/components that are text heavy, to help links stand out among 
+/* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
 @media (min-width: 689px) {
-  .awsui_with-motion_b18tp_aqyhj_142:not(#\9) {
+  .awsui_with-motion_b18tp_aiswy_142:not(#\9) {
     transition: var(--motion-duration-refresh-only-medium-i6gkfs, 0ms);
     transition-property: border-color, opacity, block-size, inline-size, inset-block-start;
   }
 }
 @media (min-width: 689px) and (prefers-reduced-motion: reduce) {
-  .awsui_with-motion_b18tp_aqyhj_142:not(#\9) {
+  .awsui_with-motion_b18tp_aiswy_142:not(#\9) {
     animation: none;
     transition: none;
   }
 }
 @media (min-width: 689px) {
-  .awsui-motion-disabled .awsui_with-motion_b18tp_aqyhj_142:not(#\9), .awsui-mode-entering .awsui_with-motion_b18tp_aqyhj_142:not(#\9) {
+  .awsui-motion-disabled .awsui_with-motion_b18tp_aiswy_142:not(#\9), .awsui-mode-entering .awsui_with-motion_b18tp_aiswy_142:not(#\9) {
     animation: none;
     transition: none;
   }
 }
 
 /* stylelint-disable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
-.awsui_resize-active_b18tp_aqyhj_161 *:not(#\9) {
+.awsui_resize-active_b18tp_aiswy_161 *:not(#\9) {
   -webkit-user-select: none;
           user-select: none;
 }
-.awsui_resize-active_b18tp_aqyhj_161 * .awsui_with-motion_b18tp_aqyhj_142:not(#\9) {
+.awsui_resize-active_b18tp_aiswy_161 * .awsui_with-motion_b18tp_aiswy_142:not(#\9) {
   transition: none;
   animation: none;
 }
-.awsui_resize-active_b18tp_aqyhj_161 iframe:not(#\9) {
+.awsui_resize-active_b18tp_aiswy_161 iframe:not(#\9) {
   pointer-events: none;
 }
-.awsui_resize-side_b18tp_aqyhj_171 *:not(#\9) {
+.awsui_resize-side_b18tp_aiswy_171 *:not(#\9) {
   cursor: ew-resize;
 }
-.awsui_resize-bottom_b18tp_aqyhj_174 *:not(#\9) {
+.awsui_resize-bottom_b18tp_aiswy_174 *:not(#\9) {
   cursor: ns-resize;
 }
 

package/lib/internal/template/app-layout/resize/styles.selectors.js

@@ -2,9 +2,9 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "with-motion": "awsui_with-motion_b18tp_aqyhj_142",
-  "resize-active": "awsui_resize-active_b18tp_aqyhj_161",
-  "resize-side": "awsui_resize-side_b18tp_aqyhj_171",
-  "resize-bottom": "awsui_resize-bottom_b18tp_aqyhj_174"
+  "with-motion": "awsui_with-motion_b18tp_aiswy_142",
+  "resize-active": "awsui_resize-active_b18tp_aiswy_161",
+  "resize-side": "awsui_resize-side_b18tp_aiswy_171",
+  "resize-bottom": "awsui_resize-bottom_b18tp_aiswy_174"
 };
   

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

@@ -1,7 +1,7 @@
 
     import './styles.scoped.css';
     export default {
-  "drawer-displayed": "awsui_drawer-displayed_1lh3u_1wzhb_145",
-  "drawer-content": "awsui_drawer-content_1lh3u_1wzhb_149"
+  "drawer-displayed": "awsui_drawer-displayed_1lh3u_1ok1c_145",
+  "drawer-content": "awsui_drawer-content_1lh3u_1ok1c_149"
 };
   

package/lib/internal/template/app-layout/split-panel/styles.scoped.css

@@ -140,13 +140,13 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* Style used for links in slots/components that are text heavy, to help links stand out among 
+/* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_drawer-displayed_1lh3u_1wzhb_145:not(#\9) {
+.awsui_drawer-displayed_1lh3u_1ok1c_145:not(#\9) {
   min-inline-size: 40px;
 }
 
-.awsui_drawer-content_1lh3u_1wzhb_149:not(#\9) {
+.awsui_drawer-content_1lh3u_1ok1c_149:not(#\9) {
   position: fixed;
   z-index: 830;
 }

package/lib/internal/template/app-layout/split-panel/styles.selectors.js

@@ -2,7 +2,7 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "drawer-displayed": "awsui_drawer-displayed_1lh3u_1wzhb_145",
-  "drawer-content": "awsui_drawer-content_1lh3u_1wzhb_149"
+  "drawer-displayed": "awsui_drawer-displayed_1lh3u_1ok1c_145",
+  "drawer-content": "awsui_drawer-content_1lh3u_1ok1c_149"
 };
   

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

@@ -1,17 +1,17 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_lm6vo_1utj9_149",
-  "root-no-scroll": "awsui_root-no-scroll_lm6vo_1utj9_156",
-  "layout": "awsui_layout_lm6vo_1utj9_161",
-  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_1utj9_167",
-  "layout-main": "awsui_layout-main_lm6vo_1utj9_171",
-  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_1utj9_177",
-  "unfocusable": "awsui_unfocusable_lm6vo_1utj9_182",
-  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_1utj9_186",
-  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_1utj9_191",
-  "content-wrapper": "awsui_content-wrapper_lm6vo_1utj9_195",
-  "content-overlapped": "awsui_content-overlapped_lm6vo_1utj9_199",
-  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_1utj9_203"
+  "root": "awsui_root_lm6vo_6yk4t_149",
+  "root-no-scroll": "awsui_root-no-scroll_lm6vo_6yk4t_156",
+  "layout": "awsui_layout_lm6vo_6yk4t_161",
+  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_6yk4t_167",
+  "layout-main": "awsui_layout-main_lm6vo_6yk4t_171",
+  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_6yk4t_177",
+  "unfocusable": "awsui_unfocusable_lm6vo_6yk4t_182",
+  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_6yk4t_186",
+  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_6yk4t_191",
+  "content-wrapper": "awsui_content-wrapper_lm6vo_6yk4t_195",
+  "content-overlapped": "awsui_content-overlapped_lm6vo_6yk4t_199",
+  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_6yk4t_203"
 };
   

package/lib/internal/template/app-layout/styles.scoped.css

@@ -136,7 +136,7 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* Style used for links in slots/components that are text heavy, to help links stand out among 
+/* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
@@ -146,60 +146,60 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_lm6vo_1utj9_149:not(#\9) {
+.awsui_root_lm6vo_6yk4t_149:not(#\9) {
   display: flex;
   flex-direction: column;
   position: relative;
   color: var(--color-text-body-default-ffdwgg, #16191f);
 }
 
-.awsui_root-no-scroll_lm6vo_1utj9_156:not(#\9) {
+.awsui_root-no-scroll_lm6vo_6yk4t_156:not(#\9) {
   position: relative;
   z-index: 1;
 }
 
-.awsui_layout_lm6vo_1utj9_161:not(#\9) {
+.awsui_layout_lm6vo_6yk4t_161:not(#\9) {
   flex: 1 1 auto;
   display: flex;
   align-items: stretch;
   background-color: var(--color-background-layout-main-td853a, #f2f3f3);
 }
-.awsui_layout-no-scroll_lm6vo_1utj9_167:not(#\9) {
+.awsui_layout-no-scroll_lm6vo_6yk4t_167:not(#\9) {
   overflow: hidden;
 }
 
-.awsui_layout-main_lm6vo_1utj9_171:not(#\9) {
+.awsui_layout-main_lm6vo_6yk4t_171:not(#\9) {
   flex: 1;
   min-inline-size: 0;
   background-color: var(--color-background-layout-main-td853a, #f2f3f3);
   position: relative;
 }
-.awsui_layout-main-scrollable_lm6vo_1utj9_177:not(#\9) {
+.awsui_layout-main-scrollable_lm6vo_6yk4t_177:not(#\9) {
   overflow: auto;
 }
 
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
-.awsui_unfocusable_lm6vo_1utj9_182 *:not(#\9) {
+.awsui_unfocusable_lm6vo_6yk4t_182 *:not(#\9) {
   visibility: hidden;
 }
 
-.awsui_breadcrumbs-desktop_lm6vo_1utj9_186:not(#\9) {
+.awsui_breadcrumbs-desktop_lm6vo_6yk4t_186:not(#\9) {
   padding-block-start: var(--space-scaled-m-er48cl, 16px);
   padding-block-end: var(--space-scaled-s-9q8n2q, 12px);
 }
 
-.awsui_content-header-wrapper_lm6vo_1utj9_191:not(#\9) {
+.awsui_content-header-wrapper_lm6vo_6yk4t_191:not(#\9) {
   padding-block-end: var(--space-content-header-padding-bottom-d3iv03, 16px);
 }
 
-.awsui_content-wrapper_lm6vo_1utj9_195:not(#\9) {
+.awsui_content-wrapper_lm6vo_6yk4t_195:not(#\9) {
   padding-block-end: var(--space-layout-content-bottom-ve4osc, 20px);
 }
 
-.awsui_content-overlapped_lm6vo_1utj9_199:not(#\9) {
+.awsui_content-overlapped_lm6vo_6yk4t_199:not(#\9) {
   margin-block-start: calc(-1 * var(--space-dark-header-overlap-distance-f6oo6u, 0px));
 }
 
-.awsui_content-extra-top-padding_lm6vo_1utj9_203:not(#\9) {
+.awsui_content-extra-top-padding_lm6vo_6yk4t_203:not(#\9) {
   padding-block-start: var(--space-scaled-m-er48cl, 16px);
 }

package/lib/internal/template/app-layout/styles.selectors.js

@@ -2,17 +2,17 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_lm6vo_1utj9_149",
-  "root-no-scroll": "awsui_root-no-scroll_lm6vo_1utj9_156",
-  "layout": "awsui_layout_lm6vo_1utj9_161",
-  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_1utj9_167",
-  "layout-main": "awsui_layout-main_lm6vo_1utj9_171",
-  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_1utj9_177",
-  "unfocusable": "awsui_unfocusable_lm6vo_1utj9_182",
-  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_1utj9_186",
-  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_1utj9_191",
-  "content-wrapper": "awsui_content-wrapper_lm6vo_1utj9_195",
-  "content-overlapped": "awsui_content-overlapped_lm6vo_1utj9_199",
-  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_1utj9_203"
+  "root": "awsui_root_lm6vo_6yk4t_149",
+  "root-no-scroll": "awsui_root-no-scroll_lm6vo_6yk4t_156",
+  "layout": "awsui_layout_lm6vo_6yk4t_161",
+  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_6yk4t_167",
+  "layout-main": "awsui_layout-main_lm6vo_6yk4t_171",
+  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_6yk4t_177",
+  "unfocusable": "awsui_unfocusable_lm6vo_6yk4t_182",
+  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_6yk4t_186",
+  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_6yk4t_191",
+  "content-wrapper": "awsui_content-wrapper_lm6vo_6yk4t_195",
+  "content-overlapped": "awsui_content-overlapped_lm6vo_6yk4t_199",
+  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_6yk4t_203"
 };
   

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

@@ -1,7 +1,7 @@
 
     import './styles.scoped.css';
     export default {
-  "toggle-button": "awsui_toggle-button_16w0h_981uv_181",
-  "close-button": "awsui_close-button_16w0h_981uv_216"
+  "toggle-button": "awsui_toggle-button_16w0h_1uyex_181",
+  "close-button": "awsui_close-button_16w0h_1uyex_216"
 };