@cloudscape-design/components-themeable 3.0.787 → 3.0.789

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "168622904e4a09044db5a32a4df7a6581e3d5442"
+  "commit": "597c7c50dd98bddbde3ea3f3532ea205fcf88b7d"
 }

package/lib/internal/scss/app-layout/test-classes/styles.scss

@@ -64,3 +64,11 @@
 .toolbar {
   /* used in tests */
 }
+
+.trigger-wrapper-tooltip-visible {
+  /* used in tests */
+}
+
+.trigger-tooltip {
+  /* used in tests */
+}

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

@@ -10,4 +10,5 @@
 .split-panel-side {
   position: sticky;
   z-index: 830;
+  overflow-x: hidden;
 }

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

@@ -99,10 +99,6 @@
   border-end-end-radius: 50%;
 }
 
-.trigger-wrapper-tooltip-visible {
-  /* used in test-utils*/
-}
-
 .dot {
   position: absolute;
   inline-size: 8px;
@@ -115,7 +111,3 @@
   inset-block-start: 1px;
   inset-inline-end: -1px;
 }
-
-.trigger-tooltip {
-  /* used in test-utils */
-}

package/lib/internal/scss/internal/styles/forms/mixins.scss

@@ -255,3 +255,10 @@
   block-size: $height;
   inline-size: $width;
 }
+
+@mixin control-border-radius-full {
+  border-start-start-radius: constants.$control-border-radius;
+  border-start-end-radius: constants.$control-border-radius;
+  border-end-start-radius: constants.$control-border-radius;
+  border-end-end-radius: constants.$control-border-radius;
+}

package/lib/internal/scss/prompt-input/styles.scss

@@ -6,40 +6,81 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/styles/foundation/' as foundation;
+@use '../internal/styles/forms/constants' as constants;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $send-icon-right-spacing: awsui.$space-static-xxs;
+$invalid-border-offset: constants.$invalid-control-left-padding;
 
 .root {
-  position: relative;
+  @include styles.styles-reset;
+  @include styles.control-border-radius-full();
+  cursor: text;
 
-  > .button {
-    position: absolute;
-    inset-inline-end: $send-icon-right-spacing;
-    inset-block-end: 0;
-
-    > .action-button {
-      // offset the focus ring by 1px per side so it doesn't blend into the textarea border
-      @include focus-visible.when-visible {
-        @include styles.focus-highlight(
-          (
-            'vertical': calc((-1 * #{awsui.$space-xxxs}) - 1px),
-            'horizontal': calc((#{awsui.$space-xxxs}) - 1px),
-          )
-        );
+  background-color: awsui.$color-background-input-default;
+
+  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+
+  &.textarea-readonly {
+    @include styles.form-readonly-element;
+  }
+
+  &.disabled {
+    @include styles.form-disabled-element;
+    cursor: default;
+  }
+
+  &.textarea-invalid {
+    @include styles.form-invalid-control();
+    & {
+      padding-inline-start: 0;
+    }
+
+    &:focus-within,
+    &:focus {
+      @include styles.form-invalid-control();
+      & {
+        padding-inline-start: 0;
+        box-shadow: foundation.$box-shadow-focused-light-invalid;
+      }
+    }
+  }
+
+  &.textarea-warning {
+    @include styles.form-warning-control();
+    & {
+      padding-inline-start: 0;
+    }
+
+    &:focus-within,
+    &:focus {
+      @include styles.form-warning-control();
+      & {
+        padding-inline-start: 0;
+        box-shadow: foundation.$box-shadow-focused-light-invalid;
       }
     }
   }
+
+  &:focus-within,
+  &:focus {
+    @include styles.form-focus-element;
+  }
 }
 
 .textarea {
   @include styles.styles-reset;
+  @include styles.control-border-radius-full();
+  @include styles.font-body-m;
   // Restore browsers' default resize values
   resize: none;
   // Restore default text cursor
   cursor: text;
   // Allow multi-line placeholders
   white-space: pre-wrap;
+  background-color: inherit;
 
   padding-block: styles.$control-padding-vertical;
   padding-inline: styles.$control-padding-horizontal;
@@ -49,19 +90,8 @@ $send-icon-right-spacing: awsui.$space-static-xxs;
   inline-size: 100%;
   display: block;
   box-sizing: border-box;
-  background-color: awsui.$color-background-input-default;
-  border-start-start-radius: styles.$control-border-radius;
-  border-start-end-radius: styles.$control-border-radius;
-  border-end-start-radius: styles.$control-border-radius;
-  border-end-end-radius: styles.$control-border-radius;
-  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
 
-  @include styles.font-body-m;
-
-  &.textarea-readonly {
-    @include styles.form-readonly-element;
-  }
+  border: 0;
 
   &::placeholder {
     @include styles.form-placeholder;
@@ -73,7 +103,7 @@ $send-icon-right-spacing: awsui.$space-static-xxs;
   }
 
   &:focus {
-    @include styles.form-focus-element;
+    outline: none;
   }
 
   &:invalid {
@@ -81,8 +111,14 @@ $send-icon-right-spacing: awsui.$space-static-xxs;
     box-shadow: none;
   }
 
+  &.invalid,
+  &.warning {
+    padding-inline-start: $invalid-border-offset;
+  }
+
   &:disabled {
     @include styles.form-disabled-element;
+    border: 0;
     cursor: default;
 
     &::placeholder {
@@ -95,14 +131,71 @@ $send-icon-right-spacing: awsui.$space-static-xxs;
     }
   }
 
-  &.textarea-invalid {
-    @include styles.form-invalid-control();
+  &-wrapper {
+    display: flex;
   }
+}
 
-  &.textarea-warning {
-    @include styles.form-warning-control();
+.button {
+  align-self: flex-end;
+  padding-inline: calc(styles.$control-padding-horizontal / 2);
+  padding-block-end: awsui.$space-scaled-xxxs;
+
+  > .action-button {
+    padding: 0;
+
+    // offset the focus ring by 1px per side so it doesn't blend into the textarea border
+    @include focus-visible.when-visible {
+      @include styles.focus-highlight(
+        (
+          'vertical': calc((-1 * #{awsui.$space-xxxs}) - 1px),
+          'horizontal': calc((#{awsui.$space-xxxs}) - 1px),
+        )
+      );
+    }
   }
-  &.textarea-with-button {
-    padding-inline-end: calc(styles.$control-padding-horizontal + $send-icon-right-spacing + awsui.$size-icon-normal);
+}
+
+.secondary-content {
+  @include styles.styles-reset;
+  @include styles.control-border-radius-full();
+
+  &.with-paddings {
+    padding-block-start: styles.$control-padding-vertical;
+    padding-block-end: awsui.$space-scaled-s;
+    padding-inline-start: styles.$control-padding-horizontal;
+    padding-inline-end: calc(styles.$control-padding-horizontal / 2);
+
+    &.invalid,
+    &.warning {
+      padding-inline-start: $invalid-border-offset;
+    }
+  }
+}
+
+.secondary-actions {
+  @include styles.styles-reset;
+  @include styles.control-border-radius-full();
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+
+  &.with-paddings {
+    padding-inline-start: styles.$control-padding-horizontal;
+    padding-block-start: awsui.$space-scaled-s;
+    padding-block-end: styles.$control-padding-vertical;
+
+    &.invalid,
+    &.warning {
+      padding-inline-start: $invalid-border-offset;
+    }
+
+    > .button {
+      padding-block-end: 0;
+    }
+  }
+
+  > .button {
+    padding-block-end: awsui.$space-scaled-xxs;
   }
 }

package/lib/internal/scss/prompt-input/test-classes/styles.scss

@@ -13,3 +13,11 @@
 .action-button {
   /* used in test-utils */
 }
+
+.secondary-actions {
+  /* used in test-utils */
+}
+
+.secondary-content {
+  /* used in test-utils */
+}

package/lib/internal/scss/split-panel/styles.scss

@@ -118,6 +118,9 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   display: flex;
   align-items: center;
   z-index: 1;
+  &.with-toolbar {
+    position: unset;
+  }
 }
 
 .open-button-side {

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

@@ -1,25 +1,27 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1fj9k_j8vgj_5",
-  "navigation": "awsui_navigation_1fj9k_j8vgj_9",
-  "navigation-toggle": "awsui_navigation-toggle_1fj9k_j8vgj_13",
-  "navigation-close": "awsui_navigation-close_1fj9k_j8vgj_17",
-  "content": "awsui_content_1fj9k_j8vgj_21",
-  "notifications": "awsui_notifications_1fj9k_j8vgj_25",
-  "breadcrumbs": "awsui_breadcrumbs_1fj9k_j8vgj_29",
-  "tools": "awsui_tools_1fj9k_j8vgj_33",
-  "tools-close": "awsui_tools-close_1fj9k_j8vgj_37",
-  "tools-toggle": "awsui_tools-toggle_1fj9k_j8vgj_41",
-  "drawer-closed": "awsui_drawer-closed_1fj9k_j8vgj_45",
-  "mobile-bar": "awsui_mobile-bar_1fj9k_j8vgj_49",
-  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_j8vgj_53",
-  "drawers-trigger": "awsui_drawers-trigger_1fj9k_j8vgj_57",
-  "drawers-trigger-global": "awsui_drawers-trigger-global_1fj9k_j8vgj_61",
-  "active-drawer": "awsui_active-drawer_1fj9k_j8vgj_65",
-  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_j8vgj_69",
-  "overflow-menu": "awsui_overflow-menu_1fj9k_j8vgj_73",
-  "drawers-slider": "awsui_drawers-slider_1fj9k_j8vgj_77",
-  "toolbar": "awsui_toolbar_1fj9k_j8vgj_81"
+  "root": "awsui_root_1fj9k_ghfh2_5",
+  "navigation": "awsui_navigation_1fj9k_ghfh2_9",
+  "navigation-toggle": "awsui_navigation-toggle_1fj9k_ghfh2_13",
+  "navigation-close": "awsui_navigation-close_1fj9k_ghfh2_17",
+  "content": "awsui_content_1fj9k_ghfh2_21",
+  "notifications": "awsui_notifications_1fj9k_ghfh2_25",
+  "breadcrumbs": "awsui_breadcrumbs_1fj9k_ghfh2_29",
+  "tools": "awsui_tools_1fj9k_ghfh2_33",
+  "tools-close": "awsui_tools-close_1fj9k_ghfh2_37",
+  "tools-toggle": "awsui_tools-toggle_1fj9k_ghfh2_41",
+  "drawer-closed": "awsui_drawer-closed_1fj9k_ghfh2_45",
+  "mobile-bar": "awsui_mobile-bar_1fj9k_ghfh2_49",
+  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_ghfh2_53",
+  "drawers-trigger": "awsui_drawers-trigger_1fj9k_ghfh2_57",
+  "drawers-trigger-global": "awsui_drawers-trigger-global_1fj9k_ghfh2_61",
+  "active-drawer": "awsui_active-drawer_1fj9k_ghfh2_65",
+  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_ghfh2_69",
+  "overflow-menu": "awsui_overflow-menu_1fj9k_ghfh2_73",
+  "drawers-slider": "awsui_drawers-slider_1fj9k_ghfh2_77",
+  "toolbar": "awsui_toolbar_1fj9k_ghfh2_81",
+  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_1fj9k_ghfh2_85",
+  "trigger-tooltip": "awsui_trigger-tooltip_1fj9k_ghfh2_89"
 };
   

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

@@ -2,82 +2,90 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_1fj9k_j8vgj_5:not(#\9) {
+.awsui_root_1fj9k_ghfh2_5:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_navigation_1fj9k_j8vgj_9:not(#\9) {
+.awsui_navigation_1fj9k_ghfh2_9:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_navigation-toggle_1fj9k_j8vgj_13:not(#\9) {
+.awsui_navigation-toggle_1fj9k_ghfh2_13:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_navigation-close_1fj9k_j8vgj_17:not(#\9) {
+.awsui_navigation-close_1fj9k_ghfh2_17:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content_1fj9k_j8vgj_21:not(#\9) {
+.awsui_content_1fj9k_ghfh2_21:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_notifications_1fj9k_j8vgj_25:not(#\9) {
+.awsui_notifications_1fj9k_ghfh2_25:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_breadcrumbs_1fj9k_j8vgj_29:not(#\9) {
+.awsui_breadcrumbs_1fj9k_ghfh2_29:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_tools_1fj9k_j8vgj_33:not(#\9) {
+.awsui_tools_1fj9k_ghfh2_33:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_tools-close_1fj9k_j8vgj_37:not(#\9) {
+.awsui_tools-close_1fj9k_ghfh2_37:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_tools-toggle_1fj9k_j8vgj_41:not(#\9) {
+.awsui_tools-toggle_1fj9k_ghfh2_41:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_drawer-closed_1fj9k_j8vgj_45:not(#\9) {
+.awsui_drawer-closed_1fj9k_ghfh2_45:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_mobile-bar_1fj9k_j8vgj_49:not(#\9) {
+.awsui_mobile-bar_1fj9k_ghfh2_49:not(#\9) {
   /* used in tests */
 }
 
-.awsui_disable-body-scroll-root_1fj9k_j8vgj_53:not(#\9) {
+.awsui_disable-body-scroll-root_1fj9k_ghfh2_53:not(#\9) {
   /* used in tests */
 }
 
-.awsui_drawers-trigger_1fj9k_j8vgj_57:not(#\9) {
+.awsui_drawers-trigger_1fj9k_ghfh2_57:not(#\9) {
   /* used in tests */
 }
 
-.awsui_drawers-trigger-global_1fj9k_j8vgj_61:not(#\9) {
+.awsui_drawers-trigger-global_1fj9k_ghfh2_61:not(#\9) {
   /* used in tests */
 }
 
-.awsui_active-drawer_1fj9k_j8vgj_65:not(#\9) {
+.awsui_active-drawer_1fj9k_ghfh2_65:not(#\9) {
   /* used in tests */
 }
 
-.awsui_active-drawer-close-button_1fj9k_j8vgj_69:not(#\9) {
+.awsui_active-drawer-close-button_1fj9k_ghfh2_69:not(#\9) {
   /* used in tests */
 }
 
-.awsui_overflow-menu_1fj9k_j8vgj_73:not(#\9) {
+.awsui_overflow-menu_1fj9k_ghfh2_73:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_drawers-slider_1fj9k_j8vgj_77:not(#\9) {
+.awsui_drawers-slider_1fj9k_ghfh2_77:not(#\9) {
   /* used in tests */
 }
 
-.awsui_toolbar_1fj9k_j8vgj_81:not(#\9) {
+.awsui_toolbar_1fj9k_ghfh2_81:not(#\9) {
+  /* used in tests */
+}
+
+.awsui_trigger-wrapper-tooltip-visible_1fj9k_ghfh2_85:not(#\9) {
+  /* used in tests */
+}
+
+.awsui_trigger-tooltip_1fj9k_ghfh2_89:not(#\9) {
   /* used in tests */
 }

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

@@ -2,25 +2,27 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1fj9k_j8vgj_5",
-  "navigation": "awsui_navigation_1fj9k_j8vgj_9",
-  "navigation-toggle": "awsui_navigation-toggle_1fj9k_j8vgj_13",
-  "navigation-close": "awsui_navigation-close_1fj9k_j8vgj_17",
-  "content": "awsui_content_1fj9k_j8vgj_21",
-  "notifications": "awsui_notifications_1fj9k_j8vgj_25",
-  "breadcrumbs": "awsui_breadcrumbs_1fj9k_j8vgj_29",
-  "tools": "awsui_tools_1fj9k_j8vgj_33",
-  "tools-close": "awsui_tools-close_1fj9k_j8vgj_37",
-  "tools-toggle": "awsui_tools-toggle_1fj9k_j8vgj_41",
-  "drawer-closed": "awsui_drawer-closed_1fj9k_j8vgj_45",
-  "mobile-bar": "awsui_mobile-bar_1fj9k_j8vgj_49",
-  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_j8vgj_53",
-  "drawers-trigger": "awsui_drawers-trigger_1fj9k_j8vgj_57",
-  "drawers-trigger-global": "awsui_drawers-trigger-global_1fj9k_j8vgj_61",
-  "active-drawer": "awsui_active-drawer_1fj9k_j8vgj_65",
-  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_j8vgj_69",
-  "overflow-menu": "awsui_overflow-menu_1fj9k_j8vgj_73",
-  "drawers-slider": "awsui_drawers-slider_1fj9k_j8vgj_77",
-  "toolbar": "awsui_toolbar_1fj9k_j8vgj_81"
+  "root": "awsui_root_1fj9k_ghfh2_5",
+  "navigation": "awsui_navigation_1fj9k_ghfh2_9",
+  "navigation-toggle": "awsui_navigation-toggle_1fj9k_ghfh2_13",
+  "navigation-close": "awsui_navigation-close_1fj9k_ghfh2_17",
+  "content": "awsui_content_1fj9k_ghfh2_21",
+  "notifications": "awsui_notifications_1fj9k_ghfh2_25",
+  "breadcrumbs": "awsui_breadcrumbs_1fj9k_ghfh2_29",
+  "tools": "awsui_tools_1fj9k_ghfh2_33",
+  "tools-close": "awsui_tools-close_1fj9k_ghfh2_37",
+  "tools-toggle": "awsui_tools-toggle_1fj9k_ghfh2_41",
+  "drawer-closed": "awsui_drawer-closed_1fj9k_ghfh2_45",
+  "mobile-bar": "awsui_mobile-bar_1fj9k_ghfh2_49",
+  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_ghfh2_53",
+  "drawers-trigger": "awsui_drawers-trigger_1fj9k_ghfh2_57",
+  "drawers-trigger-global": "awsui_drawers-trigger-global_1fj9k_ghfh2_61",
+  "active-drawer": "awsui_active-drawer_1fj9k_ghfh2_65",
+  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_ghfh2_69",
+  "overflow-menu": "awsui_overflow-menu_1fj9k_ghfh2_73",
+  "drawers-slider": "awsui_drawers-slider_1fj9k_ghfh2_77",
+  "toolbar": "awsui_toolbar_1fj9k_ghfh2_81",
+  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_1fj9k_ghfh2_85",
+  "trigger-tooltip": "awsui_trigger-tooltip_1fj9k_ghfh2_89"
 };
   

package/lib/internal/template/app-layout/visual-refresh/drawers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawers.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":";AAqBA;;;;;;GAMG;AACH,eAAO,MAAM,qCAAqC,IAAI,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,uBA+B9B;AAkPD;;;;;GAKG;AACH,wBAAgB,cAAc,uBAwE7B"}
+{"version":3,"file":"drawers.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":";AAqBA;;;;;;GAMG;AACH,eAAO,MAAM,qCAAqC,IAAI,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,uBA+B9B;AAmPD;;;;;GAKG;AACH,wBAAgB,cAAc,uBAwE7B"}

package/lib/internal/template/app-layout/visual-refresh/drawers.js

@@ -122,14 +122,14 @@ function DesktopTriggers() {
                 [styles['has-open-drawer']]: hasOpenDrawer,
             }), role: "toolbar", "aria-orientation": "vertical" },
             visibleItems.map(item => {
-                var _a;
+                var _a, _b, _c;
                 const isForPreviousActiveDrawer = (previousActiveDrawerId === null || previousActiveDrawerId === void 0 ? void 0 : previousActiveDrawerId.current) === item.id;
-                return (React.createElement(TriggerButton, { ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: item.id === activeDrawerId, ariaControls: activeDrawerId === item.id ? item.id : undefined, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']), iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => handleDrawersClick(item.id), ref: isForPreviousActiveDrawer ? drawersRefs.toggle : undefined, badge: item.badge, testId: `awsui-app-layout-trigger-${item.id}`, highContrastHeader: headerVariant === 'high-contrast', selected: item.id === activeDrawerId }));
+                return (React.createElement(TriggerButton, { ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: item.id === activeDrawerId, ariaControls: activeDrawerId === item.id ? item.id : undefined, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']), iconName: (_b = item === null || item === void 0 ? void 0 : item.trigger) === null || _b === void 0 ? void 0 : _b.iconName, iconSvg: (_c = item === null || item === void 0 ? void 0 : item.trigger) === null || _c === void 0 ? void 0 : _c.iconSvg, key: item.id, onClick: () => handleDrawersClick(item.id), ref: isForPreviousActiveDrawer ? drawersRefs.toggle : undefined, badge: item.badge, testId: `awsui-app-layout-trigger-${item.id}`, highContrastHeader: headerVariant === 'high-contrast', selected: item.id === activeDrawerId }));
             }),
             overflowItems.length > 0 && (React.createElement(OverflowMenu, { items: overflowItems, ariaLabel: overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel, customTriggerBuilder: ({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (React.createElement(TriggerButton, { ref: triggerRef, ariaLabel: ariaLabel, ariaExpanded: ariaExpanded, badge: overflowMenuHasBadge, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass), iconName: "ellipsis", onClick: onClick, highContrastHeader: headerVariant === 'high-contrast' })), onItemClick: ({ detail }) => {
                     handleDrawersClick(detail.id);
                 } })),
-            hasSplitPanel && splitPanelToggle.displayed && (React.createElement(TriggerButton, { ariaLabel: splitPanelToggle.ariaLabel, ariaControls: splitPanelControlId, ariaExpanded: !!isSplitPanelOpen, className: clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button']), iconName: "view-vertical", onClick: () => handleSplitPanelClick(), selected: hasSplitPanel && isSplitPanelOpen, ref: splitPanelRefs.toggle, highContrastHeader: headerVariant === 'high-contrast' })))));
+            hasSplitPanel && splitPanelToggle.displayed && (React.createElement(TriggerButton, { ariaLabel: splitPanelToggle.ariaLabel, ariaControls: splitPanelControlId, ariaExpanded: !!isSplitPanelOpen, className: clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button']), iconName: "view-vertical", onClick: () => handleSplitPanelClick(), selected: hasSplitPanel && isSplitPanelOpen, ref: splitPanelRefs.toggle, highContrastHeader: headerVariant === 'high-contrast', testId: "awsui-app-layout-trigger-slide-panel" })))));
 }
 /**
  * The MobileTriggers will be mounted inside of the AppBar component and
@@ -153,9 +153,9 @@ export function MobileTriggers() {
         }), "aria-label": drawersAriaLabel, role: "region" },
         React.createElement("div", { className: styles['drawers-mobile-triggers-container'], role: "toolbar", "aria-orientation": "horizontal" },
             visibleItems.map(item => {
-                var _a;
+                var _a, _b, _c;
                 const isForPreviousActiveDrawer = (previousActiveDrawerId === null || previousActiveDrawerId === void 0 ? void 0 : previousActiveDrawerId.current) === item.id;
-                return (React.createElement(TriggerButton, { ariaExpanded: item.id === activeDrawerId, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaControls: activeDrawerId === item.id ? item.id : undefined, className: clsx(`awsui-app-layout-trigger-${item.id}`, styles['drawers-trigger'], testutilStyles['drawers-trigger'], item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']), disabled: hasDrawerViewportOverlay, ref: isForPreviousActiveDrawer ? drawersRefs.toggle : undefined, iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, badge: item.badge, key: item.id, onClick: () => handleDrawersClick(item.id), testId: `awsui-app-layout-trigger-${item.id}`, highContrastHeader: headerVariant === 'high-contrast', selected: item.id === activeDrawerId }));
+                return (React.createElement(TriggerButton, { ariaExpanded: item.id === activeDrawerId, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaControls: activeDrawerId === item.id ? item.id : undefined, className: clsx(`awsui-app-layout-trigger-${item.id}`, styles['drawers-trigger'], testutilStyles['drawers-trigger'], item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']), disabled: hasDrawerViewportOverlay, ref: isForPreviousActiveDrawer ? drawersRefs.toggle : undefined, iconName: (_b = item === null || item === void 0 ? void 0 : item.trigger) === null || _b === void 0 ? void 0 : _b.iconName, iconSvg: (_c = item === null || item === void 0 ? void 0 : item.trigger) === null || _c === void 0 ? void 0 : _c.iconSvg, badge: item.badge, key: item.id, onClick: () => handleDrawersClick(item.id), testId: `awsui-app-layout-trigger-${item.id}`, highContrastHeader: headerVariant === 'high-contrast', selected: item.id === activeDrawerId }));
             }),
             overflowItems.length > 0 && (React.createElement(OverflowMenu, { items: overflowItems, ariaLabel: overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel, onItemClick: ({ detail }) => handleDrawersClick(detail.id) })))));
 }