npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.476 → 3.0.478 - Mend

@cloudscape-design/components-themeable 3.0.476 → 3.0.478

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (321) hide show

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

@@ -94,50 +94,49 @@ 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_fqoh9_97:not(#\9) {
+.awsui_block-body-scroll_19d8l_14092_97:not(#\9) {
   overflow: hidden;
 }
-.awsui_mobile-bar_19d8l_fqoh9_101:not(#\9) {
+.awsui_mobile-bar_19d8l_14092_101:not(#\9) {
   position: sticky;
   display: flex;
   align-items: center;
   flex-shrink: 0;
   z-index: 1000;
-  inline-size: 100%;
+  width: 100%;
   box-sizing: border-box;
   background-color: var(--color-background-layout-mobile-panel-8tuodx, #ffffff);
   box-shadow: var(--shadow-panel-zt257m, 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));
-  block-size: calc(2 * var(--space-m-kpg8id, 16px) + var(--space-scaled-xs-x91h81, 8px));
+  height: calc(2 * var(--space-m-kpg8id, 16px) + var(--space-scaled-xs-x91h81, 8px));
 }
-.awsui_mobile-bar-breadcrumbs_19d8l_fqoh9_114:not(#\9) {
-  min-inline-size: 0;
+.awsui_mobile-bar-breadcrumbs_19d8l_14092_114:not(#\9) {
+  min-width: 0;
   flex: 1;
-  margin-inline-start: var(--space-m-kpg8id, 16px);
-  margin-inline-end: var(--space-m-kpg8id, 16px);
+  margin-left: var(--space-m-kpg8id, 16px);
+  margin-right: var(--space-m-kpg8id, 16px);
 }
-.awsui_mobile-toggle_19d8l_fqoh9_121:not(#\9) {
+.awsui_mobile-toggle_19d8l_14092_121:not(#\9) {
   box-sizing: border-box;
   cursor: pointer;
   z-index: 1;
-  padding-block: var(--space-xxs-9rrxti, 4px);
-  padding-inline: 7px;
-  inline-size: 40px;
+  padding: var(--space-xxs-9rrxti, 4px) 7px;
+  width: 40px;
   color: var(--color-text-interactive-default-dt26aj, #545b64);
 }
-.awsui_mobile-toggle-type-navigation_19d8l_fqoh9_130:not(#\9) {
-  border-inline-end: 1px solid var(--color-border-layout-py7xy0, #d5dbdb);
+.awsui_mobile-toggle-type-navigation_19d8l_14092_129:not(#\9) {
+  border-right: 1px solid var(--color-border-layout-py7xy0, #d5dbdb);
 }
-.awsui_mobile-toggle-type-tools_19d8l_fqoh9_133:not(#\9), .awsui_mobile-toggle-type-drawer_19d8l_fqoh9_133:not(#\9) {
-  border-inline-start: 1px solid var(--color-border-layout-py7xy0, #d5dbdb);
+.awsui_mobile-toggle-type-tools_19d8l_14092_132:not(#\9), .awsui_mobile-toggle-type-drawer_19d8l_14092_132:not(#\9) {
+  border-left: 1px solid var(--color-border-layout-py7xy0, #d5dbdb);
 }
-.awsui_mobile-toggle_19d8l_fqoh9_121:not(#\9):hover {
+.awsui_mobile-toggle_19d8l_14092_121:not(#\9):hover {
   background: var(--color-background-layout-panel-hover-58t7r5, #eaeded);
 }
-.awsui_drawers-container_19d8l_fqoh9_140:not(#\9) {
+.awsui_drawers-container_19d8l_14092_139:not(#\9) {
   display: flex;
   align-items: stretch;
 }

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

@@ -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_fqoh9_97",
-  "mobile-bar": "awsui_mobile-bar_19d8l_fqoh9_101",
-  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_fqoh9_114",
-  "mobile-toggle": "awsui_mobile-toggle_19d8l_fqoh9_121",
-  "mobile-toggle-type-navigation": "awsui_mobile-toggle-type-navigation_19d8l_fqoh9_130",
-  "mobile-toggle-type-tools": "awsui_mobile-toggle-type-tools_19d8l_fqoh9_133",
-  "mobile-toggle-type-drawer": "awsui_mobile-toggle-type-drawer_19d8l_fqoh9_133",
-  "drawers-container": "awsui_drawers-container_19d8l_fqoh9_140"
+  "block-body-scroll": "awsui_block-body-scroll_19d8l_14092_97",
+  "mobile-bar": "awsui_mobile-bar_19d8l_14092_101",
+  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_14092_114",
+  "mobile-toggle": "awsui_mobile-toggle_19d8l_14092_121",
+  "mobile-toggle-type-navigation": "awsui_mobile-toggle-type-navigation_19d8l_14092_129",
+  "mobile-toggle-type-tools": "awsui_mobile-toggle-type-tools_19d8l_14092_132",
+  "mobile-toggle-type-drawer": "awsui_mobile-toggle-type-drawer_19d8l_14092_132",
+  "drawers-container": "awsui_drawers-container_19d8l_14092_139"
 };

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

@@ -1,8 +1,8 @@
     import './styles.scoped.css';
     export default {
-  "notifications": "awsui_notifications_1hmm4_1rec0_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1rec0_10",
-  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1rec0_25"
+  "notifications": "awsui_notifications_1hmm4_jljy6_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_jljy6_10",
+  "no-content-paddings": "awsui_no-content-paddings_1hmm4_jljy6_25"
 };

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

@@ -6,23 +6,23 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_notifications_1hmm4_1rec0_9:not(#\9),
-.awsui_notifications-sticky_1hmm4_1rec0_10:not(#\9) {
+.awsui_notifications_1hmm4_jljy6_9:not(#\9),
+.awsui_notifications-sticky_1hmm4_jljy6_10:not(#\9) {
   z-index: 850;
 }
-.awsui_notifications_1hmm4_1rec0_9:not(#\9) {
+.awsui_notifications_1hmm4_jljy6_9:not(#\9) {
   /* This is necessary for the z-index to have effect */
   position: relative;
 }
-.awsui_notifications-sticky_1hmm4_1rec0_10:not(#\9) {
-  inset-block-start: 0;
+.awsui_notifications-sticky_1hmm4_jljy6_10:not(#\9) {
+  top: 0;
   position: sticky;
   --awsui-flashbar-sticky-bottom-margin-y98gph: var(--space-xxl-pd3205, 32px);
 }
-.awsui_no-content-paddings_1hmm4_1rec0_25:not(#\9) {
+.awsui_no-content-paddings_1hmm4_jljy6_25:not(#\9) {
   /*
   When using the disableContentPaddings option, the Flashbar will use this custom property to add additional space
   when the notification bar is rendered, to prevent it from overlapping the content.

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

@@ -2,8 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "notifications": "awsui_notifications_1hmm4_1rec0_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1rec0_10",
-  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1rec0_25"
+  "notifications": "awsui_notifications_1hmm4_jljy6_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_jljy6_10",
+  "no-content-paddings": "awsui_no-content-paddings_1hmm4_jljy6_25"
 };

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

@@ -1,7 +1,7 @@
     import './styles.scoped.css';
     export default {
-  "drawer-displayed": "awsui_drawer-displayed_1lh3u_ogmrn_97",
-  "drawer-content": "awsui_drawer-content_1lh3u_ogmrn_101"
+  "drawer-displayed": "awsui_drawer-displayed_1lh3u_475ep_97",
+  "drawer-content": "awsui_drawer-content_1lh3u_475ep_101"
 };

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

@@ -94,10 +94,10 @@ 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_drawer-displayed_1lh3u_ogmrn_97:not(#\9) {
-  min-inline-size: 40px;
+.awsui_drawer-displayed_1lh3u_475ep_97:not(#\9) {
+  min-width: 40px;
 }
-.awsui_drawer-content_1lh3u_ogmrn_101:not(#\9) {
+.awsui_drawer-content_1lh3u_475ep_101:not(#\9) {
   position: fixed;
 }

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

@@ -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_ogmrn_97",
-  "drawer-content": "awsui_drawer-content_1lh3u_ogmrn_101"
+  "drawer-displayed": "awsui_drawer-displayed_1lh3u_475ep_97",
+  "drawer-content": "awsui_drawer-content_1lh3u_475ep_101"
 };

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

@@ -1,21 +1,21 @@
     import './styles.scoped.css';
     export default {
-  "resize-active": "awsui_resize-active_lm6vo_1vqw8_98",
-  "resize-side": "awsui_resize-side_lm6vo_1vqw8_104",
-  "resize-bottom": "awsui_resize-bottom_lm6vo_1vqw8_107",
-  "with-motion": "awsui_with-motion_lm6vo_1vqw8_112",
-  "root": "awsui_root_lm6vo_1vqw8_127",
-  "root-no-scroll": "awsui_root-no-scroll_lm6vo_1vqw8_134",
-  "layout": "awsui_layout_lm6vo_1vqw8_139",
-  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_1vqw8_145",
-  "layout-main": "awsui_layout-main_lm6vo_1vqw8_149",
-  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_1vqw8_155",
-  "unfocusable": "awsui_unfocusable_lm6vo_1vqw8_160",
-  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_1vqw8_164",
-  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_1vqw8_169",
-  "content-wrapper": "awsui_content-wrapper_lm6vo_1vqw8_173",
-  "content-overlapped": "awsui_content-overlapped_lm6vo_1vqw8_177",
-  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_1vqw8_181"
+  "resize-active": "awsui_resize-active_lm6vo_1ekij_98",
+  "resize-side": "awsui_resize-side_lm6vo_1ekij_104",
+  "resize-bottom": "awsui_resize-bottom_lm6vo_1ekij_107",
+  "with-motion": "awsui_with-motion_lm6vo_1ekij_112",
+  "root": "awsui_root_lm6vo_1ekij_127",
+  "root-no-scroll": "awsui_root-no-scroll_lm6vo_1ekij_134",
+  "layout": "awsui_layout_lm6vo_1ekij_139",
+  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_1ekij_145",
+  "layout-main": "awsui_layout-main_lm6vo_1ekij_149",
+  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_1ekij_155",
+  "unfocusable": "awsui_unfocusable_lm6vo_1ekij_160",
+  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_1ekij_164",
+  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_1ekij_169",
+  "content-wrapper": "awsui_content-wrapper_lm6vo_1ekij_173",
+  "content-overlapped": "awsui_content-overlapped_lm6vo_1ekij_177",
+  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_1ekij_181"
 };

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

@@ -95,90 +95,90 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  SPDX-License-Identifier: Apache-2.0
 */
 /* stylelint-disable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
-.awsui_resize-active_lm6vo_1vqw8_98 *:not(#\9) {
+.awsui_resize-active_lm6vo_1ekij_98 *:not(#\9) {
   -webkit-user-select: none;
           user-select: none;
 }
-.awsui_resize-active_lm6vo_1vqw8_98 iframe:not(#\9) {
+.awsui_resize-active_lm6vo_1ekij_98 iframe:not(#\9) {
   pointer-events: none;
 }
-.awsui_resize-side_lm6vo_1vqw8_104 *:not(#\9) {
+.awsui_resize-side_lm6vo_1ekij_104 *:not(#\9) {
   cursor: ew-resize;
 }
-.awsui_resize-bottom_lm6vo_1vqw8_107 *:not(#\9) {
+.awsui_resize-bottom_lm6vo_1ekij_107 *:not(#\9) {
   cursor: ns-resize;
 }
 /* stylelint-enable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
-.awsui_with-motion_lm6vo_1vqw8_112:not(#\9) {
+.awsui_with-motion_lm6vo_1ekij_112:not(#\9) {
   transition: var(--motion-duration-refresh-only-fast-y7h37k, 115ms);
   transition-property: border-color, opacity, width;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_with-motion_lm6vo_1vqw8_112:not(#\9) {
+  .awsui_with-motion_lm6vo_1ekij_112:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_with-motion_lm6vo_1vqw8_112:not(#\9), .awsui-mode-entering .awsui_with-motion_lm6vo_1vqw8_112:not(#\9) {
+.awsui-motion-disabled .awsui_with-motion_lm6vo_1ekij_112:not(#\9), .awsui-mode-entering .awsui_with-motion_lm6vo_1ekij_112:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_root_lm6vo_1vqw8_127:not(#\9) {
+.awsui_root_lm6vo_1ekij_127:not(#\9) {
   display: flex;
   flex-direction: column;
   position: relative;
   color: var(--color-text-body-default-ki9w9u, #16191f);
 }
-.awsui_root-no-scroll_lm6vo_1vqw8_134:not(#\9) {
+.awsui_root-no-scroll_lm6vo_1ekij_134:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_layout_lm6vo_1vqw8_139:not(#\9) {
+.awsui_layout_lm6vo_1ekij_139: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_1vqw8_145:not(#\9) {
+.awsui_layout-no-scroll_lm6vo_1ekij_145:not(#\9) {
   overflow: hidden;
 }
-.awsui_layout-main_lm6vo_1vqw8_149:not(#\9) {
+.awsui_layout-main_lm6vo_1ekij_149:not(#\9) {
   flex: 1;
-  min-inline-size: 0;
+  min-width: 0;
   background-color: var(--color-background-layout-main-td853a, #f2f3f3);
   position: relative;
 }
-.awsui_layout-main-scrollable_lm6vo_1vqw8_155:not(#\9) {
+.awsui_layout-main-scrollable_lm6vo_1ekij_155:not(#\9) {
   overflow: auto;
 }
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
-.awsui_unfocusable_lm6vo_1vqw8_160 *:not(#\9) {
+.awsui_unfocusable_lm6vo_1ekij_160 *:not(#\9) {
   visibility: hidden;
 }
-.awsui_breadcrumbs-desktop_lm6vo_1vqw8_164:not(#\9) {
-  padding-block-start: var(--space-scaled-m-er48cl, 16px);
-  padding-block-end: var(--space-scaled-s-9q8n2q, 12px);
+.awsui_breadcrumbs-desktop_lm6vo_1ekij_164:not(#\9) {
+  padding-top: var(--space-scaled-m-er48cl, 16px);
+  padding-bottom: var(--space-scaled-s-9q8n2q, 12px);
 }
-.awsui_content-header-wrapper_lm6vo_1vqw8_169:not(#\9) {
-  padding-block-end: var(--space-content-header-padding-bottom-d3iv03, 16px);
+.awsui_content-header-wrapper_lm6vo_1ekij_169:not(#\9) {
+  padding-bottom: var(--space-content-header-padding-bottom-d3iv03, 16px);
 }
-.awsui_content-wrapper_lm6vo_1vqw8_173:not(#\9) {
-  padding-block-end: var(--space-layout-content-bottom-ve4osc, 20px);
+.awsui_content-wrapper_lm6vo_1ekij_173:not(#\9) {
+  padding-bottom: var(--space-layout-content-bottom-ve4osc, 20px);
 }
-.awsui_content-overlapped_lm6vo_1vqw8_177:not(#\9) {
-  margin-block-start: calc(-1 * var(--space-dark-header-overlap-distance-f6oo6u, 0px));
+.awsui_content-overlapped_lm6vo_1ekij_177:not(#\9) {
+  margin-top: calc(-1 * var(--space-dark-header-overlap-distance-f6oo6u, 0px));
 }
-.awsui_content-extra-top-padding_lm6vo_1vqw8_181:not(#\9) {
-  padding-block-start: var(--space-scaled-m-er48cl, 16px);
+.awsui_content-extra-top-padding_lm6vo_1ekij_181:not(#\9) {
+  padding-top: var(--space-scaled-m-er48cl, 16px);
 }

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

@@ -2,21 +2,21 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "resize-active": "awsui_resize-active_lm6vo_1vqw8_98",
-  "resize-side": "awsui_resize-side_lm6vo_1vqw8_104",
-  "resize-bottom": "awsui_resize-bottom_lm6vo_1vqw8_107",
-  "with-motion": "awsui_with-motion_lm6vo_1vqw8_112",
-  "root": "awsui_root_lm6vo_1vqw8_127",
-  "root-no-scroll": "awsui_root-no-scroll_lm6vo_1vqw8_134",
-  "layout": "awsui_layout_lm6vo_1vqw8_139",
-  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_1vqw8_145",
-  "layout-main": "awsui_layout-main_lm6vo_1vqw8_149",
-  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_1vqw8_155",
-  "unfocusable": "awsui_unfocusable_lm6vo_1vqw8_160",
-  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_1vqw8_164",
-  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_1vqw8_169",
-  "content-wrapper": "awsui_content-wrapper_lm6vo_1vqw8_173",
-  "content-overlapped": "awsui_content-overlapped_lm6vo_1vqw8_177",
-  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_1vqw8_181"
+  "resize-active": "awsui_resize-active_lm6vo_1ekij_98",
+  "resize-side": "awsui_resize-side_lm6vo_1ekij_104",
+  "resize-bottom": "awsui_resize-bottom_lm6vo_1ekij_107",
+  "with-motion": "awsui_with-motion_lm6vo_1ekij_112",
+  "root": "awsui_root_lm6vo_1ekij_127",
+  "root-no-scroll": "awsui_root-no-scroll_lm6vo_1ekij_134",
+  "layout": "awsui_layout_lm6vo_1ekij_139",
+  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_1ekij_145",
+  "layout-main": "awsui_layout-main_lm6vo_1ekij_149",
+  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_1ekij_155",
+  "unfocusable": "awsui_unfocusable_lm6vo_1ekij_160",
+  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_1ekij_164",
+  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_1ekij_169",
+  "content-wrapper": "awsui_content-wrapper_lm6vo_1ekij_173",
+  "content-overlapped": "awsui_content-overlapped_lm6vo_1ekij_177",
+  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_1ekij_181"
 };

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

@@ -1,7 +1,7 @@
     import './styles.scoped.css';
     export default {
-  "toggle-button": "awsui_toggle-button_16w0h_f3dfh_93",
-  "close-button": "awsui_close-button_16w0h_f3dfh_124"
+  "toggle-button": "awsui_toggle-button_16w0h_aq5wz_93",
+  "close-button": "awsui_close-button_16w0h_aq5wz_123"
 };

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

@@ -90,26 +90,25 @@ 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_f3dfh_93:not(#\9) {
+.awsui_toggle-button_16w0h_aq5wz_93:not(#\9) {
   cursor: pointer;
   border: 0;
-  padding-block: calc(var(--space-scaled-xxs-t7ij38, 4px) + 1px);
-  padding-inline: calc(var(--space-xxs-9rrxti, 4px) + 1px);
+  padding: calc(var(--space-scaled-xxs-t7ij38, 4px) + 1px) calc(var(--space-xxs-9rrxti, 4px) + 1px);
   background: transparent;
   color: currentColor;
 }
-.awsui_toggle-button_16w0h_f3dfh_93:not(#\9):focus {
+.awsui_toggle-button_16w0h_aq5wz_93:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_f3dfh_93:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_aq5wz_93:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_f3dfh_93:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_aq5wz_93:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-button-inline-icon-focus-outline-gutter-td260a, 3px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_f3dfh_93:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_aq5wz_93:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -121,10 +120,10 @@ body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_f3dfh_93:not(#\9)
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_close-button_16w0h_f3dfh_124:not(#\9) {
+.awsui_close-button_16w0h_aq5wz_123:not(#\9) {
   position: absolute;
   outline: none;
-  inset-inline-end: var(--space-m-kpg8id, 16px);
-  inset-block-start: var(--size-vertical-panel-icon-offset-04nxf8, 15px);
+  right: var(--space-m-kpg8id, 16px);
+  top: var(--size-vertical-panel-icon-offset-04nxf8, 15px);
   z-index: 1;
 }

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

@@ -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_f3dfh_93",
-  "close-button": "awsui_close-button_16w0h_f3dfh_124"
+  "toggle-button": "awsui_toggle-button_16w0h_aq5wz_93",
+  "close-button": "awsui_close-button_16w0h_aq5wz_123"
 };

package/lib/internal/template/app-layout/utils/use-drawers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-drawers.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawers.ts"],"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, { useEffect, useRef, useState } from 'react';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { BetaDrawersProps } from '../drawer/interfaces';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { fireNonCancelableEvent, NonCancelableCustomEvent } from '../../internal/events';\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { convertRuntimeDrawers, DrawersLayout } from '../runtime-api';\nimport { AppLayoutProps } from '../interfaces';\nimport { togglesConfig } from '../toggles';\n\nexport const TOOLS_DRAWER_ID = 'awsui-internal-tools';\n\ninterface ToolsProps {\n toolsHide: boolean \| undefined;\n toolsOpen: boolean \| undefined;\n toolsWidth: number;\n tools: React.ReactNode \| undefined;\n onToolsToggle: (newOpen: boolean) => void;\n ariaLabels: AppLayoutProps.Labels \| undefined;\n}\n\nfunction getToolsDrawerItem(props: ToolsProps): AppLayoutProps.Drawer \| null {\n if (props.toolsHide) {\n return null;\n }\n const { iconName, getLabels } = togglesConfig.tools;\n const { mainLabel, closeLabel, openLabel } = getLabels(props.ariaLabels);\n return {\n id: TOOLS_DRAWER_ID,\n content: props.tools,\n resizable: false,\n ariaLabels: {\n triggerButton: openLabel,\n closeButton: closeLabel,\n drawerName: mainLabel ?? '',\n },\n trigger: {\n iconName: iconName,\n },\n };\n}\n\nfunction useRuntimeDrawers(\n disableRuntimeDrawers: boolean \| undefined,\n activeDrawerId: string \| null,\n onActiveDrawerChange: (newDrawerId: string \| null) => void\n) {\n const [runtimeDrawers, setRuntimeDrawers] = useState<DrawersLayout>({ before: [], after: [] });\n const onActiveDrawerChangeStable = useStableCallback(onActiveDrawerChange);\n\n const drawerWasOpenRef = useRef(false);\n drawerWasOpenRef.current = drawerWasOpenRef.current \|\| !!activeDrawerId;\n\n useEffect(() => {\n if (disableRuntimeDrawers) {\n return;\n }\n const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {\n setRuntimeDrawers(convertRuntimeDrawers(drawers));\n if (!drawerWasOpenRef.current) {\n const defaultActiveDrawer = sortByPriority(drawers).find(drawer => drawer.defaultActive);\n if (defaultActiveDrawer) {\n onActiveDrawerChangeStable(defaultActiveDrawer.id);\n }\n }\n });\n return () => {\n unsubscribe();\n setRuntimeDrawers({ before: [], after: [] });\n };\n }, [disableRuntimeDrawers, onActiveDrawerChangeStable]);\n\n return runtimeDrawers;\n}\n\nfunction isBetaDrawers(drawers: unknown): drawers is BetaDrawersProps {\n return typeof drawers === 'object' && !!drawers && !Array.isArray(drawers) && 'items' in drawers;\n}\n\nfunction convertBetaApi(drawers: BetaDrawersProps, ariaLabels: AppLayoutProps['ariaLabels']) {\n return {\n drawers: drawers.items.map(\n (betaDrawer): AppLayoutProps.Drawer => ({\n ...betaDrawer,\n ariaLabels: { drawerName: betaDrawer.ariaLabels?.content ?? '', ...betaDrawer.ariaLabels },\n onResize: event => {\n fireNonCancelableEvent(betaDrawer.onResize, { size: event.detail.size, id: betaDrawer.id });\n fireNonCancelableEvent(drawers.onResize, { size: event.detail.size, id: betaDrawer.id });\n },\n })\n ),\n controlledActiveDrawerId: drawers.activeDrawerId,\n onDrawerChange: (event: NonCancelableCustomEvent<{ activeDrawerId: string \| null }>) =>\n fireNonCancelableEvent(drawers.onChange, event.detail.activeDrawerId),\n ariaLabels: {\n ...ariaLabels,\n drawers: drawers.ariaLabel,\n drawersOverflow: drawers.overflowAriaLabel,\n drawersOverflowWithBadge: drawers.overflowWithBadgeAriaLabel,\n },\n };\n}\n\nfunction applyToolsDrawer(toolsProps: ToolsProps, runtimeDrawers: DrawersLayout) {\n const drawers = [...runtimeDrawers.before, ...runtimeDrawers.after];\n if (drawers.length === 0) {\n return null;\n }\n const toolsItem = getToolsDrawerItem(toolsProps);\n if (toolsItem) {\n drawers.unshift(toolsItem);\n }\n\n return drawers;\n}\n\ntype UseDrawersProps = Pick<AppLayoutProps, 'drawers' \| 'activeDrawerId' \| 'onDrawerChange'> & {\n __disableRuntimeDrawers?: boolean;\n};\n\nexport function useDrawers(\n {\n drawers,\n activeDrawerId: controlledActiveDrawerId,\n onDrawerChange,\n __disableRuntimeDrawers: disableRuntimeDrawers,\n }: UseDrawersProps,\n ariaLabels: AppLayoutProps['ariaLabels'],\n toolsProps: ToolsProps\n) {\n if (isBetaDrawers(drawers)) {\n ({ drawers, controlledActiveDrawerId, onDrawerChange, ariaLabels } = convertBetaApi(drawers, ariaLabels));\n }\n\n const [activeDrawerId = null, setActiveDrawerId] = useControllable(controlledActiveDrawerId, onDrawerChange, null, {\n componentName: 'AppLayout',\n controlledProp: 'activeDrawerId',\n changeHandler: 'onChange',\n });\n const [drawerSizes, setDrawerSizes] = useState<Record<string, number>>({});\n\n function onActiveDrawerResize({ id, size }: { id: string; size: number }) {\n setDrawerSizes(oldSizes => ({ ...oldSizes, [id]: size }));\n fireNonCancelableEvent(activeDrawer?.onResize, { id, size });\n }\n\n function onActiveDrawerChange(newDrawerId: string \| null) {\n setActiveDrawerId(newDrawerId);\n if (hasOwnDrawers) {\n fireNonCancelableEvent(onDrawerChange, { activeDrawerId: newDrawerId });\n } else if (!toolsProps.toolsHide) {\n toolsProps.onToolsToggle(newDrawerId === TOOLS_DRAWER_ID);\n }\n }\n\n const hasOwnDrawers = !!drawers;\n const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange);\n const combinedDrawers = drawers\n ? [...runtimeDrawers.before, ...drawers, ...runtimeDrawers.after]\n : applyToolsDrawer(toolsProps, runtimeDrawers);\n // support toolsOpen in runtime-drawers-only mode\n let activeDrawerIdResolved = toolsProps?.toolsOpen && !hasOwnDrawers ? TOOLS_DRAWER_ID : activeDrawerId;\n const activeDrawer = combinedDrawers?.find(drawer => drawer.id === activeDrawerIdResolved);\n // ensure that id is only defined when the drawer exists\n activeDrawerIdResolved = activeDrawer?.id ?? null;\n\n const activeDrawerSize = activeDrawerIdResolved\n ? drawerSizes[activeDrawerIdResolved] ?? activeDrawer?.defaultSize ?? toolsProps.toolsWidth\n : toolsProps.toolsWidth;\n const minDrawerSize = Math.min(activeDrawer?.defaultSize ?? 290, 290);\n\n return {\n ariaLabelsWithDrawers: ariaLabels,\n drawers: combinedDrawers \|\| undefined,\n activeDrawer,\n activeDrawerId: activeDrawerIdResolved,\n activeDrawerSize,\n minDrawerSize,\n onActiveDrawerChange,\n onActiveDrawerResize,\n };\n}\n"]}
1	+ {"version":3,"file":"use-drawers.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawers.ts"],"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, { useEffect, useRef, useState } from 'react';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { BetaDrawersProps } from '../drawer/interfaces';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { fireNonCancelableEvent, NonCancelableCustomEvent } from '../../internal/events';\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { convertRuntimeDrawers, DrawersLayout } from '../runtime-api';\nimport { AppLayoutProps } from '../interfaces';\nimport { togglesConfig } from '../toggles';\n\nexport const TOOLS_DRAWER_ID = 'awsui-internal-tools';\n\ninterface ToolsProps {\n toolsHide: boolean \| undefined;\n toolsOpen: boolean \| undefined;\n toolsWidth: number;\n tools: React.ReactNode \| undefined;\n onToolsToggle: (newOpen: boolean) => void;\n ariaLabels: AppLayoutProps.Labels \| undefined;\n}\n\nfunction getToolsDrawerItem(props: ToolsProps): AppLayoutProps.Drawer \| null {\n if (props.toolsHide) {\n return null;\n }\n const { iconName, getLabels } = togglesConfig.tools;\n const { mainLabel, closeLabel, openLabel } = getLabels(props.ariaLabels);\n return {\n id: TOOLS_DRAWER_ID,\n content: props.tools,\n resizable: false,\n ariaLabels: {\n triggerButton: openLabel,\n closeButton: closeLabel,\n drawerName: mainLabel ?? '',\n },\n trigger: {\n iconName: iconName,\n },\n };\n}\n\nfunction useRuntimeDrawers(\n disableRuntimeDrawers: boolean \| undefined,\n activeDrawerId: string \| null,\n onActiveDrawerChange: (newDrawerId: string \| null) => void\n) {\n const [runtimeDrawers, setRuntimeDrawers] = useState<DrawersLayout>({ before: [], after: [] });\n const onActiveDrawerChangeStable = useStableCallback(onActiveDrawerChange);\n\n const drawerWasOpenRef = useRef(false);\n drawerWasOpenRef.current = drawerWasOpenRef.current \|\| !!activeDrawerId;\n\n useEffect(() => {\n if (disableRuntimeDrawers) {\n return;\n }\n const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {\n setRuntimeDrawers(convertRuntimeDrawers(drawers));\n if (!drawerWasOpenRef.current) {\n const defaultActiveDrawer = sortByPriority(drawers).find(drawer => drawer.defaultActive);\n if (defaultActiveDrawer) {\n onActiveDrawerChangeStable(defaultActiveDrawer.id);\n }\n }\n });\n return () => {\n unsubscribe();\n setRuntimeDrawers({ before: [], after: [] });\n };\n }, [disableRuntimeDrawers, onActiveDrawerChangeStable]);\n\n return runtimeDrawers;\n}\n\nfunction isBetaDrawers(drawers: unknown): drawers is BetaDrawersProps {\n return typeof drawers === 'object' && !!drawers && !Array.isArray(drawers) && 'items' in drawers;\n}\n\nfunction convertBetaApi(drawers: BetaDrawersProps, ariaLabels: AppLayoutProps['ariaLabels']) {\n return {\n drawers: drawers.items.map(\n (betaDrawer): AppLayoutProps.Drawer => ({\n ...betaDrawer,\n ariaLabels: { drawerName: betaDrawer.ariaLabels?.content ?? '', ...betaDrawer.ariaLabels },\n onResize: event => {\n fireNonCancelableEvent(betaDrawer.onResize, { size: event.detail.size, id: betaDrawer.id });\n fireNonCancelableEvent(drawers.onResize, { size: event.detail.size, id: betaDrawer.id });\n },\n })\n ),\n controlledActiveDrawerId: drawers.activeDrawerId,\n onDrawerChange: (event: NonCancelableCustomEvent<AppLayoutProps.DrawerChangeDetail>) =>\n fireNonCancelableEvent(drawers.onChange, event.detail.activeDrawerId),\n ariaLabels: {\n ...ariaLabels,\n drawers: drawers.ariaLabel,\n drawersOverflow: drawers.overflowAriaLabel,\n drawersOverflowWithBadge: drawers.overflowWithBadgeAriaLabel,\n },\n };\n}\n\nfunction applyToolsDrawer(toolsProps: ToolsProps, runtimeDrawers: DrawersLayout) {\n const drawers = [...runtimeDrawers.before, ...runtimeDrawers.after];\n if (drawers.length === 0) {\n return null;\n }\n const toolsItem = getToolsDrawerItem(toolsProps);\n if (toolsItem) {\n drawers.unshift(toolsItem);\n }\n\n return drawers;\n}\n\ntype UseDrawersProps = Pick<AppLayoutProps, 'drawers' \| 'activeDrawerId' \| 'onDrawerChange'> & {\n __disableRuntimeDrawers?: boolean;\n};\n\nexport function useDrawers(\n {\n drawers,\n activeDrawerId: controlledActiveDrawerId,\n onDrawerChange,\n __disableRuntimeDrawers: disableRuntimeDrawers,\n }: UseDrawersProps,\n ariaLabels: AppLayoutProps['ariaLabels'],\n toolsProps: ToolsProps\n) {\n if (isBetaDrawers(drawers)) {\n ({ drawers, controlledActiveDrawerId, onDrawerChange, ariaLabels } = convertBetaApi(drawers, ariaLabels));\n }\n\n const [activeDrawerId = null, setActiveDrawerId] = useControllable(controlledActiveDrawerId, onDrawerChange, null, {\n componentName: 'AppLayout',\n controlledProp: 'activeDrawerId',\n changeHandler: 'onChange',\n });\n const [drawerSizes, setDrawerSizes] = useState<Record<string, number>>({});\n\n function onActiveDrawerResize({ id, size }: { id: string; size: number }) {\n setDrawerSizes(oldSizes => ({ ...oldSizes, [id]: size }));\n fireNonCancelableEvent(activeDrawer?.onResize, { id, size });\n }\n\n function onActiveDrawerChange(newDrawerId: string \| null) {\n setActiveDrawerId(newDrawerId);\n if (hasOwnDrawers) {\n fireNonCancelableEvent(onDrawerChange, { activeDrawerId: newDrawerId });\n } else if (!toolsProps.toolsHide) {\n toolsProps.onToolsToggle(newDrawerId === TOOLS_DRAWER_ID);\n }\n }\n\n const hasOwnDrawers = !!drawers;\n const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange);\n const combinedDrawers = drawers\n ? [...runtimeDrawers.before, ...drawers, ...runtimeDrawers.after]\n : applyToolsDrawer(toolsProps, runtimeDrawers);\n // support toolsOpen in runtime-drawers-only mode\n let activeDrawerIdResolved = toolsProps?.toolsOpen && !hasOwnDrawers ? TOOLS_DRAWER_ID : activeDrawerId;\n const activeDrawer = combinedDrawers?.find(drawer => drawer.id === activeDrawerIdResolved);\n // ensure that id is only defined when the drawer exists\n activeDrawerIdResolved = activeDrawer?.id ?? null;\n\n const activeDrawerSize = activeDrawerIdResolved\n ? drawerSizes[activeDrawerIdResolved] ?? activeDrawer?.defaultSize ?? toolsProps.toolsWidth\n : toolsProps.toolsWidth;\n const minDrawerSize = Math.min(activeDrawer?.defaultSize ?? 290, 290);\n\n return {\n ariaLabelsWithDrawers: ariaLabels,\n drawers: combinedDrawers \|\| undefined,\n activeDrawer,\n activeDrawerId: activeDrawerIdResolved,\n activeDrawerSize,\n minDrawerSize,\n onActiveDrawerChange,\n onActiveDrawerResize,\n };\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh/context.js CHANGED Viewed

@@ -188,7 +188,7 @@ export const AppLayoutInternalsProvider = React.forwardRef((_a, forwardRef) => {
         displayed: false,
         ariaLabel: undefined,
     });
-    const splitPanelDisplayed = !!(splitPanelToggle.displayed || isSplitPanelOpen);
+    const splitPanelDisplayed = !!(splitPanelToggle.displayed || (isSplitPanelOpen && !!splitPanel));
     const splitPanelControlId = useUniqueId('split-panel-');
     const toolsControlId = useUniqueId('tools-');
     const [splitPanelSize, setSplitPanelSize] = useControllable(props.splitPanelSize, props.onSplitPanelResize, getSplitPanelDefaultSize(splitPanelPosition), { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' });