@cloudscape-design/components 3.0.840 → 3.0.842

package/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_1e11z_149",
-  "mobile-bar": "awsui_mobile-bar_19d8l_1e11z_153",
-  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_1e11z_166",
-  "mobile-toggle": "awsui_mobile-toggle_19d8l_1e11z_173",
-  "mobile-toggle-type-navigation": "awsui_mobile-toggle-type-navigation_19d8l_1e11z_182",
-  "mobile-toggle-type-tools": "awsui_mobile-toggle-type-tools_19d8l_1e11z_185",
-  "mobile-toggle-type-drawer": "awsui_mobile-toggle-type-drawer_19d8l_1e11z_185",
-  "drawers-container": "awsui_drawers-container_19d8l_1e11z_192"
+  "block-body-scroll": "awsui_block-body-scroll_19d8l_1e6a2_153",
+  "mobile-bar": "awsui_mobile-bar_19d8l_1e6a2_157",
+  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_1e6a2_170",
+  "mobile-toggle": "awsui_mobile-toggle_19d8l_1e6a2_177",
+  "mobile-toggle-type-navigation": "awsui_mobile-toggle-type-navigation_19d8l_1e6a2_186",
+  "mobile-toggle-type-tools": "awsui_mobile-toggle-type-tools_19d8l_1e6a2_189",
+  "mobile-toggle-type-drawer": "awsui_mobile-toggle-type-drawer_19d8l_1e6a2_189",
+  "drawers-container": "awsui_drawers-container_19d8l_1e6a2_196"
 };
   

package/app-layout/resize/styles.css.js

@@ -1,10 +1,10 @@
 
     import './styles.scoped.css';
     export default {
-  "with-motion-vertical": "awsui_with-motion-vertical_b18tp_8csc7_142",
-  "with-motion-horizontal": "awsui_with-motion-horizontal_b18tp_8csc7_161",
-  "resize-active": "awsui_resize-active_b18tp_8csc7_180",
-  "resize-side": "awsui_resize-side_b18tp_8csc7_191",
-  "resize-bottom": "awsui_resize-bottom_b18tp_8csc7_194"
+  "with-motion-vertical": "awsui_with-motion-vertical_b18tp_18zmr_146",
+  "with-motion-horizontal": "awsui_with-motion-horizontal_b18tp_18zmr_165",
+  "resize-active": "awsui_resize-active_b18tp_18zmr_184",
+  "resize-side": "awsui_resize-side_b18tp_18zmr_195",
+  "resize-bottom": "awsui_resize-bottom_b18tp_18zmr_198"
 };
   

package/app-layout/resize/styles.scoped.css

@@ -136,63 +136,67 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/*
+ 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
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
 @media (min-width: 689px) {
-  .awsui_with-motion-vertical_b18tp_8csc7_142:not(#\9) {
+  .awsui_with-motion-vertical_b18tp_18zmr_146:not(#\9) {
     transition: var(--motion-duration-refresh-only-medium-nf6485, 165ms);
     transition-property: border-color, opacity, block-size, inset-block-start;
   }
 }
 @media (min-width: 689px) and (prefers-reduced-motion: reduce) {
-  .awsui_with-motion-vertical_b18tp_8csc7_142:not(#\9) {
+  .awsui_with-motion-vertical_b18tp_18zmr_146:not(#\9) {
     animation: none;
     transition: none;
   }
 }
 @media (min-width: 689px) {
-  .awsui-motion-disabled .awsui_with-motion-vertical_b18tp_8csc7_142:not(#\9), .awsui-mode-entering .awsui_with-motion-vertical_b18tp_8csc7_142:not(#\9) {
+  .awsui-motion-disabled .awsui_with-motion-vertical_b18tp_18zmr_146:not(#\9), .awsui-mode-entering .awsui_with-motion-vertical_b18tp_18zmr_146:not(#\9) {
     animation: none;
     transition: none;
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_with-motion-horizontal_b18tp_8csc7_161:not(#\9) {
+  .awsui_with-motion-horizontal_b18tp_18zmr_165:not(#\9) {
     transition: var(--motion-duration-refresh-only-medium-nf6485, 165ms);
     transition-property: border-color, opacity, inline-size, inset-inline-start;
   }
 }
 @media (min-width: 689px) and (prefers-reduced-motion: reduce) {
-  .awsui_with-motion-horizontal_b18tp_8csc7_161:not(#\9) {
+  .awsui_with-motion-horizontal_b18tp_18zmr_165:not(#\9) {
     animation: none;
     transition: none;
   }
 }
 @media (min-width: 689px) {
-  .awsui-motion-disabled .awsui_with-motion-horizontal_b18tp_8csc7_161:not(#\9), .awsui-mode-entering .awsui_with-motion-horizontal_b18tp_8csc7_161:not(#\9) {
+  .awsui-motion-disabled .awsui_with-motion-horizontal_b18tp_18zmr_165:not(#\9), .awsui-mode-entering .awsui_with-motion-horizontal_b18tp_18zmr_165:not(#\9) {
     animation: none;
     transition: none;
   }
 }
 
 /* stylelint-disable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
-.awsui_resize-active_b18tp_8csc7_180 *:not(#\9) {
+.awsui_resize-active_b18tp_18zmr_184 *:not(#\9) {
   -webkit-user-select: none;
           user-select: none;
 }
-.awsui_resize-active_b18tp_8csc7_180 * .awsui_with-motion-vertical_b18tp_8csc7_142:not(#\9),
-.awsui_resize-active_b18tp_8csc7_180 * .awsui_with-motion-horizontal_b18tp_8csc7_161:not(#\9) {
+.awsui_resize-active_b18tp_18zmr_184 * .awsui_with-motion-vertical_b18tp_18zmr_146:not(#\9),
+.awsui_resize-active_b18tp_18zmr_184 * .awsui_with-motion-horizontal_b18tp_18zmr_165:not(#\9) {
   transition: none;
   animation: none;
 }
-.awsui_resize-active_b18tp_8csc7_180 iframe:not(#\9) {
+.awsui_resize-active_b18tp_18zmr_184 iframe:not(#\9) {
   pointer-events: none;
 }
-.awsui_resize-side_b18tp_8csc7_191 *:not(#\9) {
+.awsui_resize-side_b18tp_18zmr_195 *:not(#\9) {
   cursor: ew-resize;
 }
-.awsui_resize-bottom_b18tp_8csc7_194 *:not(#\9) {
+.awsui_resize-bottom_b18tp_18zmr_198 *:not(#\9) {
   cursor: ns-resize;
 }
 

package/app-layout/resize/styles.selectors.js

@@ -2,10 +2,10 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "with-motion-vertical": "awsui_with-motion-vertical_b18tp_8csc7_142",
-  "with-motion-horizontal": "awsui_with-motion-horizontal_b18tp_8csc7_161",
-  "resize-active": "awsui_resize-active_b18tp_8csc7_180",
-  "resize-side": "awsui_resize-side_b18tp_8csc7_191",
-  "resize-bottom": "awsui_resize-bottom_b18tp_8csc7_194"
+  "with-motion-vertical": "awsui_with-motion-vertical_b18tp_18zmr_146",
+  "with-motion-horizontal": "awsui_with-motion-horizontal_b18tp_18zmr_165",
+  "resize-active": "awsui_resize-active_b18tp_18zmr_184",
+  "resize-side": "awsui_resize-side_b18tp_18zmr_195",
+  "resize-bottom": "awsui_resize-bottom_b18tp_18zmr_198"
 };
   

package/app-layout/split-panel/split-panel-forced-position.d.ts

@@ -0,0 +1,5 @@
+export declare function shouldSplitPanelBeForcedToBottom({ isMobile, availableWidthForSplitPanel, }: {
+    isMobile: boolean;
+    availableWidthForSplitPanel: number;
+}): boolean;
+//# sourceMappingURL=split-panel-forced-position.d.ts.map

package/app-layout/split-panel/split-panel-forced-position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-panel-forced-position.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/split-panel/split-panel-forced-position.ts"],"names":[],"mappings":"AA4BA,wBAAgB,gCAAgC,CAAC,EAC/C,QAAQ,EACR,2BAA2B,GAC5B,EAAE;IACD,QAAQ,EAAE,OAAO,CAAC;IAClB,2BAA2B,EAAE,MAAM,CAAC;CACrC,WAMA"}

package/app-layout/split-panel/split-panel-forced-position.js

@@ -0,0 +1,30 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { browserScrollbarSize } from '../../internal/utils/browser-scrollbar-size';
+import { SPLIT_PANEL_MIN_WIDTH } from './constants';
+/**
+ * Even if the Split Panel is set to be displayed on the side, it will be forced to the bottom
+ * if the available space is less than 280px.
+ *
+ * We also have to account for the fact that after the split panel changes its position
+ * from bottom to side or vice versa, there is a chance that the content  a scrollbar appears or disappears from the page,
+ * which changes the available space again. This could potentially lead to an infinite loop.
+ * To prevent that, we give the split panel some "resistance" to change from bottom to side
+ * (but not from side to bottom), requiring in this case some extra space on top of the "nominal" 280px.
+ */
+function checkBasedOnPreviousPosition() {
+    let isForced = false; // Remember position for the next render
+    return (availableWidthForSplitPanel) => {
+        const minWidth = isForced ? SPLIT_PANEL_MIN_WIDTH + browserScrollbarSize().width : SPLIT_PANEL_MIN_WIDTH;
+        isForced = availableWidthForSplitPanel < minWidth;
+        return isForced;
+    };
+}
+const checkForcedPosition = checkBasedOnPreviousPosition();
+export function shouldSplitPanelBeForcedToBottom({ isMobile, availableWidthForSplitPanel, }) {
+    if (isMobile) {
+        return true;
+    }
+    return checkForcedPosition(availableWidthForSplitPanel);
+}
+//# sourceMappingURL=split-panel-forced-position.js.map

package/app-layout/split-panel/split-panel-forced-position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-panel-forced-position.js","sourceRoot":"","sources":["../../../../src/app-layout/split-panel/split-panel-forced-position.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAEpD;;;;;;;;;GASG;AAEH,SAAS,4BAA4B;IACnC,IAAI,QAAQ,GAAG,KAAK,CAAC,CAAC,wCAAwC;IAC9D,OAAO,CAAC,2BAAmC,EAAE,EAAE;QAC7C,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,qBAAqB,GAAG,oBAAoB,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,qBAAqB,CAAC;QACzG,QAAQ,GAAG,2BAA2B,GAAG,QAAQ,CAAC;QAClD,OAAO,QAAQ,CAAC;IAClB,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,mBAAmB,GAAG,4BAA4B,EAAE,CAAC;AAE3D,MAAM,UAAU,gCAAgC,CAAC,EAC/C,QAAQ,EACR,2BAA2B,GAI5B;IACC,IAAI,QAAQ,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IAED,OAAO,mBAAmB,CAAC,2BAA2B,CAAC,CAAC;AAC1D,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { browserScrollbarSize } from '../../internal/utils/browser-scrollbar-size';\nimport { SPLIT_PANEL_MIN_WIDTH } from './constants';\n\n/**\n * Even if the Split Panel is set to be displayed on the side, it will be forced to the bottom\n * if the available space is less than 280px.\n *\n * We also have to account for the fact that after the split panel changes its position\n * from bottom to side or vice versa, there is a chance that the content  a scrollbar appears or disappears from the page,\n * which changes the available space again. This could potentially lead to an infinite loop.\n * To prevent that, we give the split panel some \"resistance\" to change from bottom to side\n * (but not from side to bottom), requiring in this case some extra space on top of the \"nominal\" 280px.\n */\n\nfunction checkBasedOnPreviousPosition() {\n  let isForced = false; // Remember position for the next render\n  return (availableWidthForSplitPanel: number) => {\n    const minWidth = isForced ? SPLIT_PANEL_MIN_WIDTH + browserScrollbarSize().width : SPLIT_PANEL_MIN_WIDTH;\n    isForced = availableWidthForSplitPanel < minWidth;\n    return isForced;\n  };\n}\n\nconst checkForcedPosition = checkBasedOnPreviousPosition();\n\nexport function shouldSplitPanelBeForcedToBottom({\n  isMobile,\n  availableWidthForSplitPanel,\n}: {\n  isMobile: boolean;\n  availableWidthForSplitPanel: number;\n}) {\n  if (isMobile) {\n    return true;\n  }\n\n  return checkForcedPosition(availableWidthForSplitPanel);\n}\n"]}

package/app-layout/split-panel/styles.css.js

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

package/app-layout/split-panel/styles.scoped.css

@@ -140,13 +140,17 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/*
+ 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
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_drawer-displayed_1lh3u_1ok1c_145:not(#\9) {
+.awsui_drawer-displayed_1lh3u_16xqy_149:not(#\9) {
   min-inline-size: 40px;
 }
 
-.awsui_drawer-content_1lh3u_1ok1c_149:not(#\9) {
+.awsui_drawer-content_1lh3u_16xqy_153:not(#\9) {
   position: fixed;
   z-index: 830;
 }

package/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_1ok1c_145",
-  "drawer-content": "awsui_drawer-content_1lh3u_1ok1c_149"
+  "drawer-displayed": "awsui_drawer-displayed_1lh3u_16xqy_149",
+  "drawer-content": "awsui_drawer-content_1lh3u_16xqy_153"
 };
   

package/app-layout/styles.css.js

@@ -1,17 +1,17 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_lm6vo_kci10_149",
-  "root-no-scroll": "awsui_root-no-scroll_lm6vo_kci10_156",
-  "layout": "awsui_layout_lm6vo_kci10_161",
-  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_kci10_167",
-  "layout-main": "awsui_layout-main_lm6vo_kci10_171",
-  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_kci10_177",
-  "unfocusable": "awsui_unfocusable_lm6vo_kci10_182",
-  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_kci10_186",
-  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_kci10_191",
-  "content-wrapper": "awsui_content-wrapper_lm6vo_kci10_195",
-  "content-overlapped": "awsui_content-overlapped_lm6vo_kci10_199",
-  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_kci10_203"
+  "root": "awsui_root_lm6vo_ht58m_153",
+  "root-no-scroll": "awsui_root-no-scroll_lm6vo_ht58m_160",
+  "layout": "awsui_layout_lm6vo_ht58m_165",
+  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_ht58m_171",
+  "layout-main": "awsui_layout-main_lm6vo_ht58m_175",
+  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_ht58m_181",
+  "unfocusable": "awsui_unfocusable_lm6vo_ht58m_186",
+  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_ht58m_190",
+  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_ht58m_195",
+  "content-wrapper": "awsui_content-wrapper_lm6vo_ht58m_199",
+  "content-overlapped": "awsui_content-overlapped_lm6vo_ht58m_203",
+  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_ht58m_207"
 };
   

package/app-layout/styles.scoped.css

@@ -136,6 +136,10 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/*
+ 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
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
 /*
@@ -146,60 +150,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_kci10_149:not(#\9) {
+.awsui_root_lm6vo_ht58m_153:not(#\9) {
   display: flex;
   flex-direction: column;
   position: relative;
   color: var(--color-text-body-default-7v1jfn, #0f141a);
 }
 
-.awsui_root-no-scroll_lm6vo_kci10_156:not(#\9) {
+.awsui_root-no-scroll_lm6vo_ht58m_160:not(#\9) {
   position: relative;
   z-index: 1;
 }
 
-.awsui_layout_lm6vo_kci10_161:not(#\9) {
+.awsui_layout_lm6vo_ht58m_165:not(#\9) {
   flex: 1 1 auto;
   display: flex;
   align-items: stretch;
   background-color: var(--color-background-layout-main-nqw91u, #ffffff);
 }
-.awsui_layout-no-scroll_lm6vo_kci10_167:not(#\9) {
+.awsui_layout-no-scroll_lm6vo_ht58m_171:not(#\9) {
   overflow: hidden;
 }
 
-.awsui_layout-main_lm6vo_kci10_171:not(#\9) {
+.awsui_layout-main_lm6vo_ht58m_175:not(#\9) {
   flex: 1;
   min-inline-size: 0;
   background-color: var(--color-background-layout-main-nqw91u, #ffffff);
   position: relative;
 }
-.awsui_layout-main-scrollable_lm6vo_kci10_177:not(#\9) {
+.awsui_layout-main-scrollable_lm6vo_ht58m_181:not(#\9) {
   overflow: auto;
 }
 
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
-.awsui_unfocusable_lm6vo_kci10_182 *:not(#\9) {
+.awsui_unfocusable_lm6vo_ht58m_186 *:not(#\9) {
   visibility: hidden;
 }
 
-.awsui_breadcrumbs-desktop_lm6vo_kci10_186:not(#\9) {
+.awsui_breadcrumbs-desktop_lm6vo_ht58m_190:not(#\9) {
   padding-block-start: var(--space-scaled-m-mo5yse, 16px);
   padding-block-end: var(--space-scaled-s-aqzyko, 12px);
 }
 
-.awsui_content-header-wrapper_lm6vo_kci10_191:not(#\9) {
+.awsui_content-header-wrapper_lm6vo_ht58m_195:not(#\9) {
   padding-block-end: var(--space-content-header-padding-bottom-y2enua, 16px);
 }
 
-.awsui_content-wrapper_lm6vo_kci10_195:not(#\9) {
+.awsui_content-wrapper_lm6vo_ht58m_199:not(#\9) {
   padding-block-end: var(--space-layout-content-bottom-noqzmw, 40px);
 }
 
-.awsui_content-overlapped_lm6vo_kci10_199:not(#\9) {
+.awsui_content-overlapped_lm6vo_ht58m_203:not(#\9) {
   margin-block-start: calc(-1 * var(--space-dark-header-overlap-distance-lxpp0s, 36px));
 }
 
-.awsui_content-extra-top-padding_lm6vo_kci10_203:not(#\9) {
+.awsui_content-extra-top-padding_lm6vo_ht58m_207:not(#\9) {
   padding-block-start: var(--space-scaled-m-mo5yse, 16px);
 }

package/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_kci10_149",
-  "root-no-scroll": "awsui_root-no-scroll_lm6vo_kci10_156",
-  "layout": "awsui_layout_lm6vo_kci10_161",
-  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_kci10_167",
-  "layout-main": "awsui_layout-main_lm6vo_kci10_171",
-  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_kci10_177",
-  "unfocusable": "awsui_unfocusable_lm6vo_kci10_182",
-  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_kci10_186",
-  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_kci10_191",
-  "content-wrapper": "awsui_content-wrapper_lm6vo_kci10_195",
-  "content-overlapped": "awsui_content-overlapped_lm6vo_kci10_199",
-  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_kci10_203"
+  "root": "awsui_root_lm6vo_ht58m_153",
+  "root-no-scroll": "awsui_root-no-scroll_lm6vo_ht58m_160",
+  "layout": "awsui_layout_lm6vo_ht58m_165",
+  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_ht58m_171",
+  "layout-main": "awsui_layout-main_lm6vo_ht58m_175",
+  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_ht58m_181",
+  "unfocusable": "awsui_unfocusable_lm6vo_ht58m_186",
+  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_ht58m_190",
+  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_ht58m_195",
+  "content-wrapper": "awsui_content-wrapper_lm6vo_ht58m_199",
+  "content-overlapped": "awsui_content-overlapped_lm6vo_ht58m_203",
+  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_ht58m_207"
 };
   

package/app-layout/toggles/styles.css.js

@@ -1,7 +1,7 @@
 
     import './styles.scoped.css';
     export default {
-  "toggle-button": "awsui_toggle-button_16w0h_13fjx_181",
-  "close-button": "awsui_close-button_16w0h_13fjx_216"
+  "toggle-button": "awsui_toggle-button_16w0h_8566m_185",
+  "close-button": "awsui_close-button_16w0h_8566m_220"
 };
   

package/app-layout/toggles/styles.scoped.css

@@ -134,12 +134,16 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
-/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
@@ -178,7 +182,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_toggle-button_16w0h_13fjx_181:not(#\9) {
+.awsui_toggle-button_16w0h_8566m_185:not(#\9) {
   cursor: pointer;
   border-block: 0;
   border-inline: 0;
@@ -187,18 +191,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background: transparent;
   color: currentColor;
 }
-.awsui_toggle-button_16w0h_13fjx_181:not(#\9):focus {
+.awsui_toggle-button_16w0h_8566m_185:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_13fjx_181:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_8566m_185:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_13fjx_181:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_8566m_185:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-button-inline-icon-focus-outline-gutter-vk4r2v, 0px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_13fjx_181:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_8566m_185:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -213,7 +217,7 @@ body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_13fjx_181:not(#\9
   box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
 }
 
-.awsui_close-button_16w0h_13fjx_216:not(#\9) {
+.awsui_close-button_16w0h_8566m_220:not(#\9) {
   position: absolute;
   outline: none;
   inset-inline-end: var(--space-m-udix3p, 16px);

package/app-layout/toggles/styles.selectors.js

@@ -2,7 +2,7 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "toggle-button": "awsui_toggle-button_16w0h_13fjx_181",
-  "close-button": "awsui_close-button_16w0h_13fjx_216"
+  "toggle-button": "awsui_toggle-button_16w0h_8566m_185",
+  "close-button": "awsui_close-button_16w0h_8566m_220"
 };
   

package/app-layout/utils/use-resize.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AppLayoutProps } from '../interfaces';
 import { FocusControlRefs } from './use-focus-control';
-export interface DrawerResizeProps {
+interface DrawerResizeProps {
     activeDrawer: AppLayoutProps.Drawer | undefined;
     activeDrawerSize: number;
     onActiveDrawerResize: (detail: {

package/app-layout/utils/use-resize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-resize.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAMvD,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,WAAW,EAAE,gBAAgB,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,SAAS,CAChB,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAChD,EACE,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,eAAe,EACf,eAAe,GAChB,EAAE,iBAAiB;;;EAiDrB;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"use-resize.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAMvD,UAAU,iBAAiB;IACzB,YAAY,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,WAAW,EAAE,gBAAgB,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,SAAS,CAChB,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAChD,EACE,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,eAAe,EACf,eAAe,GAChB,EAAE,iBAAiB;;;EAiDrB;AAED,eAAe,SAAS,CAAC"}

package/app-layout/utils/use-resize.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-resize.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,iBAAiB,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAIrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAY3D,SAAS,SAAS,CAChB,eAAgD,EAChD,EACE,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,eAAe,EACf,eAAe,GACG;;IAEpB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,CAAC,YAAY,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAExE,SAAS,CAAC,GAAG,EAAE;QACb,uDAAuD;QACvD,kEAAkE;QAClE,MAAM,MAAM,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACxC,MAAM,OAAO,GAAG,eAAe,CAAC;YAChC,eAAe,CAAC,CAAC,CAAC,UAAU,GAAG,eAAe,CAAC,GAAG,CAAC,OAAO,GAAG,eAAe,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QACxF,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAEnD,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC1C,MAAM,QAAQ,GAAG,eAAe,CAAC;QACjC,MAAM,IAAI,GAAG,eAAe,CAAC,eAAe,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;QAC/D,MAAM,EAAE,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,CAAC;QAE5B,IAAI,EAAE,IAAI,QAAQ,IAAI,eAAe,EAAE;YACrC,oBAAoB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;SACpC;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAqB;QACzC,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,eAAe;QACzB,SAAS,EAAE,WAAW,CAAC,MAAM;QAC7B,QAAQ,EAAE,iBAAiB;KAC5B,CAAC;IAEF,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,CACnB,oBAAC,iBAAiB,IAChB,GAAG,EAAE,WAAW,CAAC,MAAM,EACvB,QAAQ,EAAC,MAAM,EACf,SAAS,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,YAAY,EACjD,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC,EAC3C,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,mBAAmB,GAClC,CACH,CAAC;IAEF,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;AACtC,CAAC;AAED,eAAe,SAAS,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useState } from 'react';\n\nimport PanelResizeHandle from '../../internal/components/panel-resize-handle';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { AppLayoutProps } from '../interfaces';\nimport { SizeControlProps } from './interfaces';\nimport { FocusControlRefs } from './use-focus-control';\nimport { useKeyboardEvents } from './use-keyboard-events';\nimport { usePointerEvents } from './use-pointer-events';\n\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport interface DrawerResizeProps {\n  activeDrawer: AppLayoutProps.Drawer | undefined;\n  activeDrawerSize: number;\n  onActiveDrawerResize: (detail: { id: string; size: number }) => void;\n  drawersRefs: FocusControlRefs;\n  isToolsOpen: boolean;\n  drawersMaxWidth: number;\n  drawersMinWidth: number;\n}\n\nfunction useResize(\n  drawerRefObject: React.RefObject<HTMLDivElement>,\n  {\n    activeDrawer,\n    activeDrawerSize,\n    onActiveDrawerResize,\n    drawersRefs,\n    isToolsOpen,\n    drawersMinWidth,\n    drawersMaxWidth,\n  }: DrawerResizeProps\n) {\n  const [relativeSize, setRelativeSize] = useState(0);\n\n  const drawerSize = !activeDrawer && !isToolsOpen ? 0 : activeDrawerSize;\n\n  useEffect(() => {\n    // effects are called inside out in the components tree\n    // wait one frame to allow app-layout to complete its calculations\n    const handle = requestAnimationFrame(() => {\n      const maxSize = drawersMaxWidth;\n      setRelativeSize(((drawerSize - drawersMinWidth) / (maxSize - drawersMinWidth)) * 100);\n    });\n    return () => cancelAnimationFrame(handle);\n  }, [drawerSize, drawersMaxWidth, drawersMinWidth]);\n\n  const setSidePanelWidth = (width: number) => {\n    const maxWidth = drawersMaxWidth;\n    const size = getLimitedValue(drawersMinWidth, width, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (id && maxWidth >= drawersMinWidth) {\n      onActiveDrawerResize({ size, id });\n    }\n  };\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef: drawerRefObject,\n    handleRef: drawersRefs.slider,\n    onResize: setSidePanelWidth,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  const resizeHandle = (\n    <PanelResizeHandle\n      ref={drawersRefs.slider}\n      position=\"side\"\n      ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n      ariaValuenow={relativeSize}\n      className={testutilStyles['drawers-slider']}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n    />\n  );\n\n  return { resizeHandle, drawerSize };\n}\n\nexport default useResize;\n"]}
+{"version":3,"file":"use-resize.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,iBAAiB,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAIrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAY3D,SAAS,SAAS,CAChB,eAAgD,EAChD,EACE,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,eAAe,EACf,eAAe,GACG;;IAEpB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,CAAC,YAAY,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAExE,SAAS,CAAC,GAAG,EAAE;QACb,uDAAuD;QACvD,kEAAkE;QAClE,MAAM,MAAM,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACxC,MAAM,OAAO,GAAG,eAAe,CAAC;YAChC,eAAe,CAAC,CAAC,CAAC,UAAU,GAAG,eAAe,CAAC,GAAG,CAAC,OAAO,GAAG,eAAe,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QACxF,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAEnD,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC1C,MAAM,QAAQ,GAAG,eAAe,CAAC;QACjC,MAAM,IAAI,GAAG,eAAe,CAAC,eAAe,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;QAC/D,MAAM,EAAE,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,CAAC;QAE5B,IAAI,EAAE,IAAI,QAAQ,IAAI,eAAe,EAAE;YACrC,oBAAoB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;SACpC;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAqB;QACzC,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,eAAe;QACzB,SAAS,EAAE,WAAW,CAAC,MAAM;QAC7B,QAAQ,EAAE,iBAAiB;KAC5B,CAAC;IAEF,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,CACnB,oBAAC,iBAAiB,IAChB,GAAG,EAAE,WAAW,CAAC,MAAM,EACvB,QAAQ,EAAC,MAAM,EACf,SAAS,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,YAAY,EACjD,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC,EAC3C,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,mBAAmB,GAClC,CACH,CAAC;IAEF,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;AACtC,CAAC;AAED,eAAe,SAAS,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useState } from 'react';\n\nimport PanelResizeHandle from '../../internal/components/panel-resize-handle';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { AppLayoutProps } from '../interfaces';\nimport { SizeControlProps } from './interfaces';\nimport { FocusControlRefs } from './use-focus-control';\nimport { useKeyboardEvents } from './use-keyboard-events';\nimport { usePointerEvents } from './use-pointer-events';\n\nimport testutilStyles from '../test-classes/styles.css.js';\n\ninterface DrawerResizeProps {\n  activeDrawer: AppLayoutProps.Drawer | undefined;\n  activeDrawerSize: number;\n  onActiveDrawerResize: (detail: { id: string; size: number }) => void;\n  drawersRefs: FocusControlRefs;\n  isToolsOpen: boolean;\n  drawersMaxWidth: number;\n  drawersMinWidth: number;\n}\n\nfunction useResize(\n  drawerRefObject: React.RefObject<HTMLDivElement>,\n  {\n    activeDrawer,\n    activeDrawerSize,\n    onActiveDrawerResize,\n    drawersRefs,\n    isToolsOpen,\n    drawersMinWidth,\n    drawersMaxWidth,\n  }: DrawerResizeProps\n) {\n  const [relativeSize, setRelativeSize] = useState(0);\n\n  const drawerSize = !activeDrawer && !isToolsOpen ? 0 : activeDrawerSize;\n\n  useEffect(() => {\n    // effects are called inside out in the components tree\n    // wait one frame to allow app-layout to complete its calculations\n    const handle = requestAnimationFrame(() => {\n      const maxSize = drawersMaxWidth;\n      setRelativeSize(((drawerSize - drawersMinWidth) / (maxSize - drawersMinWidth)) * 100);\n    });\n    return () => cancelAnimationFrame(handle);\n  }, [drawerSize, drawersMaxWidth, drawersMinWidth]);\n\n  const setSidePanelWidth = (width: number) => {\n    const maxWidth = drawersMaxWidth;\n    const size = getLimitedValue(drawersMinWidth, width, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (id && maxWidth >= drawersMinWidth) {\n      onActiveDrawerResize({ size, id });\n    }\n  };\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef: drawerRefObject,\n    handleRef: drawersRefs.slider,\n    onResize: setSidePanelWidth,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  const resizeHandle = (\n    <PanelResizeHandle\n      ref={drawersRefs.slider}\n      position=\"side\"\n      ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n      ariaValuenow={relativeSize}\n      className={testutilStyles['drawers-slider']}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n    />\n  );\n\n  return { resizeHandle, drawerSize };\n}\n\nexport default useResize;\n"]}

package/app-layout/utils/use-split-panel-focus-control.d.ts

@@ -1,6 +1,6 @@
 import { DependencyList, RefObject } from 'react';
 import { Focusable } from './use-focus-control';
-export type SplitPanelLastInteraction = {
+type SplitPanelLastInteraction = {
     type: 'open';
 } | {
     type: 'close';
@@ -17,4 +17,5 @@ export interface SplitPanelFocusControlState {
     setLastInteraction: (interaction: SplitPanelLastInteraction) => void;
 }
 export declare function useSplitPanelFocusControl(dependencies: DependencyList): SplitPanelFocusControlState;
+export {};
 //# sourceMappingURL=use-split-panel-focus-control.d.ts.map

package/app-layout/utils/use-split-panel-focus-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-split-panel-focus-control.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-split-panel-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,MAAM,yBAAyB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC;AAEpG,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAClC,WAAW,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AACD,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,0BAA0B,CAAC;IACjC,kBAAkB,EAAE,CAAC,WAAW,EAAE,yBAAyB,KAAK,IAAI,CAAC;CACtE;AAED,wBAAgB,yBAAyB,CAAC,YAAY,EAAE,cAAc,GAAG,2BAA2B,CA4BnG"}
+{"version":3,"file":"use-split-panel-focus-control.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-split-panel-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,KAAK,yBAAyB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC;AAE7F,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAClC,WAAW,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AACD,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,0BAA0B,CAAC;IACjC,kBAAkB,EAAE,CAAC,WAAW,EAAE,yBAAyB,KAAK,IAAI,CAAC;CACtE;AAED,wBAAgB,yBAAyB,CAAC,YAAY,EAAE,cAAc,GAAG,2BAA2B,CA4BnG"}

package/app-layout/utils/use-split-panel-focus-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-split-panel-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-split-panel-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAA6B,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAgBrE,MAAM,UAAU,yBAAyB,CAAC,YAA4B;IACpE,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAY,IAAI,CAAC;QAC/B,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;QACpC,WAAW,EAAE,MAAM,CAAY,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,eAAe,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;;QACb,QAAQ,MAAA,eAAe,CAAC,OAAO,0CAAE,IAAI,EAAE;YACrC,KAAK,MAAM;gBACT,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;YACR,KAAK,OAAO;gBACV,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;YACR,KAAK,UAAU;gBACb,MAAA,IAAI,CAAC,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAClC,MAAM;SACT;QACD,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,uDAAuD;IACzD,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,OAAO;QACL,IAAI;QACJ,kBAAkB,EAAE,CAAC,WAAsC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,WAAW,CAAC;KACxG,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DependencyList, RefObject, useEffect, useRef } from 'react';\n\nimport { Focusable } from './use-focus-control';\n\nexport type SplitPanelLastInteraction = { type: 'open' } | { type: 'close' } | { type: 'position' };\n\nexport interface SplitPanelFocusControlRefs {\n  toggle: RefObject<Focusable>;\n  slider: RefObject<HTMLDivElement>;\n  preferences: RefObject<Focusable>;\n}\nexport interface SplitPanelFocusControlState {\n  refs: SplitPanelFocusControlRefs;\n  setLastInteraction: (interaction: SplitPanelLastInteraction) => void;\n}\n\nexport function useSplitPanelFocusControl(dependencies: DependencyList): SplitPanelFocusControlState {\n  const refs = {\n    toggle: useRef<Focusable>(null),\n    slider: useRef<HTMLDivElement>(null),\n    preferences: useRef<Focusable>(null),\n  };\n  const lastInteraction = useRef<SplitPanelLastInteraction | null>(null);\n\n  useEffect(() => {\n    switch (lastInteraction.current?.type) {\n      case 'open':\n        refs.slider.current?.focus();\n        break;\n      case 'close':\n        refs.toggle.current?.focus();\n        break;\n      case 'position':\n        refs.preferences.current?.focus();\n        break;\n    }\n    lastInteraction.current = null;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, dependencies);\n\n  return {\n    refs,\n    setLastInteraction: (interaction: SplitPanelLastInteraction) => (lastInteraction.current = interaction),\n  };\n}\n"]}
+{"version":3,"file":"use-split-panel-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-split-panel-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAA6B,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAgBrE,MAAM,UAAU,yBAAyB,CAAC,YAA4B;IACpE,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAY,IAAI,CAAC;QAC/B,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;QACpC,WAAW,EAAE,MAAM,CAAY,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,eAAe,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;;QACb,QAAQ,MAAA,eAAe,CAAC,OAAO,0CAAE,IAAI,EAAE;YACrC,KAAK,MAAM;gBACT,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;YACR,KAAK,OAAO;gBACV,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;YACR,KAAK,UAAU;gBACb,MAAA,IAAI,CAAC,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAClC,MAAM;SACT;QACD,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,uDAAuD;IACzD,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,OAAO;QACL,IAAI;QACJ,kBAAkB,EAAE,CAAC,WAAsC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,WAAW,CAAC;KACxG,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DependencyList, RefObject, useEffect, useRef } from 'react';\n\nimport { Focusable } from './use-focus-control';\n\ntype SplitPanelLastInteraction = { type: 'open' } | { type: 'close' } | { type: 'position' };\n\nexport interface SplitPanelFocusControlRefs {\n  toggle: RefObject<Focusable>;\n  slider: RefObject<HTMLDivElement>;\n  preferences: RefObject<Focusable>;\n}\nexport interface SplitPanelFocusControlState {\n  refs: SplitPanelFocusControlRefs;\n  setLastInteraction: (interaction: SplitPanelLastInteraction) => void;\n}\n\nexport function useSplitPanelFocusControl(dependencies: DependencyList): SplitPanelFocusControlState {\n  const refs = {\n    toggle: useRef<Focusable>(null),\n    slider: useRef<HTMLDivElement>(null),\n    preferences: useRef<Focusable>(null),\n  };\n  const lastInteraction = useRef<SplitPanelLastInteraction | null>(null);\n\n  useEffect(() => {\n    switch (lastInteraction.current?.type) {\n      case 'open':\n        refs.slider.current?.focus();\n        break;\n      case 'close':\n        refs.toggle.current?.focus();\n        break;\n      case 'position':\n        refs.preferences.current?.focus();\n        break;\n    }\n    lastInteraction.current = null;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, dependencies);\n\n  return {\n    refs,\n    setLastInteraction: (interaction: SplitPanelLastInteraction) => (lastInteraction.current = interaction),\n  };\n}\n"]}

package/app-layout/visual-refresh/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/context.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/context.tsx"],"names":[],"mappings":"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"}

package/app-layout/visual-refresh/context.js

@@ -11,6 +11,7 @@ import { useMobile } from '../../internal/hooks/use-mobile';
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';
 import { SPLIT_PANEL_MIN_WIDTH } from '../split-panel';
+import { shouldSplitPanelBeForcedToBottom } from '../split-panel/split-panel-forced-position';
 import { useDrawers } from '../utils/use-drawers';
 import { useFocusControl } from '../utils/use-focus-control';
 import useResize from '../utils/use-resize';
@@ -114,14 +115,10 @@ export const AppLayoutInternalsProvider = React.forwardRef((props, forwardRef) =
         setSplitPanelLastInteraction({ type: isSplitPanelOpen ? 'close' : 'open' });
         fireNonCancelableEvent(props.onSplitPanelToggle, { open: !isSplitPanelOpen });
     }, [props.onSplitPanelToggle, isSplitPanelOpen, setIsSplitPanelOpen, setSplitPanelLastInteraction]);
-    /**
-     * The Split Panel will be in forced (bottom) position if the defined minimum width is
-     * greater than the maximum width. In other words, the maximum width is the currently
-     * available horizontal space based on all other components that are rendered. If the
-     * minimum width exceeds this value then there is not enough horizontal space and we must
-     * force it to the bottom position.
-     */
-    const isSplitPanelForcedPosition = isMobile || SPLIT_PANEL_MIN_WIDTH > splitPanelMaxWidth;
+    const isSplitPanelForcedPosition = shouldSplitPanelBeForcedToBottom({
+        isMobile,
+        availableWidthForSplitPanel: splitPanelMaxWidth,
+    });
     const splitPanelPosition = getSplitPanelPosition(isSplitPanelForcedPosition, splitPanelPreferences);
     /**
      * The useControllable hook will set the default size of the SplitPanel based