@cloudscape-design/components 3.0.685 → 3.0.687

package/app-layout/visual-refresh/styles.selectors.js

@@ -2,87 +2,87 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "background": "awsui_background_hyvsj_gc2xf_97",
-  "scrolling-background": "awsui_scrolling-background_hyvsj_gc2xf_100",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_gc2xf_111",
-  "drawers-container": "awsui_drawers-container_hyvsj_gc2xf_124",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_gc2xf_135",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_gc2xf_156",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_gc2xf_161",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_gc2xf_202",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_gc2xf_212",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_gc2xf_217",
-  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_gc2xf_231",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_gc2xf_217",
-  "drawer": "awsui_drawer_hyvsj_gc2xf_124",
-  "drawer-content-container": "awsui_drawer-content-container_hyvsj_gc2xf_262",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_gc2xf_271",
-  "drawer-content": "awsui_drawer-content_hyvsj_gc2xf_262",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_gc2xf_279",
-  "drawer-slider": "awsui_drawer-slider_hyvsj_gc2xf_282",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_gc2xf_289",
-  "content": "awsui_content_hyvsj_gc2xf_315",
-  "layout": "awsui_layout_hyvsj_gc2xf_336",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_gc2xf_408",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_gc2xf_423",
-  "content-type-table": "awsui_content-type-table_hyvsj_gc2xf_437",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_gc2xf_437",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_gc2xf_443",
-  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_gc2xf_446",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_gc2xf_460",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_gc2xf_463",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_gc2xf_473",
-  "content-first-child-header": "awsui_content-first-child-header_hyvsj_gc2xf_476",
-  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_gc2xf_476",
-  "has-header": "awsui_has-header_hyvsj_gc2xf_476",
-  "content-first-child-main": "awsui_content-first-child-main_hyvsj_gc2xf_491",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_gc2xf_491",
-  "has-left-toggles-gutter": "awsui_has-left-toggles-gutter_hyvsj_gc2xf_511",
-  "has-right-toggles-gutter": "awsui_has-right-toggles-gutter_hyvsj_gc2xf_514",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_gc2xf_534",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_gc2xf_534",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_gc2xf_542",
-  "unfocusable": "awsui_unfocusable_hyvsj_gc2xf_547",
-  "container": "awsui_container_hyvsj_gc2xf_557",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_gc2xf_583",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_gc2xf_586",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_gc2xf_586",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_gc2xf_586",
-  "has-active-drawer": "awsui_has-active-drawer_hyvsj_gc2xf_586",
-  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_gc2xf_595",
-  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_gc2xf_612",
-  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_gc2xf_616",
-  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_gc2xf_620",
-  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_gc2xf_624",
-  "navigation-container": "awsui_navigation-container_hyvsj_gc2xf_633",
-  "show-navigation": "awsui_show-navigation_hyvsj_gc2xf_671",
-  "animating": "awsui_animating_hyvsj_gc2xf_694",
-  "showButtons": "awsui_showButtons_hyvsj_gc2xf_1",
-  "navigation": "awsui_navigation_hyvsj_gc2xf_633",
-  "openNavigation": "awsui_openNavigation_hyvsj_gc2xf_1",
-  "animated-content": "awsui_animated-content_hyvsj_gc2xf_756",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_gc2xf_765",
-  "notifications": "awsui_notifications_hyvsj_gc2xf_775",
-  "has-notification-content": "awsui_has-notification-content_hyvsj_gc2xf_780",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_gc2xf_784",
-  "high-contrast": "awsui_high-contrast_hyvsj_gc2xf_789",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_gc2xf_807",
-  "position-bottom": "awsui_position-bottom_hyvsj_gc2xf_854",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_gc2xf_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_gc2xf_883",
-  "position-side": "awsui_position-side_hyvsj_gc2xf_896",
-  "tools-container": "awsui_tools-container_hyvsj_gc2xf_918",
-  "tools": "awsui_tools_hyvsj_gc2xf_918",
-  "openTools": "awsui_openTools_hyvsj_gc2xf_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_gc2xf_1007",
-  "hide-tools": "awsui_hide-tools_hyvsj_gc2xf_1017",
-  "show-tools": "awsui_show-tools_hyvsj_gc2xf_1029",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_gc2xf_1007",
-  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_gc2xf_1112",
-  "trigger": "awsui_trigger_hyvsj_gc2xf_1112",
-  "selected": "awsui_selected_hyvsj_gc2xf_1190",
-  "badge": "awsui_badge_hyvsj_gc2xf_1210",
-  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_gc2xf_1214",
-  "dot": "awsui_dot_hyvsj_gc2xf_1225"
+  "background": "awsui_background_hyvsj_fae1z_97",
+  "scrolling-background": "awsui_scrolling-background_hyvsj_fae1z_100",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_fae1z_111",
+  "drawers-container": "awsui_drawers-container_hyvsj_fae1z_124",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_fae1z_135",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_fae1z_156",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_fae1z_161",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_fae1z_202",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_fae1z_212",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_fae1z_217",
+  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_fae1z_231",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_fae1z_217",
+  "drawer": "awsui_drawer_hyvsj_fae1z_124",
+  "drawer-content-container": "awsui_drawer-content-container_hyvsj_fae1z_262",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_fae1z_271",
+  "drawer-content": "awsui_drawer-content_hyvsj_fae1z_262",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_fae1z_279",
+  "drawer-slider": "awsui_drawer-slider_hyvsj_fae1z_282",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_fae1z_289",
+  "content": "awsui_content_hyvsj_fae1z_315",
+  "layout": "awsui_layout_hyvsj_fae1z_336",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_fae1z_408",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_fae1z_423",
+  "content-type-table": "awsui_content-type-table_hyvsj_fae1z_437",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_fae1z_437",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_fae1z_443",
+  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_fae1z_446",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_fae1z_460",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_fae1z_463",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_fae1z_473",
+  "content-first-child-header": "awsui_content-first-child-header_hyvsj_fae1z_476",
+  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_fae1z_476",
+  "has-header": "awsui_has-header_hyvsj_fae1z_476",
+  "content-first-child-main": "awsui_content-first-child-main_hyvsj_fae1z_491",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_fae1z_491",
+  "has-left-toggles-gutter": "awsui_has-left-toggles-gutter_hyvsj_fae1z_511",
+  "has-right-toggles-gutter": "awsui_has-right-toggles-gutter_hyvsj_fae1z_514",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_fae1z_534",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_fae1z_534",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_fae1z_542",
+  "unfocusable": "awsui_unfocusable_hyvsj_fae1z_547",
+  "container": "awsui_container_hyvsj_fae1z_557",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_fae1z_583",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_fae1z_586",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_fae1z_586",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_fae1z_586",
+  "has-active-drawer": "awsui_has-active-drawer_hyvsj_fae1z_586",
+  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_fae1z_595",
+  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_fae1z_612",
+  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_fae1z_616",
+  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_fae1z_620",
+  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_fae1z_624",
+  "navigation-container": "awsui_navigation-container_hyvsj_fae1z_633",
+  "show-navigation": "awsui_show-navigation_hyvsj_fae1z_671",
+  "animating": "awsui_animating_hyvsj_fae1z_694",
+  "showButtons": "awsui_showButtons_hyvsj_fae1z_1",
+  "navigation": "awsui_navigation_hyvsj_fae1z_633",
+  "openNavigation": "awsui_openNavigation_hyvsj_fae1z_1",
+  "animated-content": "awsui_animated-content_hyvsj_fae1z_756",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_fae1z_765",
+  "notifications": "awsui_notifications_hyvsj_fae1z_775",
+  "has-notification-content": "awsui_has-notification-content_hyvsj_fae1z_780",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_fae1z_784",
+  "high-contrast": "awsui_high-contrast_hyvsj_fae1z_789",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_fae1z_807",
+  "position-bottom": "awsui_position-bottom_hyvsj_fae1z_854",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_fae1z_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_fae1z_883",
+  "position-side": "awsui_position-side_hyvsj_fae1z_896",
+  "tools-container": "awsui_tools-container_hyvsj_fae1z_918",
+  "tools": "awsui_tools_hyvsj_fae1z_918",
+  "openTools": "awsui_openTools_hyvsj_fae1z_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_fae1z_1007",
+  "hide-tools": "awsui_hide-tools_hyvsj_fae1z_1017",
+  "show-tools": "awsui_show-tools_hyvsj_fae1z_1029",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_fae1z_1007",
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_fae1z_1112",
+  "trigger": "awsui_trigger_hyvsj_fae1z_1112",
+  "selected": "awsui_selected_hyvsj_fae1z_1190",
+  "badge": "awsui_badge_hyvsj_fae1z_1210",
+  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_fae1z_1214",
+  "dot": "awsui_dot_hyvsj_fae1z_1225"
 };
   

package/app-layout/visual-refresh-toolbar/drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGnD,UAAU,kCAAkC;IAC1C,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,wBAAgB,6BAA6B,CAAC,EAAE,kBAAkB,EAAE,EAAE,kCAAkC,eA8FvG;AAED,eAAO,MAAM,+BAA+B,qGAA2D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGnD,UAAU,kCAAkC;IAC1C,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,wBAAgB,6BAA6B,CAAC,EAAE,kBAAkB,EAAE,EAAE,kCAAkC,eAgGvG;AAED,eAAO,MAAM,+BAA+B,qGAA2D,CAAC"}

package/app-layout/visual-refresh-toolbar/drawer/index.js

@@ -41,7 +41,8 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }) {
             blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,
             insetBlockStart: placement.insetBlockStart,
         } },
-        !isMobile && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && (React.createElement(PanelResizeHandle, { ref: drawersFocusControl.refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.resizeHandle, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown })),
+        !isMobile && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && (React.createElement("div", { className: styles['drawer-slider'] },
+            React.createElement(PanelResizeHandle, { ref: drawersFocusControl.refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.resizeHandle, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown }))),
         React.createElement("div", { className: styles['drawer-content-container'] },
             React.createElement("div", { className: clsx(styles['drawer-close-button']) },
                 React.createElement(InternalButton, { ariaLabel: computedAriaLabels.closeButton, className: clsx({

package/app-layout/visual-refresh-toolbar/drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../../../button/internal';\nimport styles from './styles.css.js';\nimport sharedStyles from '../../styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport { TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\nimport { useResize } from './use-resize';\n\ninterface AppLayoutDrawerImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutDrawerImplementationProps) {\n  const {\n    activeDrawer,\n    minDrawerSize,\n    activeDrawerSize,\n    maxDrawerSize,\n    ariaLabels,\n    drawers,\n    drawersFocusControl,\n    isMobile,\n    placement,\n    onActiveDrawerChange,\n    onActiveDrawerResize,\n  } = appLayoutInternals;\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const activeDrawerId = activeDrawer?.id;\n\n  const computedAriaLabels = {\n    closeButton: activeDrawer ? activeDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n    content: activeDrawer ? activeDrawer.ariaLabels?.drawerName : ariaLabels?.tools,\n  };\n\n  const isToolsDrawer = activeDrawer?.id === TOOLS_DRAWER_ID;\n  const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n  const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n  const resizeProps = useResize({\n    currentWidth: activeDrawerSize,\n    minWidth: minDrawerSize,\n    maxWidth: maxDrawerSize,\n    panelRef: drawerRef,\n    handleRef: drawersFocusControl.refs.slider,\n    onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),\n  });\n\n  return (\n    <aside\n      id={activeDrawerId}\n      aria-hidden={!activeDrawer}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, sharedStyles['with-motion'], {\n        [testutilStyles['active-drawer']]: !toolsOnlyMode && activeDrawerId,\n        [testutilStyles.tools]: isToolsDrawer,\n      })}\n      ref={drawerRef}\n      onBlur={e => {\n        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n          drawersFocusControl.loseFocus();\n        }\n      }}\n      style={{\n        blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,\n        insetBlockStart: placement.insetBlockStart,\n      }}\n    >\n      {!isMobile && activeDrawer?.resizable && (\n        <PanelResizeHandle\n          ref={drawersFocusControl.refs.slider}\n          position=\"side\"\n          className={testutilStyles['drawers-slider']}\n          ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n          ariaValuenow={resizeProps.relativeSize}\n          onKeyDown={resizeProps.onKeyDown}\n          onPointerDown={resizeProps.onPointerDown}\n        />\n      )}\n      <div className={styles['drawer-content-container']}>\n        <div className={clsx(styles['drawer-close-button'])}>\n          <InternalButton\n            ariaLabel={computedAriaLabels.closeButton}\n            className={clsx({\n              [testutilStyles['active-drawer-close-button']]: !isToolsDrawer && activeDrawerId,\n              [testutilStyles['tools-close']]: isToolsDrawer,\n            })}\n            formAction=\"none\"\n            iconName={isMobile ? 'close' : 'angle-right'}\n            onClick={() => onActiveDrawerChange(null)}\n            ref={drawersFocusControl.refs.close}\n            variant=\"icon\"\n          />\n        </div>\n        {toolsContent && (\n          <div\n            className={clsx(\n              styles['drawer-content'],\n              activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n            )}\n          >\n            {toolsContent}\n          </div>\n        )}\n        {activeDrawerId !== TOOLS_DRAWER_ID && <div className={styles['drawer-content']}>{activeDrawer?.content}</div>}\n      </div>\n    </aside>\n  );\n}\n\nexport const createWidgetizedAppLayoutDrawer = createWidgetizedComponent(AppLayoutDrawerImplementation);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../../../button/internal';\nimport styles from './styles.css.js';\nimport sharedStyles from '../../styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport { TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\nimport { useResize } from './use-resize';\n\ninterface AppLayoutDrawerImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutDrawerImplementationProps) {\n  const {\n    activeDrawer,\n    minDrawerSize,\n    activeDrawerSize,\n    maxDrawerSize,\n    ariaLabels,\n    drawers,\n    drawersFocusControl,\n    isMobile,\n    placement,\n    onActiveDrawerChange,\n    onActiveDrawerResize,\n  } = appLayoutInternals;\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const activeDrawerId = activeDrawer?.id;\n\n  const computedAriaLabels = {\n    closeButton: activeDrawer ? activeDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n    content: activeDrawer ? activeDrawer.ariaLabels?.drawerName : ariaLabels?.tools,\n  };\n\n  const isToolsDrawer = activeDrawer?.id === TOOLS_DRAWER_ID;\n  const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n  const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n  const resizeProps = useResize({\n    currentWidth: activeDrawerSize,\n    minWidth: minDrawerSize,\n    maxWidth: maxDrawerSize,\n    panelRef: drawerRef,\n    handleRef: drawersFocusControl.refs.slider,\n    onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),\n  });\n\n  return (\n    <aside\n      id={activeDrawerId}\n      aria-hidden={!activeDrawer}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, sharedStyles['with-motion'], {\n        [testutilStyles['active-drawer']]: !toolsOnlyMode && activeDrawerId,\n        [testutilStyles.tools]: isToolsDrawer,\n      })}\n      ref={drawerRef}\n      onBlur={e => {\n        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n          drawersFocusControl.loseFocus();\n        }\n      }}\n      style={{\n        blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,\n        insetBlockStart: placement.insetBlockStart,\n      }}\n    >\n      {!isMobile && activeDrawer?.resizable && (\n        <div className={styles['drawer-slider']}>\n          <PanelResizeHandle\n            ref={drawersFocusControl.refs.slider}\n            position=\"side\"\n            className={testutilStyles['drawers-slider']}\n            ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n            ariaValuenow={resizeProps.relativeSize}\n            onKeyDown={resizeProps.onKeyDown}\n            onPointerDown={resizeProps.onPointerDown}\n          />\n        </div>\n      )}\n      <div className={styles['drawer-content-container']}>\n        <div className={clsx(styles['drawer-close-button'])}>\n          <InternalButton\n            ariaLabel={computedAriaLabels.closeButton}\n            className={clsx({\n              [testutilStyles['active-drawer-close-button']]: !isToolsDrawer && activeDrawerId,\n              [testutilStyles['tools-close']]: isToolsDrawer,\n            })}\n            formAction=\"none\"\n            iconName={isMobile ? 'close' : 'angle-right'}\n            onClick={() => onActiveDrawerChange(null)}\n            ref={drawersFocusControl.refs.close}\n            variant=\"icon\"\n          />\n        </div>\n        {toolsContent && (\n          <div\n            className={clsx(\n              styles['drawer-content'],\n              activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n            )}\n          >\n            {toolsContent}\n          </div>\n        )}\n        {activeDrawerId !== TOOLS_DRAWER_ID && <div className={styles['drawer-content']}>{activeDrawer?.content}</div>}\n      </div>\n    </aside>\n  );\n}\n\nexport const createWidgetizedAppLayoutDrawer = createWidgetizedComponent(AppLayoutDrawerImplementation);\n"]}

package/app-layout/visual-refresh-toolbar/navigation/styles.css.js

@@ -1,11 +1,11 @@
 
     import './styles.scoped.css';
     export default {
-  "navigation": "awsui_navigation_2p2ab_1tgo2_97",
-  "is-navigation-open": "awsui_is-navigation-open_2p2ab_1tgo2_125",
-  "animating": "awsui_animating_2p2ab_1tgo2_129",
-  "openNavigation": "awsui_openNavigation_2p2ab_1tgo2_1",
-  "animated-content": "awsui_animated-content_2p2ab_1tgo2_142",
-  "hide-navigation": "awsui_hide-navigation_2p2ab_1tgo2_151"
+  "navigation": "awsui_navigation_2p2ab_23w7n_97",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_23w7n_125",
+  "animating": "awsui_animating_2p2ab_23w7n_129",
+  "openNavigation": "awsui_openNavigation_2p2ab_23w7n_1",
+  "animated-content": "awsui_animated-content_2p2ab_23w7n_142",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_23w7n_151"
 };
   

package/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css

@@ -94,7 +94,7 @@ 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_navigation_2p2ab_1tgo2_97:not(#\9) {
+.awsui_navigation_2p2ab_23w7n_97:not(#\9) {
   position: sticky;
   background-color: var(--color-background-container-content-4un1ap, #ffffff);
   inset-block-end: 0;
@@ -112,43 +112,43 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   prevent unwanted text wrapping.
   */
 }
-@keyframes awsui_openNavigation_2p2ab_1tgo2_1 {
+@keyframes awsui_openNavigation_2p2ab_23w7n_1 {
   from {
     opacity: 0;
     inline-size: calc(var(--space-layout-toggle-padding-lcu6qi, 12px) * 2 + var(--space-layout-toggle-diameter-hb85rk, 36px));
   }
   to {
     opacity: 1;
-    inline-size: var(--awsui-navigation-width-9rhwr5);
+    inline-size: var(--awsui-navigation-width-g964ok);
   }
 }
-.awsui_navigation_2p2ab_1tgo2_97:not(#\9):not(.awsui_is-navigation-open_2p2ab_1tgo2_125) {
+.awsui_navigation_2p2ab_23w7n_97:not(#\9):not(.awsui_is-navigation-open_2p2ab_23w7n_125) {
   inline-size: 0;
   display: none;
 }
-.awsui_navigation_2p2ab_1tgo2_97.awsui_is-navigation-open_2p2ab_1tgo2_125.awsui_animating_2p2ab_1tgo2_129:not(#\9) {
-  animation: awsui_openNavigation_2p2ab_1tgo2_1 var(--motion-duration-refresh-only-fast-4jn2d7, 115ms);
+.awsui_navigation_2p2ab_23w7n_97.awsui_is-navigation-open_2p2ab_23w7n_125.awsui_animating_2p2ab_23w7n_129:not(#\9) {
+  animation: awsui_openNavigation_2p2ab_23w7n_1 var(--motion-duration-refresh-only-fast-4jn2d7, 115ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_navigation_2p2ab_1tgo2_97.awsui_is-navigation-open_2p2ab_1tgo2_125.awsui_animating_2p2ab_1tgo2_129:not(#\9) {
+  .awsui_navigation_2p2ab_23w7n_97.awsui_is-navigation-open_2p2ab_23w7n_125.awsui_animating_2p2ab_23w7n_129:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_navigation_2p2ab_1tgo2_97.awsui_is-navigation-open_2p2ab_1tgo2_125.awsui_animating_2p2ab_1tgo2_129:not(#\9), .awsui-mode-entering .awsui_navigation_2p2ab_1tgo2_97.awsui_is-navigation-open_2p2ab_1tgo2_125.awsui_animating_2p2ab_1tgo2_129:not(#\9) {
+.awsui-motion-disabled .awsui_navigation_2p2ab_23w7n_97.awsui_is-navigation-open_2p2ab_23w7n_125.awsui_animating_2p2ab_23w7n_129:not(#\9), .awsui-mode-entering .awsui_navigation_2p2ab_23w7n_97.awsui_is-navigation-open_2p2ab_23w7n_125.awsui_animating_2p2ab_23w7n_129:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_navigation_2p2ab_1tgo2_97 > .awsui_animated-content_2p2ab_1tgo2_142:not(#\9) {
-  inline-size: var(--awsui-navigation-width-9rhwr5);
+.awsui_navigation_2p2ab_23w7n_97 > .awsui_animated-content_2p2ab_23w7n_142:not(#\9) {
+  inline-size: var(--awsui-navigation-width-g964ok);
 }
 @media (max-width: 688px) {
-  .awsui_navigation_2p2ab_1tgo2_97:not(#\9) {
-    --awsui-navigation-width-9rhwr5: 100vw;
+  .awsui_navigation_2p2ab_23w7n_97:not(#\9) {
+    --awsui-navigation-width-g964ok: 100vw;
   }
 }
 
-.awsui_hide-navigation_2p2ab_1tgo2_151:not(#\9) {
+.awsui_hide-navigation_2p2ab_23w7n_151:not(#\9) {
   position: absolute;
   inset-inline-end: var(--space-m-udix3p, 16px);
   inset-block-start: var(--size-vertical-panel-icon-offset-wy8j08, 15px);

package/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js

@@ -2,11 +2,11 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "navigation": "awsui_navigation_2p2ab_1tgo2_97",
-  "is-navigation-open": "awsui_is-navigation-open_2p2ab_1tgo2_125",
-  "animating": "awsui_animating_2p2ab_1tgo2_129",
-  "openNavigation": "awsui_openNavigation_2p2ab_1tgo2_1",
-  "animated-content": "awsui_animated-content_2p2ab_1tgo2_142",
-  "hide-navigation": "awsui_hide-navigation_2p2ab_1tgo2_151"
+  "navigation": "awsui_navigation_2p2ab_23w7n_97",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_23w7n_125",
+  "animating": "awsui_animating_2p2ab_23w7n_129",
+  "openNavigation": "awsui_openNavigation_2p2ab_23w7n_1",
+  "animated-content": "awsui_animated-content_2p2ab_23w7n_142",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_23w7n_151"
 };
   

package/app-layout/visual-refresh-toolbar/skeleton/styles.css.js

@@ -1,21 +1,21 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_7nfqu_1lg76_101",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1lg76_150",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1lg76_165",
-  "navigation": "awsui_navigation_7nfqu_1lg76_180",
-  "tools": "awsui_tools_7nfqu_1lg76_181",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_1lg76_205",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1lg76_211",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_1lg76_224",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_1lg76_228",
-  "notifications-container": "awsui_notifications-container_7nfqu_1lg76_234",
-  "main-landmark": "awsui_main-landmark_7nfqu_1lg76_241",
-  "main": "awsui_main_7nfqu_1lg76_241",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1lg76_250",
-  "content-header": "awsui_content-header_7nfqu_1lg76_260",
-  "content": "awsui_content_7nfqu_1lg76_260",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1lg76_269"
+  "root": "awsui_root_7nfqu_1qo46_101",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1qo46_150",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1qo46_165",
+  "navigation": "awsui_navigation_7nfqu_1qo46_180",
+  "tools": "awsui_tools_7nfqu_1qo46_181",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_1qo46_205",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1qo46_211",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_1qo46_224",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_1qo46_228",
+  "notifications-container": "awsui_notifications-container_7nfqu_1qo46_234",
+  "main-landmark": "awsui_main-landmark_7nfqu_1qo46_241",
+  "main": "awsui_main_7nfqu_1qo46_241",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1qo46_250",
+  "content-header": "awsui_content-header_7nfqu_1qo46_260",
+  "content": "awsui_content_7nfqu_1qo46_260",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1qo46_269"
 };
   

package/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css

@@ -98,7 +98,7 @@ 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_7nfqu_1lg76_101:not(#\9) {
+.awsui_root_7nfqu_1qo46_101:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -134,52 +134,52 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
   color: var(--color-text-body-default-at06ol, #000716);
   background-color: var(--color-background-layout-main-nx09lr, #ffffff);
-  --awsui-max-content-width-9rhwr5: 100%;
+  --awsui-max-content-width-g964ok: 100%;
   display: grid;
   grid-template-areas: "topBar    topBar     topBar" ".      notifications ." ".          main      .";
   grid-template-columns: var(--space-layout-content-horizontal-7l52k3, 24px) 1fr var(--space-layout-content-horizontal-7l52k3, 24px);
   grid-template-rows: min-content min-content 1fr;
 }
 @media (min-width: 689px) {
-  .awsui_root_7nfqu_1lg76_101:not(#\9) {
+  .awsui_root_7nfqu_1qo46_101:not(#\9) {
     grid-template-areas: "navigation toolbar      toolbar       toolbar   toolbar         tools" "navigation .         notifications    .         sideSplitPanel  tools" "navigation .             main         .         sideSplitPanel  tools";
-    grid-template-columns: min-content minmax(var(--space-layout-content-horizontal-7l52k3, 24px), 1fr) minmax(0, var(--awsui-max-content-width-9rhwr5)) minmax(var(--space-layout-content-horizontal-7l52k3, 24px), 1fr) min-content min-content;
+    grid-template-columns: min-content minmax(var(--space-layout-content-horizontal-7l52k3, 24px), 1fr) minmax(0, var(--awsui-max-content-width-g964ok)) minmax(var(--space-layout-content-horizontal-7l52k3, 24px), 1fr) min-content min-content;
     grid-template-rows: min-content min-content 1fr min-content;
   }
 }
 @media (min-width: 689px) and (min-width: 1401px) {
-  .awsui_root_7nfqu_1lg76_101.awsui_has-adaptive-widths-default_7nfqu_1lg76_150:not(#\9) {
-    --awsui-max-content-width-9rhwr5: 1280px;
+  .awsui_root_7nfqu_1qo46_101.awsui_has-adaptive-widths-default_7nfqu_1qo46_150:not(#\9) {
+    --awsui-max-content-width-g964ok: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_7nfqu_1lg76_101.awsui_has-adaptive-widths-default_7nfqu_1lg76_150:not(#\9) {
-    --awsui-max-content-width-9rhwr5: 1440px;
+  .awsui_root_7nfqu_1qo46_101.awsui_has-adaptive-widths-default_7nfqu_1qo46_150:not(#\9) {
+    --awsui-max-content-width-g964ok: 1440px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_7nfqu_1lg76_101.awsui_has-adaptive-widths-default_7nfqu_1lg76_150:not(#\9) {
-    --awsui-max-content-width-9rhwr5: 1620px;
+  .awsui_root_7nfqu_1qo46_101.awsui_has-adaptive-widths-default_7nfqu_1qo46_150:not(#\9) {
+    --awsui-max-content-width-g964ok: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 1401px) {
-  .awsui_root_7nfqu_1lg76_101.awsui_has-adaptive-widths-dashboard_7nfqu_1lg76_165:not(#\9) {
-    --awsui-max-content-width-9rhwr5: 1280px;
+  .awsui_root_7nfqu_1qo46_101.awsui_has-adaptive-widths-dashboard_7nfqu_1qo46_165:not(#\9) {
+    --awsui-max-content-width-g964ok: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_7nfqu_1lg76_101.awsui_has-adaptive-widths-dashboard_7nfqu_1lg76_165:not(#\9) {
-    --awsui-max-content-width-9rhwr5: 1620px;
+  .awsui_root_7nfqu_1qo46_101.awsui_has-adaptive-widths-dashboard_7nfqu_1qo46_165:not(#\9) {
+    --awsui-max-content-width-g964ok: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_7nfqu_1lg76_101.awsui_has-adaptive-widths-dashboard_7nfqu_1lg76_165:not(#\9) {
-    --awsui-max-content-width-9rhwr5: 2160px;
+  .awsui_root_7nfqu_1qo46_101.awsui_has-adaptive-widths-dashboard_7nfqu_1qo46_165:not(#\9) {
+    --awsui-max-content-width-g964ok: 2160px;
   }
 }
 
-.awsui_navigation_7nfqu_1lg76_180:not(#\9),
-.awsui_tools_7nfqu_1lg76_181:not(#\9) {
+.awsui_navigation_7nfqu_1qo46_180:not(#\9),
+.awsui_tools_7nfqu_1qo46_181:not(#\9) {
   grid-row: 1/-1;
   grid-column: 1/-1;
   background: var(--color-background-container-content-4un1ap, #ffffff);
@@ -187,29 +187,29 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 @media (min-width: 689px) {
-  .awsui_navigation_7nfqu_1lg76_180:not(#\9) {
+  .awsui_navigation_7nfqu_1qo46_180:not(#\9) {
     grid-area: navigation;
-    inline-size: var(--awsui-navigation-width-9rhwr5);
+    inline-size: var(--awsui-navigation-width-g964ok);
     border-inline-end: 1px solid var(--color-border-divider-panel-side-93n0qu, #b6bec9);
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_tools_7nfqu_1lg76_181:not(#\9) {
+  .awsui_tools_7nfqu_1qo46_181:not(#\9) {
     grid-area: tools;
-    inline-size: var(--awsui-tools-width-9rhwr5);
+    inline-size: var(--awsui-tools-width-g964ok);
     border-inline-start: 1px solid var(--color-border-divider-panel-side-93n0qu, #b6bec9);
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_split-panel-side_7nfqu_1lg76_205:not(#\9) {
+  .awsui_split-panel-side_7nfqu_1qo46_205:not(#\9) {
     grid-area: sideSplitPanel;
     border-inline-start: 1px solid var(--color-border-divider-panel-side-93n0qu, #b6bec9);
   }
 }
 
-.awsui_split-panel-bottom_7nfqu_1lg76_211:not(#\9) {
+.awsui_split-panel-bottom_7nfqu_1qo46_211:not(#\9) {
   position: sticky;
   z-index: 840;
   align-self: end;
@@ -217,61 +217,61 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_split-panel-bottom_7nfqu_1lg76_211:not(#\9) {
+  .awsui_split-panel-bottom_7nfqu_1qo46_211:not(#\9) {
     grid-column: 2/span 3;
   }
 }
 
-.awsui_panel-hidden_7nfqu_1lg76_224:not(#\9) {
+.awsui_panel-hidden_7nfqu_1qo46_224:not(#\9) {
   display: none;
 }
 
-.awsui_toolbar-container_7nfqu_1lg76_228:not(#\9) {
+.awsui_toolbar-container_7nfqu_1qo46_228:not(#\9) {
   grid-area: toolbar;
   block-size: 48px;
   border-block-end: 1px solid var(--color-border-divider-panel-bottom-dwyqvg, #b6bec9);
 }
 
-.awsui_notifications-container_7nfqu_1lg76_234:not(#\9) {
+.awsui_notifications-container_7nfqu_1qo46_234:not(#\9) {
   grid-area: notifications;
 }
-.awsui_notifications-container_7nfqu_1lg76_234:not(#\9):not(:empty) {
+.awsui_notifications-container_7nfqu_1qo46_234:not(#\9):not(:empty) {
   padding-block-start: var(--space-scaled-xs-26e2du, 8px);
 }
 
-.awsui_main-landmark_7nfqu_1lg76_241:not(#\9) {
+.awsui_main-landmark_7nfqu_1qo46_241:not(#\9) {
   display: contents;
 }
 
-.awsui_main_7nfqu_1lg76_241:not(#\9) {
+.awsui_main_7nfqu_1qo46_241:not(#\9) {
   grid-area: main;
   margin-block-start: var(--space-scaled-s-aqzyko, 12px);
   margin-block-end: var(--space-layout-content-bottom-noqzmw, 40px);
 }
-.awsui_main-disable-paddings_7nfqu_1lg76_250:not(#\9) {
+.awsui_main-disable-paddings_7nfqu_1qo46_250:not(#\9) {
   grid-column: 1/-1;
   margin-block: 0;
 }
 @media (min-width: 689px) {
-  .awsui_main-disable-paddings_7nfqu_1lg76_250:not(#\9) {
+  .awsui_main-disable-paddings_7nfqu_1qo46_250:not(#\9) {
     grid-column: 2/span 3;
   }
 }
 
-.awsui_content-header_7nfqu_1lg76_260:not(#\9) {
+.awsui_content-header_7nfqu_1qo46_260:not(#\9) {
   margin-block-end: var(--space-content-header-padding-bottom-y2enua, 16px);
 }
 
-.awsui_content_7nfqu_1lg76_260:not(#\9) {
+.awsui_content_7nfqu_1qo46_260:not(#\9) {
   display: contents;
 }
 
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
-.awsui_unfocusable-mobile_7nfqu_1lg76_269 *:not(#\9) {
+.awsui_unfocusable-mobile_7nfqu_1qo46_269 *:not(#\9) {
   visibility: hidden;
 }
 @media (min-width: 689px) {
-  .awsui_unfocusable-mobile_7nfqu_1lg76_269 *:not(#\9) {
+  .awsui_unfocusable-mobile_7nfqu_1qo46_269 *:not(#\9) {
     visibility: visible;
   }
 }

package/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js

@@ -2,21 +2,21 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_7nfqu_1lg76_101",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1lg76_150",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1lg76_165",
-  "navigation": "awsui_navigation_7nfqu_1lg76_180",
-  "tools": "awsui_tools_7nfqu_1lg76_181",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_1lg76_205",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1lg76_211",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_1lg76_224",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_1lg76_228",
-  "notifications-container": "awsui_notifications-container_7nfqu_1lg76_234",
-  "main-landmark": "awsui_main-landmark_7nfqu_1lg76_241",
-  "main": "awsui_main_7nfqu_1lg76_241",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1lg76_250",
-  "content-header": "awsui_content-header_7nfqu_1lg76_260",
-  "content": "awsui_content_7nfqu_1lg76_260",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1lg76_269"
+  "root": "awsui_root_7nfqu_1qo46_101",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1qo46_150",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1qo46_165",
+  "navigation": "awsui_navigation_7nfqu_1qo46_180",
+  "tools": "awsui_tools_7nfqu_1qo46_181",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_1qo46_205",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1qo46_211",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_1qo46_224",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_1qo46_228",
+  "notifications-container": "awsui_notifications-container_7nfqu_1qo46_234",
+  "main-landmark": "awsui_main-landmark_7nfqu_1qo46_241",
+  "main": "awsui_main_7nfqu_1qo46_241",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1qo46_250",
+  "content-header": "awsui_content-header_7nfqu_1qo46_260",
+  "content": "awsui_content_7nfqu_1qo46_260",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1qo46_269"
 };
   

package/app-layout/visual-refresh-toolbar/toolbar/index.js

@@ -14,7 +14,7 @@ export function AppLayoutToolbarImplementation({ appLayoutInternals }) {
     var _a, _b;
     const { ariaLabels, breadcrumbs, discoveredBreadcrumbs, activeDrawer, drawers, drawersFocusControl, setToolbarHeight, verticalOffsets, onNavigationToggle, isMobile, toolbarState, setToolbarState, navigationOpen, navigation, navigationFocusControl, splitPanelControlId, splitPanelPosition, splitPanelToggleConfig, splitPanelFocusControl, onSplitPanelToggle, splitPanelOpen, onActiveDrawerChange, } = appLayoutInternals;
     // TODO: expose configuration property
-    const pinnedToolbar = false;
+    const pinnedToolbar = true;
     const ref = useRef(null);
     useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));
     useEffect(() => {