@cloudscape-design/components-themeable 3.0.1304 → 3.0.1306

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "d6bd1774f1b73d8aa783d78ccc52c4ee6f6d9b2b"
+  "commit": "5325301ed5da4fd33f728f111dc61aad6f68724e"
 }

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

@@ -214,6 +214,64 @@
   box-sizing: border-box;
 }
 
+/**
+ * A zero-height sticky element placed in the toolbar grid area when the toolbar is absent
+ * and the left panel (AI drawer) is open. It reuses the toolbar's pseudo-element technique
+ * to render the border-radius corner between the AI drawer and the content area.
+ * In light mode: inverse radius trick (dark square + white square with radius).
+ * In dark mode: a vertical border line with a rounded top corner + top border on the element itself.
+ */
+.pseudo-toolbar {
+  grid-area: toolbar;
+  position: sticky;
+  z-index: constants.$toolbar-z-index;
+
+  &:before {
+    @include theming.dark-mode-only {
+      content: '';
+      position: absolute;
+      inline-size: awsui.$border-divider-section-width;
+      block-size: 100vh;
+      background: awsui.$color-border-layout;
+    }
+  }
+}
+
+.pseudo-toolbar-content {
+  position: relative;
+
+  @include theming.dark-mode-only {
+    border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+    border-start-start-radius: awsui.$space-xxs;
+  }
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: 5px;
+    block-size: 5px;
+    background: constants.$ai-drawer-background;
+
+    @include theming.dark-mode-only {
+      inset-block-start: -1px;
+    }
+  }
+
+  &::after {
+    background-color: awsui.$color-background-layout-toolbar;
+    border-start-start-radius: awsui.$space-xxs;
+
+    @include theming.dark-mode-only {
+      background-color: transparent;
+      border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+      border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+    }
+  }
+}
+
 .notifications-container {
   grid-area: notifications;
 }

package/lib/internal/scss/calendar/calendar.scss

@@ -15,7 +15,7 @@ $grid-nonmonth-day-color: awsui.$color-text-dropdown-item-secondary;
 $grid-hover-background-color: awsui.$color-background-dropdown-item-hover;
 $grid-hover-border-color: awsui.$color-border-dropdown-item-hover;
 $grid-current-date-background-color: awsui.$color-background-calendar-current-date;
-$grid-selected-text-color: awsui.$color-background-control-default;
+$grid-selected-text-color: awsui.$color-text-calendar-date-selected;
 $grid-selected-background-color: awsui.$color-background-control-checked;
 $grid-selected-border-color: awsui.$color-background-control-checked;
 $grid-in-range-background-color: awsui.$color-background-dropdown-item-selected;

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

@@ -1,6 +1,6 @@
 
     // Build environment
-    $awsui-commit-hash: "d6bd1774";
+    $awsui-commit-hash: "5325301e";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-6b9ypa;
 $minContentWidth: --awsui-min-content-width-6b9ypa;

package/lib/internal/scss/toggle-button/styles.scss

@@ -5,6 +5,10 @@
 
 @use '../internal/styles/tokens' as awsui;
 
+.variant-normal {
+  background: awsui.$color-background-toggle-button-normal-default;
+}
+
 .variant-normal.pressed {
   background: awsui.$color-background-toggle-button-normal-pressed;
   border-color: awsui.$color-border-toggle-button-normal-pressed;

package/lib/internal/scss/truncated-text/styles.scss

@@ -0,0 +1,26 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles' as styles;
+@use '../internal/styles/foundation' as foundation;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
+
+.root {
+  @include styles.text-overflow-ellipsis;
+
+  display: block;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+
+  &:focus {
+    outline: none;
+  }
+  @include focus-visible.when-visible {
+    // Since this component is commonly used in scenarios where the content can be truncated,
+    // let's play it safe by pulling in the outline.
+    @include styles.focus-highlight(calc(-1 * #{foundation.$box-shadow-focused-width}));
+  }
+}

package/lib/internal/scss/truncated-text/test-classes/styles.scss

@@ -0,0 +1,8 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.root {
+  /* used in test-utils */
+}

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

@@ -1,32 +1,34 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_7nfqu_91m7k_153",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_91m7k_197",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_91m7k_202",
-  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_91m7k_217",
-  "ai-drawer-expanded-mode": "awsui_ai-drawer-expanded-mode_7nfqu_91m7k_220",
-  "bottom-drawer-expanded-mode": "awsui_bottom-drawer-expanded-mode_7nfqu_91m7k_223",
-  "ai-drawer": "awsui_ai-drawer_7nfqu_91m7k_220",
-  "navigation": "awsui_navigation_7nfqu_91m7k_230",
-  "tools": "awsui_tools_7nfqu_91m7k_231",
-  "global-tools": "awsui_global-tools_7nfqu_91m7k_232",
-  "bottom-tool": "awsui_bottom-tool_7nfqu_91m7k_233",
-  "tools-open": "awsui_tools-open_7nfqu_91m7k_290",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_91m7k_304",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_91m7k_311",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_91m7k_324",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_91m7k_334",
-  "notifications-container": "awsui_notifications-container_7nfqu_91m7k_341",
-  "notifications-background": "awsui_notifications-background_7nfqu_91m7k_345",
-  "main-landmark": "awsui_main-landmark_7nfqu_91m7k_356",
-  "main": "awsui_main_7nfqu_91m7k_356",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_91m7k_365",
-  "content-header": "awsui_content-header_7nfqu_91m7k_375",
-  "content": "awsui_content_7nfqu_91m7k_375",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_91m7k_385",
-  "hidden": "awsui_hidden_7nfqu_91m7k_390",
-  "breadcrumbs-own": "awsui_breadcrumbs-own_7nfqu_91m7k_394",
-  "breadcrumbs-discovered": "awsui_breadcrumbs-discovered_7nfqu_91m7k_394"
+  "root": "awsui_root_7nfqu_1b6l2_153",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1b6l2_197",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1b6l2_202",
+  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_1b6l2_217",
+  "ai-drawer-expanded-mode": "awsui_ai-drawer-expanded-mode_7nfqu_1b6l2_220",
+  "bottom-drawer-expanded-mode": "awsui_bottom-drawer-expanded-mode_7nfqu_1b6l2_223",
+  "ai-drawer": "awsui_ai-drawer_7nfqu_1b6l2_220",
+  "navigation": "awsui_navigation_7nfqu_1b6l2_230",
+  "tools": "awsui_tools_7nfqu_1b6l2_231",
+  "global-tools": "awsui_global-tools_7nfqu_1b6l2_232",
+  "bottom-tool": "awsui_bottom-tool_7nfqu_1b6l2_233",
+  "tools-open": "awsui_tools-open_7nfqu_1b6l2_290",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_1b6l2_304",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1b6l2_311",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_1b6l2_324",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_1b6l2_334",
+  "pseudo-toolbar": "awsui_pseudo-toolbar_7nfqu_1b6l2_348",
+  "pseudo-toolbar-content": "awsui_pseudo-toolbar-content_7nfqu_1b6l2_366",
+  "notifications-container": "awsui_notifications-container_7nfqu_1b6l2_410",
+  "notifications-background": "awsui_notifications-background_7nfqu_1b6l2_414",
+  "main-landmark": "awsui_main-landmark_7nfqu_1b6l2_425",
+  "main": "awsui_main_7nfqu_1b6l2_425",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1b6l2_434",
+  "content-header": "awsui_content-header_7nfqu_1b6l2_444",
+  "content": "awsui_content_7nfqu_1b6l2_444",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1b6l2_454",
+  "hidden": "awsui_hidden_7nfqu_1b6l2_459",
+  "breadcrumbs-own": "awsui_breadcrumbs-own_7nfqu_1b6l2_463",
+  "breadcrumbs-discovered": "awsui_breadcrumbs-discovered_7nfqu_1b6l2_463"
 };
   

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

@@ -150,7 +150,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_91m7k_153:not(#\9) {
+.awsui_root_7nfqu_1b6l2_153:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -189,65 +189,65 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-template-rows: min-content min-content 1fr;
 }
 @media (min-width: 689px) {
-  .awsui_root_7nfqu_91m7k_153:not(#\9) {
+  .awsui_root_7nfqu_1b6l2_153:not(#\9) {
     grid-template-areas: "ai-drawer toolbar    toolbar      toolbar       toolbar   toolbar         toolbar  toolbar" "ai-drawer navigation .         notifications    .         sideSplitPanel  tools    global-tools" "ai-drawer navigation .             main         .         sideSplitPanel  tools    global-tools" "ai-drawer bottom-tool bottom-tool bottom-tool  bottom-tool  bottom-tool bottom-tool global-tools";
     grid-template-columns: min-content min-content minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) minmax(0, var(--awsui-max-content-width-6b9ypa)) minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) min-content min-content;
     grid-template-rows: min-content min-content 1fr min-content min-content;
   }
-  .awsui_root_7nfqu_91m7k_153.awsui_has-adaptive-widths-default_7nfqu_91m7k_197:not(#\9) {
+  .awsui_root_7nfqu_1b6l2_153.awsui_has-adaptive-widths-default_7nfqu_1b6l2_197:not(#\9) {
     --awsui-max-content-width-6b9ypa: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 1401px) {
-  .awsui_root_7nfqu_91m7k_153.awsui_has-adaptive-widths-dashboard_7nfqu_91m7k_202:not(#\9) {
+  .awsui_root_7nfqu_1b6l2_153.awsui_has-adaptive-widths-dashboard_7nfqu_1b6l2_202:not(#\9) {
     --awsui-max-content-width-6b9ypa: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_7nfqu_91m7k_153.awsui_has-adaptive-widths-dashboard_7nfqu_91m7k_202:not(#\9) {
+  .awsui_root_7nfqu_1b6l2_153.awsui_has-adaptive-widths-dashboard_7nfqu_1b6l2_202:not(#\9) {
     --awsui-max-content-width-6b9ypa: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_7nfqu_91m7k_153.awsui_has-adaptive-widths-dashboard_7nfqu_91m7k_202:not(#\9) {
+  .awsui_root_7nfqu_1b6l2_153.awsui_has-adaptive-widths-dashboard_7nfqu_1b6l2_202:not(#\9) {
     --awsui-max-content-width-6b9ypa: 2160px;
   }
 }
 @media (min-width: 689px) {
-  .awsui_root_7nfqu_91m7k_153.awsui_drawer-expanded-mode_7nfqu_91m7k_217:not(#\9) {
+  .awsui_root_7nfqu_1b6l2_153.awsui_drawer-expanded-mode_7nfqu_1b6l2_217:not(#\9) {
     grid-template-columns: 0 0 0 0 0 0 0 auto;
   }
-  .awsui_root_7nfqu_91m7k_153.awsui_drawer-expanded-mode_7nfqu_91m7k_217.awsui_ai-drawer-expanded-mode_7nfqu_91m7k_220:not(#\9) {
+  .awsui_root_7nfqu_1b6l2_153.awsui_drawer-expanded-mode_7nfqu_1b6l2_217.awsui_ai-drawer-expanded-mode_7nfqu_1b6l2_220:not(#\9) {
     grid-template-columns: auto 0 0 0 0 0 0 0;
   }
-  .awsui_root_7nfqu_91m7k_153.awsui_drawer-expanded-mode_7nfqu_91m7k_217.awsui_bottom-drawer-expanded-mode_7nfqu_91m7k_223:not(#\9) {
+  .awsui_root_7nfqu_1b6l2_153.awsui_drawer-expanded-mode_7nfqu_1b6l2_217.awsui_bottom-drawer-expanded-mode_7nfqu_1b6l2_223:not(#\9) {
     grid-template-rows: auto;
     grid-template-columns: 0 0 0 0 0 auto 0 0;
   }
 }
 
-.awsui_ai-drawer_7nfqu_91m7k_220:not(#\9),
-.awsui_navigation_7nfqu_91m7k_230:not(#\9),
-.awsui_tools_7nfqu_91m7k_231:not(#\9),
-.awsui_global-tools_7nfqu_91m7k_232:not(#\9),
-.awsui_bottom-tool_7nfqu_91m7k_233:not(#\9) {
+.awsui_ai-drawer_7nfqu_1b6l2_220:not(#\9),
+.awsui_navigation_7nfqu_1b6l2_230:not(#\9),
+.awsui_tools_7nfqu_1b6l2_231:not(#\9),
+.awsui_global-tools_7nfqu_1b6l2_232:not(#\9),
+.awsui_bottom-tool_7nfqu_1b6l2_233:not(#\9) {
   grid-row: 1/-1;
   grid-column: 1/-1;
   background: var(--color-background-container-content-aemn43, #ffffff);
   opacity: 1;
 }
 @media (max-width: 688px) {
-  .awsui_ai-drawer_7nfqu_91m7k_220:not(#\9),
-  .awsui_navigation_7nfqu_91m7k_230:not(#\9),
-  .awsui_tools_7nfqu_91m7k_231:not(#\9),
-  .awsui_global-tools_7nfqu_91m7k_232:not(#\9),
-  .awsui_bottom-tool_7nfqu_91m7k_233:not(#\9) {
+  .awsui_ai-drawer_7nfqu_1b6l2_220:not(#\9),
+  .awsui_navigation_7nfqu_1b6l2_230:not(#\9),
+  .awsui_tools_7nfqu_1b6l2_231:not(#\9),
+  .awsui_global-tools_7nfqu_1b6l2_232:not(#\9),
+  .awsui_bottom-tool_7nfqu_1b6l2_233:not(#\9) {
     inline-size: 100%;
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_bottom-tool_7nfqu_91m7k_233:not(#\9) {
+  .awsui_bottom-tool_7nfqu_1b6l2_233:not(#\9) {
     grid-area: bottom-tool;
     position: sticky;
     inset-block-end: 0;
@@ -257,43 +257,43 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 @media (min-width: 689px) {
-  .awsui_ai-drawer_7nfqu_91m7k_220:not(#\9) {
+  .awsui_ai-drawer_7nfqu_1b6l2_220:not(#\9) {
     grid-area: ai-drawer;
     position: sticky;
   }
 }
 
-.awsui_navigation_7nfqu_91m7k_230:not(#\9) {
+.awsui_navigation_7nfqu_1b6l2_230:not(#\9) {
   z-index: 830;
 }
 @media (min-width: 689px) {
-  .awsui_navigation_7nfqu_91m7k_230:not(#\9) {
+  .awsui_navigation_7nfqu_1b6l2_230:not(#\9) {
     grid-area: navigation;
     inline-size: var(--awsui-navigation-width-6b9ypa);
     border-inline-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
   }
 }
 @media (max-width: 688px) {
-  .awsui_navigation_7nfqu_91m7k_230:not(#\9) {
+  .awsui_navigation_7nfqu_1b6l2_230:not(#\9) {
     z-index: 1001;
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_tools_7nfqu_91m7k_231:not(#\9) {
+  .awsui_tools_7nfqu_1b6l2_231:not(#\9) {
     grid-area: tools;
     /* stylelint-disable plugin/no-unsupported-browser-features */
   }
-  .awsui_tools_7nfqu_91m7k_231:not(#\9):not(:has(> [data-testid])) {
+  .awsui_tools_7nfqu_1b6l2_231:not(#\9):not(:has(> [data-testid])) {
     inline-size: var(--awsui-tools-width-6b9ypa);
   }
-  .awsui_tools_7nfqu_91m7k_231:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_91m7k_290 {
+  .awsui_tools_7nfqu_1b6l2_231:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_1b6l2_290 {
     border-inline-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_global-tools_7nfqu_91m7k_232:not(#\9) {
+  .awsui_global-tools_7nfqu_1b6l2_232:not(#\9) {
     display: flex;
     grid-area: global-tools;
     justify-content: flex-end;
@@ -301,14 +301,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 @media (min-width: 689px) {
-  .awsui_split-panel-side_7nfqu_91m7k_304:not(#\9) {
+  .awsui_split-panel-side_7nfqu_1b6l2_304:not(#\9) {
     grid-area: sideSplitPanel;
     border-inline-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
     opacity: 1;
   }
 }
 
-.awsui_split-panel-bottom_7nfqu_91m7k_311:not(#\9) {
+.awsui_split-panel-bottom_7nfqu_1b6l2_311:not(#\9) {
   position: sticky;
   z-index: 840;
   align-self: end;
@@ -316,81 +316,150 @@ 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_91m7k_311:not(#\9) {
+  .awsui_split-panel-bottom_7nfqu_1b6l2_311:not(#\9) {
     grid-column: 3/6;
   }
 }
 
-.awsui_panel-hidden_7nfqu_91m7k_324:not(#\9) {
+.awsui_panel-hidden_7nfqu_1b6l2_324:not(#\9) {
   border-block: none;
   border-inline: none;
   opacity: 0;
   z-index: 0;
 }
-.awsui_panel-hidden_7nfqu_91m7k_324.awsui_navigation_7nfqu_91m7k_230:not(#\9), .awsui_panel-hidden_7nfqu_91m7k_324.awsui_tools_7nfqu_91m7k_231:not(#\9), .awsui_panel-hidden_7nfqu_91m7k_324.awsui_global-tools_7nfqu_91m7k_232:not(#\9) {
+.awsui_panel-hidden_7nfqu_1b6l2_324.awsui_navigation_7nfqu_1b6l2_230:not(#\9), .awsui_panel-hidden_7nfqu_1b6l2_324.awsui_tools_7nfqu_1b6l2_231:not(#\9), .awsui_panel-hidden_7nfqu_1b6l2_324.awsui_global-tools_7nfqu_1b6l2_232:not(#\9) {
   inline-size: 0px;
 }
 
-.awsui_toolbar-container_7nfqu_91m7k_334:not(#\9) {
+.awsui_toolbar-container_7nfqu_1b6l2_334:not(#\9) {
   grid-area: toolbar;
   block-size: 42px;
   border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
   box-sizing: border-box;
 }
 
-.awsui_notifications-container_7nfqu_91m7k_341:not(#\9) {
+/**
+ * A zero-height sticky element placed in the toolbar grid area when the toolbar is absent
+ * and the left panel (AI drawer) is open. It reuses the toolbar's pseudo-element technique
+ * to render the border-radius corner between the AI drawer and the content area.
+ * In light mode: inverse radius trick (dark square + white square with radius).
+ * In dark mode: a vertical border line with a rounded top corner + top border on the element itself.
+ */
+.awsui_pseudo-toolbar_7nfqu_1b6l2_348:not(#\9) {
+  grid-area: toolbar;
+  position: sticky;
+  z-index: 1000;
+}
+@media not print {
+  .awsui_pseudo-toolbar_7nfqu_1b6l2_348:not(#\9):before {
+    /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
+  }
+  .awsui-polaris-dark-mode .awsui_pseudo-toolbar_7nfqu_1b6l2_348:not(#\9):before, .awsui-dark-mode .awsui_pseudo-toolbar_7nfqu_1b6l2_348:not(#\9):before {
+    content: "";
+    position: absolute;
+    inline-size: var(--border-divider-section-width-sznrdy, 1px);
+    block-size: 100vh;
+    background: var(--color-border-layout-ovzonx, #d5dbdb);
+  }
+}
+
+.awsui_pseudo-toolbar-content_7nfqu_1b6l2_366:not(#\9) {
+  position: relative;
+}
+@media not print {
+  .awsui_pseudo-toolbar-content_7nfqu_1b6l2_366:not(#\9) {
+    /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
+  }
+  .awsui-polaris-dark-mode .awsui_pseudo-toolbar-content_7nfqu_1b6l2_366:not(#\9), .awsui-dark-mode .awsui_pseudo-toolbar-content_7nfqu_1b6l2_366:not(#\9) {
+    border-block-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
+    border-start-start-radius: var(--space-xxs-jnczic, 4px);
+  }
+}
+.awsui_pseudo-toolbar-content_7nfqu_1b6l2_366:not(#\9):before, .awsui_pseudo-toolbar-content_7nfqu_1b6l2_366:not(#\9):after {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: 5px;
+  block-size: 5px;
+  background: #161d26;
+}
+@media not print {
+  .awsui_pseudo-toolbar-content_7nfqu_1b6l2_366:not(#\9):before, .awsui_pseudo-toolbar-content_7nfqu_1b6l2_366:not(#\9):after {
+    /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
+  }
+  .awsui-polaris-dark-mode .awsui_pseudo-toolbar-content_7nfqu_1b6l2_366:not(#\9):before, .awsui-dark-mode .awsui_pseudo-toolbar-content_7nfqu_1b6l2_366:not(#\9):before, .awsui-polaris-dark-mode .awsui_pseudo-toolbar-content_7nfqu_1b6l2_366:not(#\9):after, .awsui-dark-mode .awsui_pseudo-toolbar-content_7nfqu_1b6l2_366:not(#\9):after {
+    inset-block-start: -1px;
+  }
+}
+.awsui_pseudo-toolbar-content_7nfqu_1b6l2_366:not(#\9)::after {
+  background-color: var(--color-background-layout-toolbar-oyny45, #ffffff);
+  border-start-start-radius: var(--space-xxs-jnczic, 4px);
+}
+@media not print {
+  .awsui_pseudo-toolbar-content_7nfqu_1b6l2_366:not(#\9)::after {
+    /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
+  }
+  .awsui-polaris-dark-mode .awsui_pseudo-toolbar-content_7nfqu_1b6l2_366:not(#\9)::after, .awsui-dark-mode .awsui_pseudo-toolbar-content_7nfqu_1b6l2_366:not(#\9)::after {
+    background-color: transparent;
+    border-inline-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
+    border-block-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
+  }
+}
+
+.awsui_notifications-container_7nfqu_1b6l2_410:not(#\9) {
   grid-area: notifications;
 }
 
-.awsui_notifications-background_7nfqu_91m7k_345:not(#\9) {
+.awsui_notifications-background_7nfqu_1b6l2_414:not(#\9) {
   background: var(--color-background-layout-main-05m5y6, #f2f3f3);
   grid-area: notifications;
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_notifications-background_7nfqu_91m7k_345:not(#\9) {
+  .awsui_notifications-background_7nfqu_1b6l2_414:not(#\9) {
     grid-column: 3/6;
   }
 }
 
-.awsui_main-landmark_7nfqu_91m7k_356:not(#\9) {
+.awsui_main-landmark_7nfqu_1b6l2_425:not(#\9) {
   display: contents;
 }
 
-.awsui_main_7nfqu_91m7k_356:not(#\9) {
+.awsui_main_7nfqu_1b6l2_425:not(#\9) {
   grid-area: main;
   margin-block-start: var(--space-scaled-s-gjhvjd, 12px);
   margin-block-end: var(--space-layout-content-bottom-iu1izz, 20px);
 }
-.awsui_main-disable-paddings_7nfqu_91m7k_365:not(#\9) {
+.awsui_main-disable-paddings_7nfqu_1b6l2_434:not(#\9) {
   margin-block: 0;
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_main-disable-paddings_7nfqu_91m7k_365:not(#\9) {
+  .awsui_main-disable-paddings_7nfqu_1b6l2_434:not(#\9) {
     grid-column: 3/6;
   }
 }
 
-.awsui_content-header_7nfqu_91m7k_375:not(#\9) {
+.awsui_content-header_7nfqu_1b6l2_444:not(#\9) {
   margin-block-end: var(--space-content-header-padding-bottom-hjkugf, 16px);
 }
 
-.awsui_content_7nfqu_91m7k_375:not(#\9) {
+.awsui_content_7nfqu_1b6l2_444:not(#\9) {
   display: contents;
 }
 
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
 @media (max-width: 688px) {
-  .awsui_unfocusable-mobile_7nfqu_91m7k_385 *:not(#\9) {
+  .awsui_unfocusable-mobile_7nfqu_1b6l2_454 *:not(#\9) {
     visibility: hidden;
   }
 }
 
-.awsui_hidden_7nfqu_91m7k_390:not(#\9) {
+.awsui_hidden_7nfqu_1b6l2_459:not(#\9) {
   display: none;
 }
 
-.awsui_breadcrumbs-own_7nfqu_91m7k_394:not(#\9):not(:empty) + .awsui_breadcrumbs-discovered_7nfqu_91m7k_394 {
+.awsui_breadcrumbs-own_7nfqu_1b6l2_463:not(#\9):not(:empty) + .awsui_breadcrumbs-discovered_7nfqu_1b6l2_463 {
   display: none;
 }

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

@@ -2,32 +2,34 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_7nfqu_91m7k_153",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_91m7k_197",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_91m7k_202",
-  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_91m7k_217",
-  "ai-drawer-expanded-mode": "awsui_ai-drawer-expanded-mode_7nfqu_91m7k_220",
-  "bottom-drawer-expanded-mode": "awsui_bottom-drawer-expanded-mode_7nfqu_91m7k_223",
-  "ai-drawer": "awsui_ai-drawer_7nfqu_91m7k_220",
-  "navigation": "awsui_navigation_7nfqu_91m7k_230",
-  "tools": "awsui_tools_7nfqu_91m7k_231",
-  "global-tools": "awsui_global-tools_7nfqu_91m7k_232",
-  "bottom-tool": "awsui_bottom-tool_7nfqu_91m7k_233",
-  "tools-open": "awsui_tools-open_7nfqu_91m7k_290",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_91m7k_304",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_91m7k_311",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_91m7k_324",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_91m7k_334",
-  "notifications-container": "awsui_notifications-container_7nfqu_91m7k_341",
-  "notifications-background": "awsui_notifications-background_7nfqu_91m7k_345",
-  "main-landmark": "awsui_main-landmark_7nfqu_91m7k_356",
-  "main": "awsui_main_7nfqu_91m7k_356",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_91m7k_365",
-  "content-header": "awsui_content-header_7nfqu_91m7k_375",
-  "content": "awsui_content_7nfqu_91m7k_375",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_91m7k_385",
-  "hidden": "awsui_hidden_7nfqu_91m7k_390",
-  "breadcrumbs-own": "awsui_breadcrumbs-own_7nfqu_91m7k_394",
-  "breadcrumbs-discovered": "awsui_breadcrumbs-discovered_7nfqu_91m7k_394"
+  "root": "awsui_root_7nfqu_1b6l2_153",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1b6l2_197",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1b6l2_202",
+  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_1b6l2_217",
+  "ai-drawer-expanded-mode": "awsui_ai-drawer-expanded-mode_7nfqu_1b6l2_220",
+  "bottom-drawer-expanded-mode": "awsui_bottom-drawer-expanded-mode_7nfqu_1b6l2_223",
+  "ai-drawer": "awsui_ai-drawer_7nfqu_1b6l2_220",
+  "navigation": "awsui_navigation_7nfqu_1b6l2_230",
+  "tools": "awsui_tools_7nfqu_1b6l2_231",
+  "global-tools": "awsui_global-tools_7nfqu_1b6l2_232",
+  "bottom-tool": "awsui_bottom-tool_7nfqu_1b6l2_233",
+  "tools-open": "awsui_tools-open_7nfqu_1b6l2_290",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_1b6l2_304",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1b6l2_311",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_1b6l2_324",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_1b6l2_334",
+  "pseudo-toolbar": "awsui_pseudo-toolbar_7nfqu_1b6l2_348",
+  "pseudo-toolbar-content": "awsui_pseudo-toolbar-content_7nfqu_1b6l2_366",
+  "notifications-container": "awsui_notifications-container_7nfqu_1b6l2_410",
+  "notifications-background": "awsui_notifications-background_7nfqu_1b6l2_414",
+  "main-landmark": "awsui_main-landmark_7nfqu_1b6l2_425",
+  "main": "awsui_main_7nfqu_1b6l2_425",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1b6l2_434",
+  "content-header": "awsui_content-header_7nfqu_1b6l2_444",
+  "content": "awsui_content_7nfqu_1b6l2_444",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1b6l2_454",
+  "hidden": "awsui_hidden_7nfqu_1b6l2_459",
+  "breadcrumbs-own": "awsui_breadcrumbs-own_7nfqu_1b6l2_463",
+  "breadcrumbs-discovered": "awsui_breadcrumbs-discovered_7nfqu_1b6l2_463"
 };
   

package/lib/internal/template/app-layout/visual-refresh-toolbar/state/props-merger.js

@@ -9,7 +9,7 @@ function checkAlreadyExists(value, propName) {
     return false;
 }
 export const mergeProps = (ownProps, additionalProps) => {
-    var _a;
+    var _a, _b;
     const toolbar = {};
     for (const props of [ownProps, ...additionalProps]) {
         toolbar.ariaLabels = { ...toolbar.ariaLabels, ...props.ariaLabels };
@@ -29,7 +29,7 @@ export const mergeProps = (ownProps, additionalProps) => {
             toolbar.activeGlobalDrawersIds = props.activeGlobalDrawersIds;
             toolbar.onActiveGlobalDrawersChange = props.onActiveGlobalDrawersChange;
         }
-        if (props.aiDrawer &&
+        if (((_a = props.aiDrawer) === null || _a === void 0 ? void 0 : _a.trigger) &&
             props.aiDrawerFocusRef &&
             !checkAlreadyExists(!!toolbar.aiDrawerFocusRef, 'aiDrawerFocusRef')) {
             toolbar.aiDrawerFocusRef = props.aiDrawerFocusRef;
@@ -49,7 +49,7 @@ export const mergeProps = (ownProps, additionalProps) => {
             toolbar.onNavigationToggle = props.onNavigationToggle;
         }
         if (props.splitPanel &&
-            ((_a = props.splitPanelToggleProps) === null || _a === void 0 ? void 0 : _a.displayed) &&
+            ((_b = props.splitPanelToggleProps) === null || _b === void 0 ? void 0 : _b.displayed) &&
             !checkAlreadyExists(!!toolbar.hasSplitPanel, 'splitPanel')) {
             toolbar.hasSplitPanel = true;
             toolbar.splitPanelFocusRef = props.splitPanelFocusRef;