@cloudscape-design/components-themeable 3.0.1084 → 3.0.1086

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

@@ -150,58 +150,161 @@ 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_universal-toolbar_1kzri_ge5s9_153:not(#\9) {
+.awsui_universal-toolbar_1kzri_1cw33_153:not(#\9) {
   background-color: var(--color-background-layout-panel-content-9tbx75, #ffffff);
   box-sizing: border-box;
-  padding-block: 0;
-  padding-inline: var(--space-m-n2lypl, 16px);
-  padding-inline-end: 0;
   position: sticky;
   z-index: 1000;
+  display: flex;
   transition: ease var(--motion-duration-refresh-only-slow-zil3nj, 0ms);
   transition-property: inset-block-start, opacity;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_universal-toolbar_1kzri_ge5s9_153:not(#\9) {
+  .awsui_universal-toolbar_1kzri_1cw33_153:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_universal-toolbar_1kzri_ge5s9_153:not(#\9), .awsui-mode-entering .awsui_universal-toolbar_1kzri_ge5s9_153:not(#\9) {
+.awsui-motion-disabled .awsui_universal-toolbar_1kzri_1cw33_153:not(#\9), .awsui-mode-entering .awsui_universal-toolbar_1kzri_1cw33_153:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_universal-toolbar_1kzri_ge5s9_153.awsui_disable-body-scroll_1kzri_ge5s9_174:not(#\9) {
+.awsui_universal-toolbar_1kzri_1cw33_153.awsui_with-open-ai-drawer_1kzri_1cw33_172:not(#\9):before, .awsui_universal-toolbar_1kzri_1cw33_153.awsui_with-open-ai-drawer_1kzri_1cw33_172:not(#\9):after {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: 5px;
+  block-size: 5px;
+  background: #161d26;
+  /**
+   * Adds a border to visually separate the main content area from the left global drawer.
+   *
+   * Note: Direct border application is not possible for either target element:
+   * - Main content area: Uses `display: contents`, preventing border application
+   * - Nav panel: May be hidden, causing the border to disappear when separation is still needed
+  */
+}
+@media not print {
+  .awsui_universal-toolbar_1kzri_1cw33_153.awsui_with-open-ai-drawer_1kzri_1cw33_172:not(#\9):before, .awsui_universal-toolbar_1kzri_1cw33_153.awsui_with-open-ai-drawer_1kzri_1cw33_172:not(#\9):after {
+    /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
+  }
+  .awsui-polaris-dark-mode .awsui_universal-toolbar_1kzri_1cw33_153.awsui_with-open-ai-drawer_1kzri_1cw33_172:not(#\9):before, .awsui-dark-mode .awsui_universal-toolbar_1kzri_1cw33_153.awsui_with-open-ai-drawer_1kzri_1cw33_172:not(#\9):before, .awsui-polaris-dark-mode .awsui_universal-toolbar_1kzri_1cw33_153.awsui_with-open-ai-drawer_1kzri_1cw33_172:not(#\9):after, .awsui-dark-mode .awsui_universal-toolbar_1kzri_1cw33_153.awsui_with-open-ai-drawer_1kzri_1cw33_172:not(#\9):after {
+    content: "";
+    position: absolute;
+    inset-block-start: 42px;
+    inset-inline-start: 0;
+    inline-size: var(--border-divider-section-width-sznrdy, 1px);
+    block-size: calc(100vh - 42px);
+    background: var(--color-border-layout-ovzonx, #d5dbdb);
+  }
+}
+.awsui_universal-toolbar_1kzri_1cw33_153.awsui_with-open-ai-drawer_1kzri_1cw33_172:not(#\9):after {
+  background-color: var(--color-background-layout-panel-content-9tbx75, #ffffff);
+  border-start-start-radius: var(--space-xxs-jnczic, 4px);
+}
+@media not print {
+  .awsui_universal-toolbar_1kzri_1cw33_153.awsui_with-open-ai-drawer_1kzri_1cw33_172:not(#\9):after {
+    /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
+  }
+  .awsui-polaris-dark-mode .awsui_universal-toolbar_1kzri_1cw33_153.awsui_with-open-ai-drawer_1kzri_1cw33_172:not(#\9):after, .awsui-dark-mode .awsui_universal-toolbar_1kzri_1cw33_153.awsui_with-open-ai-drawer_1kzri_1cw33_172:not(#\9):after {
+    display: none;
+  }
+}
+.awsui_universal-toolbar_1kzri_1cw33_153.awsui_disable-body-scroll_1kzri_1cw33_214:not(#\9) {
   inset-block-start: 0px;
 }
-.awsui_universal-toolbar_1kzri_ge5s9_153 > .awsui_toolbar-container_1kzri_ge5s9_177:not(#\9) {
+.awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_universal-toolbar-ai-custom_1kzri_1cw33_217:not(#\9) {
+  grid-column: 1;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: flex-start;
+  padding-inline: var(--space-static-s-8me5rn, 12px);
+  box-sizing: border-box;
+  /**
+   * Button sizing adjustments for theme-specific design requirements
+   *
+   * Light mode: Button width is set to 100% + border width to intentionally overlap
+   * with the bottom border, as specified in the UI design.
+   *
+   * Dark mode: Resets the overlap styling due to different design requirements
+   * where overlap should not occur.
+   */
+  block-size: calc(100% + var(--border-divider-section-width-sznrdy, 1px));
+  background: #161d26;
+}
+@media not print {
+  .awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_universal-toolbar-ai-custom_1kzri_1cw33_217:not(#\9) {
+    /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
+  }
+  .awsui-polaris-dark-mode .awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_universal-toolbar-ai-custom_1kzri_1cw33_217:not(#\9), .awsui-dark-mode .awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_universal-toolbar-ai-custom_1kzri_1cw33_217:not(#\9) {
+    block-size: 100%;
+  }
+}
+.awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_universal-toolbar-ai-custom_1kzri_1cw33_217:not(#\9):before, .awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_universal-toolbar-ai-custom_1kzri_1cw33_217:not(#\9):after {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: -5px;
+  inline-size: 5px;
+  block-size: 5px;
+  background: #161d26;
+}
+@media not print {
+  .awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_universal-toolbar-ai-custom_1kzri_1cw33_217:not(#\9):before, .awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_universal-toolbar-ai-custom_1kzri_1cw33_217:not(#\9):after {
+    /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
+  }
+  .awsui-polaris-dark-mode .awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_universal-toolbar-ai-custom_1kzri_1cw33_217:not(#\9):before, .awsui-dark-mode .awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_universal-toolbar-ai-custom_1kzri_1cw33_217:not(#\9):before, .awsui-polaris-dark-mode .awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_universal-toolbar-ai-custom_1kzri_1cw33_217:not(#\9):after, .awsui-dark-mode .awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_universal-toolbar-ai-custom_1kzri_1cw33_217:not(#\9):after {
+    display: none;
+  }
+}
+.awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_universal-toolbar-ai-custom_1kzri_1cw33_217:not(#\9):after {
+  background-color: var(--color-background-layout-panel-content-9tbx75, #ffffff);
+  border-start-start-radius: var(--space-xxs-jnczic, 4px);
+}
+.awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_toolbar-container_1kzri_1cw33_267:not(#\9) {
   block-size: 100%;
   align-items: center;
   display: grid;
-  column-gap: var(--space-static-xs-4gq40t, 8px);
   inline-size: 100%;
-  grid-template-columns: min-content minmax(0, 3fr) minmax(auto, 1fr);
+  grid-template-columns: min-content min-content minmax(0, 3fr) minmax(auto, 1fr);
   grid-template-rows: 1fr;
 }
-.awsui_universal-toolbar_1kzri_ge5s9_153 > .awsui_toolbar-container_1kzri_ge5s9_177 > .awsui_universal-toolbar-nav_1kzri_ge5s9_186:not(#\9) {
-  grid-column: 1;
-  padding-inline-end: var(--space-static-xxs-0cgyf1, 4px);
+@media not print {
+  .awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_toolbar-container_1kzri_1cw33_267.awsui_with-ai-drawer_1kzri_1cw33_276:not(#\9) {
+    /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
+  }
+  .awsui-polaris-dark-mode .awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_toolbar-container_1kzri_1cw33_267.awsui_with-ai-drawer_1kzri_1cw33_276:not(#\9), .awsui-dark-mode .awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_toolbar-container_1kzri_1cw33_267.awsui_with-ai-drawer_1kzri_1cw33_276:not(#\9) {
+    border-start-start-radius: var(--space-xxs-jnczic, 4px);
+    border-inline-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
+  }
 }
-.awsui_universal-toolbar_1kzri_ge5s9_153 > .awsui_toolbar-container_1kzri_ge5s9_177 > .awsui_universal-toolbar-breadcrumbs_1kzri_ge5s9_190:not(#\9) {
+.awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_toolbar-container_1kzri_1cw33_267 > .awsui_universal-toolbar-nav_1kzri_1cw33_284:not(#\9) {
   grid-column: 2;
+  padding-inline-start: var(--space-m-n2lypl, 16px);
+  padding-inline-end: var(--space-static-xxs-0cgyf1, 4px);
+}
+.awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_toolbar-container_1kzri_1cw33_267 > .awsui_universal-toolbar-breadcrumbs_1kzri_1cw33_289:not(#\9) {
+  grid-column: 3;
+  padding-inline: var(--space-static-xs-4gq40t, 8px);
   background-color: transparent;
   flex: 1 0;
 }
-.awsui_universal-toolbar_1kzri_ge5s9_153 > .awsui_toolbar-container_1kzri_ge5s9_177 > .awsui_universal-toolbar-drawers_1kzri_ge5s9_195:not(#\9) {
-  grid-column: 3;
+.awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_toolbar-container_1kzri_1cw33_267 > .awsui_universal-toolbar-breadcrumbs_1kzri_1cw33_289:not(#\9):first-child {
+  padding-inline: calc(var(--space-static-xs-4gq40t, 8px) + var(--space-static-m-1cd7a5, 16px));
+}
+.awsui_universal-toolbar_1kzri_1cw33_153 > .awsui_toolbar-container_1kzri_1cw33_267 > .awsui_universal-toolbar-drawers_1kzri_1cw33_298:not(#\9) {
+  grid-column: 4;
   column-gap: var(--space-static-xs-4gq40t, 8px);
   display: flex;
   justify-content: flex-end;
   block-size: 100%;
 }
 
-.awsui_drawers-desktop-triggers-container_1kzri_ge5s9_203:not(#\9),
-.awsui_drawers-mobile-triggers-container_1kzri_ge5s9_204:not(#\9) {
+.awsui_drawers-desktop-triggers-container_1kzri_1cw33_306:not(#\9),
+.awsui_drawers-mobile-triggers-container_1kzri_1cw33_307:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -232,8 +335,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
   background-color: transparent;
-  padding-inline: 0;
-  padding-inline-end: var(--space-m-n2lypl, 16px);
+  padding-inline: var(--space-m-n2lypl, 16px);
   box-sizing: border-box;
   overflow-y: hidden;
   overflow-x: hidden;
@@ -244,7 +346,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inline-size: 100%;
 }
 
-.awsui_drawers-trigger-content_1kzri_ge5s9_247:not(#\9) {
+.awsui_drawers-trigger-content_1kzri_1cw33_349:not(#\9) {
   block-size: 100%;
   align-items: center;
   display: flex;
@@ -254,19 +356,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-inline-start: var(--space-xs-kw7k3v, 8px);
 }
 
-.awsui_group-divider_1kzri_ge5s9_257:not(#\9) {
+.awsui_group-divider_1kzri_1cw33_359:not(#\9) {
   border-inline-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-divider-default-ipvpev, #eaeded);
   block-size: 60%;
 }
 
 @media (max-width: 688px) {
-  .awsui_drawers-trigger_1kzri_ge5s9_247:not(#\9) {
+  .awsui_drawers-trigger_1kzri_1cw33_349:not(#\9) {
     display: flex;
     justify-content: center;
     align-items: center;
   }
 }
 
-.awsui_block-body-scroll_1kzri_ge5s9_270:not(#\9) {
+.awsui_block-body-scroll_1kzri_1cw33_372:not(#\9) {
   overflow: hidden;
 }

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

@@ -2,17 +2,20 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "universal-toolbar": "awsui_universal-toolbar_1kzri_ge5s9_153",
-  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_ge5s9_174",
-  "toolbar-container": "awsui_toolbar-container_1kzri_ge5s9_177",
-  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_ge5s9_186",
-  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_ge5s9_190",
-  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_ge5s9_195",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_ge5s9_203",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_ge5s9_204",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_ge5s9_247",
-  "group-divider": "awsui_group-divider_1kzri_ge5s9_257",
-  "drawers-trigger": "awsui_drawers-trigger_1kzri_ge5s9_247",
-  "block-body-scroll": "awsui_block-body-scroll_1kzri_ge5s9_270"
+  "universal-toolbar": "awsui_universal-toolbar_1kzri_1cw33_153",
+  "with-open-ai-drawer": "awsui_with-open-ai-drawer_1kzri_1cw33_172",
+  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_1cw33_214",
+  "universal-toolbar-ai-custom": "awsui_universal-toolbar-ai-custom_1kzri_1cw33_217",
+  "toolbar-container": "awsui_toolbar-container_1kzri_1cw33_267",
+  "with-ai-drawer": "awsui_with-ai-drawer_1kzri_1cw33_276",
+  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_1cw33_284",
+  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_1cw33_289",
+  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_1cw33_298",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_1cw33_306",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_1cw33_307",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_1cw33_349",
+  "group-divider": "awsui_group-divider_1kzri_1cw33_359",
+  "drawers-trigger": "awsui_drawers-trigger_1kzri_1cw33_349",
+  "block-body-scroll": "awsui_block-body-scroll_1kzri_1cw33_372"
 };
   

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.d.ts

@@ -6,6 +6,7 @@ export interface TriggerButtonProps {
     className?: string;
     iconName?: IconProps.Name;
     iconSvg?: React.ReactNode;
+    customSvg?: React.ReactNode;
     ariaExpanded: boolean | undefined;
     ariaControls?: string;
     disabled?: boolean;
@@ -48,6 +49,7 @@ export interface TriggerButtonProps {
      */
     isForSplitPanel?: boolean;
     tabIndex?: number | undefined;
+    variant?: 'circle' | 'custom';
 }
 declare const _default: React.ForwardRefExoticComponent<TriggerButtonProps & React.RefAttributes<ButtonProps.Ref>>;
 export default _default;

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAStF,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAOxD,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAEpD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B;;AAwLD,wBAA+C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAStF,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAOxD,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAEpD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC/B;;AA2LD,wBAA+C"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.js

@@ -7,7 +7,7 @@ import Icon from '../../../../icon/internal';
 import Tooltip from '../../../../internal/components/tooltip';
 import testutilStyles from '../../../test-classes/styles.css.js';
 import styles from './styles.css.js';
-function TriggerButton({ ariaLabel, className, iconName, iconSvg, ariaExpanded, ariaControls, onClick, testId, disabled = false, badge, selected = false, hasTooltip = false, tooltipText, hasOpenDrawer = false, isMobile = false, isForPreviousActiveDrawer = false, isForSplitPanel = false, }, ref) {
+function TriggerButton({ ariaLabel, className, iconName, iconSvg, customSvg, ariaExpanded, ariaControls, onClick, testId, disabled = false, badge, selected = false, hasTooltip = false, tooltipText, hasOpenDrawer = false, isMobile = false, isForPreviousActiveDrawer = false, isForSplitPanel = false, variant = 'circle', }, ref) {
     const containerRef = useRef(null);
     const tooltipValue = tooltipText ? tooltipText : ariaLabel ? ariaLabel : '';
     const [showTooltip, setShowTooltip] = useState(false);
@@ -103,11 +103,11 @@ function TriggerButton({ ariaLabel, className, iconName, iconSvg, ariaExpanded,
         onFocus: e => handleOnFocus(e),
         onBlur: () => handleBlur(true),
     }), { className: styles['trigger-wrapper'] }),
-        React.createElement("button", Object.assign({ "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": true, "aria-label": ariaLabel, "aria-disabled": disabled, disabled: disabled, className: clsx(styles.trigger, {
+        React.createElement("button", Object.assign({ "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": true, "aria-label": ariaLabel, "aria-disabled": disabled, disabled: disabled, className: clsx(styles.trigger, styles[variant], {
                 [styles.selected]: selected,
                 [styles['trigger-with-badge']]: badge,
                 [testutilStyles['drawers-trigger-with-badge']]: badge,
-            }, className), onClick: handleTriggerClick, ref: ref, type: "button", "data-testid": testId, "data-shift-focus": "awsui-layout-drawer-trigger" }, getAnalyticsMetadataAttribute(triggerEventMetadata)), (iconName || iconSvg) && React.createElement(Icon, { name: iconName, svg: iconSvg })),
+            }, className), onClick: handleTriggerClick, ref: ref, type: "button", "data-testid": testId, "data-shift-focus": "awsui-layout-drawer-trigger" }, getAnalyticsMetadataAttribute(triggerEventMetadata)), customSvg !== null && customSvg !== void 0 ? customSvg : ((iconName || iconSvg) && React.createElement(Icon, { name: iconName, svg: iconSvg }))),
         badge && React.createElement("div", { className: styles.dot }),
         tooltipVisible && (React.createElement(Tooltip, { trackRef: containerRef, value: tooltipValue, className: testutilStyles['trigger-tooltip'], onDismiss: () => {
                 setShowTooltip(false);

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport {\n  GeneratedAnalyticsMetadataAppLayoutToolbarClose,\n  GeneratedAnalyticsMetadataAppLayoutToolbarOpen,\n} from '../../../../app-layout-toolbar/analytics-metadata/interfaces';\nimport { ButtonProps } from '../../../../button/interfaces';\nimport { IconProps } from '../../../../icon/interfaces';\nimport Icon from '../../../../icon/internal';\nimport Tooltip from '../../../../internal/components/tooltip';\n\nimport testutilStyles from '../../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TriggerButtonProps {\n  ariaLabel?: string;\n  className?: string;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  ariaExpanded: boolean | undefined;\n  ariaControls?: string;\n  disabled?: boolean;\n  /**\n   * Ovewrwrites any internal testIds when provided\n   */\n  testId?: string;\n  /**\n   * If button is selected. Used only for desktop and applies a selected class\n   */\n  selected?: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n\n  badge?: boolean;\n  /**\n   * If the button is expected to have a tooltip. When false it will not set the event listeners\n   *\n   * defaults to false\n   */\n  hasTooltip?: boolean;\n  /**\n   * This text allows for a customized tooltip.\n   *\n   * When falsy, the tooltip will parse the tooltip form the aria-lable\n   */\n  tooltipText?: string;\n  hasOpenDrawer?: boolean;\n  /**\n   * If the AppLayout is in mobile mode\n   * Used to determine if and where to render tooltips\n   */\n  isMobile?: boolean;\n  /**\n   * set to true if the trigger button was used to open the last active drawer\n   * this is also used to hide the tooltip should the focus be set programmatically\n   * on focus from a drawer close using this\n   */\n  isForPreviousActiveDrawer?: boolean;\n  /**\n   * if the trigger button is for the split panel\n   */\n  isForSplitPanel?: boolean;\n  tabIndex?: number | undefined;\n}\n\nfunction TriggerButton(\n  {\n    ariaLabel,\n    className,\n    iconName,\n    iconSvg,\n    ariaExpanded,\n    ariaControls,\n    onClick,\n    testId,\n    disabled = false,\n    badge,\n    selected = false,\n    hasTooltip = false,\n    tooltipText,\n    hasOpenDrawer = false,\n    isMobile = false,\n    isForPreviousActiveDrawer = false,\n    isForSplitPanel = false,\n  }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const tooltipValue = tooltipText ? tooltipText : ariaLabel ? ariaLabel : '';\n  const [showTooltip, setShowTooltip] = useState<boolean>(false);\n  const [suppressTooltip, setSupressTooltip] = useState<boolean>(false);\n\n  const handleTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation(); // Stop the event from propagating to the badge icon\n    setShowTooltip(false);\n    setSupressTooltip(true);\n    onClick(event);\n  };\n\n  const handleBlur = (keepSupressed = false) => {\n    setSupressTooltip(keepSupressed);\n    setShowTooltip(false);\n  };\n\n  const handlePointerEnter = () => {\n    setSupressTooltip(false);\n    setShowTooltip(true);\n  };\n\n  /**\n   * Takes the drawer being closed and the data-shift-focus value from a close button on that drawer that persists\n   * on the event relatedTarget to determine not to show the tooltip\n   * @param event\n   */\n  const handleOnFocus = useCallback(\n    (event: FocusEvent) => {\n      let shouldShowTooltip = false;\n      const eventWithRelatedTarget = event as any;\n      const relatedTarget = eventWithRelatedTarget?.relatedTarget;\n      const isFromAnotherTrigger = relatedTarget?.dataset?.shiftFocus === 'awsui-layout-drawer-trigger';\n      if (\n        (isForSplitPanel && !!relatedTarget) || // relatedTarget is null when split panel is closed\n        (!isForSplitPanel &&\n          (isFromAnotherTrigger || // for key navigation from another trigger button\n            !isForPreviousActiveDrawer)) // for when the drawer was not opened recently\n      ) {\n        shouldShowTooltip = true;\n      }\n      setSupressTooltip(!shouldShowTooltip);\n      setShowTooltip(true);\n    },\n    [\n      // To assert reference equality check\n      isForPreviousActiveDrawer,\n      isForSplitPanel,\n    ]\n  );\n\n  const tooltipVisible = useMemo(() => {\n    return (\n      hasTooltip &&\n      showTooltip &&\n      !suppressTooltip &&\n      !!containerRef?.current &&\n      tooltipValue &&\n      !(isMobile && hasOpenDrawer)\n    );\n  }, [hasTooltip, showTooltip, containerRef, tooltipValue, isMobile, hasOpenDrawer, suppressTooltip]);\n\n  useEffect(() => {\n    if (hasTooltip && tooltipValue) {\n      const close = () => {\n        setShowTooltip(false);\n        setSupressTooltip(false);\n      };\n\n      const shouldCloseTooltip = (event: PointerEvent) => {\n        if (event.target && containerRef && (containerRef.current as any)?.contains(event.target as HTMLElement)) {\n          return false;\n        }\n        return true;\n      };\n\n      const handlePointerDownEvent = (event: PointerEvent) => {\n        if (shouldCloseTooltip(event)) {\n          close();\n        }\n      };\n\n      const handleKeyDownEvent = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          close();\n        }\n      };\n\n      const wrapperDiv = containerRef.current;\n      if (wrapperDiv) {\n        const controller = new AbortController();\n        wrapperDiv.addEventListener('pointerdown', handlePointerDownEvent, { signal: controller.signal });\n        wrapperDiv.addEventListener('keydown', handleKeyDownEvent, { signal: controller.signal });\n\n        return () => {\n          controller.abort();\n        };\n      }\n    }\n  }, [containerRef, hasTooltip, tooltipValue]);\n\n  const triggerEventMetadata:\n    | GeneratedAnalyticsMetadataAppLayoutToolbarClose\n    | GeneratedAnalyticsMetadataAppLayoutToolbarOpen = {\n    action: selected ? 'close' : 'open',\n    detail: { label: { root: 'self' } },\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      {...(hasTooltip && {\n        onPointerEnter: () => handlePointerEnter(),\n        onPointerLeave: () => handleBlur(true),\n        onFocus: e => handleOnFocus(e as any),\n        onBlur: () => handleBlur(true),\n      })}\n      className={styles['trigger-wrapper']}\n    >\n      <button\n        aria-expanded={ariaExpanded}\n        aria-controls={ariaControls}\n        aria-haspopup={true}\n        aria-label={ariaLabel}\n        aria-disabled={disabled}\n        disabled={disabled}\n        className={clsx(\n          styles.trigger,\n          {\n            [styles.selected]: selected,\n            [styles['trigger-with-badge']]: badge,\n            [testutilStyles['drawers-trigger-with-badge']]: badge,\n          },\n          className\n        )}\n        onClick={handleTriggerClick}\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        data-testid={testId}\n        data-shift-focus=\"awsui-layout-drawer-trigger\"\n        {...getAnalyticsMetadataAttribute(triggerEventMetadata)}\n      >\n        {(iconName || iconSvg) && <Icon name={iconName} svg={iconSvg} />}\n      </button>\n      {badge && <div className={styles.dot} />}\n      {tooltipVisible && (\n        <Tooltip\n          trackRef={containerRef}\n          value={tooltipValue}\n          className={testutilStyles['trigger-tooltip']}\n          onDismiss={() => {\n            setShowTooltip(false);\n            setSupressTooltip(false);\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport {\n  GeneratedAnalyticsMetadataAppLayoutToolbarClose,\n  GeneratedAnalyticsMetadataAppLayoutToolbarOpen,\n} from '../../../../app-layout-toolbar/analytics-metadata/interfaces';\nimport { ButtonProps } from '../../../../button/interfaces';\nimport { IconProps } from '../../../../icon/interfaces';\nimport Icon from '../../../../icon/internal';\nimport Tooltip from '../../../../internal/components/tooltip';\n\nimport testutilStyles from '../../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TriggerButtonProps {\n  ariaLabel?: string;\n  className?: string;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  customSvg?: React.ReactNode;\n  ariaExpanded: boolean | undefined;\n  ariaControls?: string;\n  disabled?: boolean;\n  /**\n   * Ovewrwrites any internal testIds when provided\n   */\n  testId?: string;\n  /**\n   * If button is selected. Used only for desktop and applies a selected class\n   */\n  selected?: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n\n  badge?: boolean;\n  /**\n   * If the button is expected to have a tooltip. When false it will not set the event listeners\n   *\n   * defaults to false\n   */\n  hasTooltip?: boolean;\n  /**\n   * This text allows for a customized tooltip.\n   *\n   * When falsy, the tooltip will parse the tooltip form the aria-lable\n   */\n  tooltipText?: string;\n  hasOpenDrawer?: boolean;\n  /**\n   * If the AppLayout is in mobile mode\n   * Used to determine if and where to render tooltips\n   */\n  isMobile?: boolean;\n  /**\n   * set to true if the trigger button was used to open the last active drawer\n   * this is also used to hide the tooltip should the focus be set programmatically\n   * on focus from a drawer close using this\n   */\n  isForPreviousActiveDrawer?: boolean;\n  /**\n   * if the trigger button is for the split panel\n   */\n  isForSplitPanel?: boolean;\n  tabIndex?: number | undefined;\n  variant?: 'circle' | 'custom';\n}\n\nfunction TriggerButton(\n  {\n    ariaLabel,\n    className,\n    iconName,\n    iconSvg,\n    customSvg,\n    ariaExpanded,\n    ariaControls,\n    onClick,\n    testId,\n    disabled = false,\n    badge,\n    selected = false,\n    hasTooltip = false,\n    tooltipText,\n    hasOpenDrawer = false,\n    isMobile = false,\n    isForPreviousActiveDrawer = false,\n    isForSplitPanel = false,\n    variant = 'circle',\n  }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const tooltipValue = tooltipText ? tooltipText : ariaLabel ? ariaLabel : '';\n  const [showTooltip, setShowTooltip] = useState<boolean>(false);\n  const [suppressTooltip, setSupressTooltip] = useState<boolean>(false);\n\n  const handleTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation(); // Stop the event from propagating to the badge icon\n    setShowTooltip(false);\n    setSupressTooltip(true);\n    onClick(event);\n  };\n\n  const handleBlur = (keepSupressed = false) => {\n    setSupressTooltip(keepSupressed);\n    setShowTooltip(false);\n  };\n\n  const handlePointerEnter = () => {\n    setSupressTooltip(false);\n    setShowTooltip(true);\n  };\n\n  /**\n   * Takes the drawer being closed and the data-shift-focus value from a close button on that drawer that persists\n   * on the event relatedTarget to determine not to show the tooltip\n   * @param event\n   */\n  const handleOnFocus = useCallback(\n    (event: FocusEvent) => {\n      let shouldShowTooltip = false;\n      const eventWithRelatedTarget = event as any;\n      const relatedTarget = eventWithRelatedTarget?.relatedTarget;\n      const isFromAnotherTrigger = relatedTarget?.dataset?.shiftFocus === 'awsui-layout-drawer-trigger';\n      if (\n        (isForSplitPanel && !!relatedTarget) || // relatedTarget is null when split panel is closed\n        (!isForSplitPanel &&\n          (isFromAnotherTrigger || // for key navigation from another trigger button\n            !isForPreviousActiveDrawer)) // for when the drawer was not opened recently\n      ) {\n        shouldShowTooltip = true;\n      }\n      setSupressTooltip(!shouldShowTooltip);\n      setShowTooltip(true);\n    },\n    [\n      // To assert reference equality check\n      isForPreviousActiveDrawer,\n      isForSplitPanel,\n    ]\n  );\n\n  const tooltipVisible = useMemo(() => {\n    return (\n      hasTooltip &&\n      showTooltip &&\n      !suppressTooltip &&\n      !!containerRef?.current &&\n      tooltipValue &&\n      !(isMobile && hasOpenDrawer)\n    );\n  }, [hasTooltip, showTooltip, containerRef, tooltipValue, isMobile, hasOpenDrawer, suppressTooltip]);\n\n  useEffect(() => {\n    if (hasTooltip && tooltipValue) {\n      const close = () => {\n        setShowTooltip(false);\n        setSupressTooltip(false);\n      };\n\n      const shouldCloseTooltip = (event: PointerEvent) => {\n        if (event.target && containerRef && (containerRef.current as any)?.contains(event.target as HTMLElement)) {\n          return false;\n        }\n        return true;\n      };\n\n      const handlePointerDownEvent = (event: PointerEvent) => {\n        if (shouldCloseTooltip(event)) {\n          close();\n        }\n      };\n\n      const handleKeyDownEvent = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          close();\n        }\n      };\n\n      const wrapperDiv = containerRef.current;\n      if (wrapperDiv) {\n        const controller = new AbortController();\n        wrapperDiv.addEventListener('pointerdown', handlePointerDownEvent, { signal: controller.signal });\n        wrapperDiv.addEventListener('keydown', handleKeyDownEvent, { signal: controller.signal });\n\n        return () => {\n          controller.abort();\n        };\n      }\n    }\n  }, [containerRef, hasTooltip, tooltipValue]);\n\n  const triggerEventMetadata:\n    | GeneratedAnalyticsMetadataAppLayoutToolbarClose\n    | GeneratedAnalyticsMetadataAppLayoutToolbarOpen = {\n    action: selected ? 'close' : 'open',\n    detail: { label: { root: 'self' } },\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      {...(hasTooltip && {\n        onPointerEnter: () => handlePointerEnter(),\n        onPointerLeave: () => handleBlur(true),\n        onFocus: e => handleOnFocus(e as any),\n        onBlur: () => handleBlur(true),\n      })}\n      className={styles['trigger-wrapper']}\n    >\n      <button\n        aria-expanded={ariaExpanded}\n        aria-controls={ariaControls}\n        aria-haspopup={true}\n        aria-label={ariaLabel}\n        aria-disabled={disabled}\n        disabled={disabled}\n        className={clsx(\n          styles.trigger,\n          styles[variant],\n          {\n            [styles.selected]: selected,\n            [styles['trigger-with-badge']]: badge,\n            [testutilStyles['drawers-trigger-with-badge']]: badge,\n          },\n          className\n        )}\n        onClick={handleTriggerClick}\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        data-testid={testId}\n        data-shift-focus=\"awsui-layout-drawer-trigger\"\n        {...getAnalyticsMetadataAttribute(triggerEventMetadata)}\n      >\n        {customSvg ?? ((iconName || iconSvg) && <Icon name={iconName} svg={iconSvg} />)}\n      </button>\n      {badge && <div className={styles.dot} />}\n      {tooltipVisible && (\n        <Tooltip\n          trackRef={containerRef}\n          value={tooltipValue}\n          className={testutilStyles['trigger-tooltip']}\n          onDismiss={() => {\n            setShowTooltip(false);\n            setSupressTooltip(false);\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}

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

@@ -1,10 +1,12 @@
 
     import './styles.scoped.css';
     export default {
-  "trigger": "awsui_trigger_lpshu_1ipnb_145",
-  "trigger-with-badge": "awsui_trigger-with-badge_lpshu_1ipnb_157",
-  "selected": "awsui_selected_lpshu_1ipnb_175",
-  "trigger-wrapper": "awsui_trigger-wrapper_lpshu_1ipnb_186",
-  "dot": "awsui_dot_lpshu_1ipnb_211"
+  "trigger": "awsui_trigger_lpshu_hah7l_145",
+  "custom": "awsui_custom_lpshu_hah7l_151",
+  "trigger-with-badge": "awsui_trigger-with-badge_lpshu_hah7l_157",
+  "circle": "awsui_circle_lpshu_hah7l_167",
+  "selected": "awsui_selected_lpshu_hah7l_183",
+  "trigger-wrapper": "awsui_trigger-wrapper_lpshu_hah7l_194",
+  "dot": "awsui_dot_lpshu_hah7l_219"
 };
   

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

@@ -142,58 +142,66 @@
 */
 /* 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_trigger_lpshu_1ipnb_145:not(#\9) {
+.awsui_trigger_lpshu_hah7l_145:not(#\9) {
   all: initial;
   cursor: pointer;
   color: var(--color-text-interactive-default-qwoe3g, #545b64);
-  border-start-start-radius: 50%;
-  border-start-end-radius: 50%;
-  border-end-start-radius: 50%;
-  border-end-end-radius: 50%;
-  block-size: 30px;
-  inline-size: 30px;
   text-align: center;
 }
-.awsui_trigger-with-badge_lpshu_1ipnb_157:not(#\9) {
+.awsui_trigger_lpshu_hah7l_145.awsui_custom_lpshu_hah7l_151:not(#\9) {
+  display: flex;
+  block-size: 100%;
+  inline-size: 100%;
+  box-sizing: border-box;
+}
+.awsui_trigger-with-badge_lpshu_hah7l_157:not(#\9) {
   clip-path: path("M29.2862 10.4145C28.7243 10.5998 28.1238 10.7 27.4999 10.7C24.3519 10.7 21.7999 8.14803 21.7999 5C21.7999 3.92883 22.0954 2.92667 22.6093 2.07057C20.3785 0.754846 17.7774 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30C23.2843 30 30 23.2843 30 15C30 13.4007 29.7497 11.8599 29.2862 10.4145Z");
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_trigger-with-badge_lpshu_1ipnb_157:not(#\9):dir(rtl) {
+.awsui_trigger-with-badge_lpshu_hah7l_157:not(#\9):dir(rtl) {
   clip-path: path("M2.21384 10.4145C2.77569 10.5998 3.37617 10.7 4.00007 10.7C7.1481 10.7 9.70007 8.14803 9.70007 5C9.70007 3.92883 9.4046 2.92667 8.89071 2.07057C11.1215 0.754846 13.7226 0 16.5 0C24.7843 0 31.5 6.71573 31.5 15C31.5 23.2843 24.7843 30 16.5 30C8.21573 30 1.5 23.2843 1.5 15C1.5 13.4007 1.75029 11.8599 2.21384 10.4145Z");
 }
-.awsui_trigger_lpshu_1ipnb_145:not(#\9):hover {
+.awsui_trigger_lpshu_hah7l_145:not(#\9):focus {
+  outline: none;
+}
+.awsui_trigger_lpshu_hah7l_145.awsui_circle_lpshu_hah7l_167:not(#\9) {
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
+  block-size: 30px;
+  inline-size: 30px;
+}
+.awsui_trigger_lpshu_hah7l_145.awsui_circle_lpshu_hah7l_167:not(#\9):hover {
   background: var(--color-background-input-disabled-4vlau3, #eaeded);
   color: var(--color-text-interactive-hover-bu4gls, #16191f);
 }
-.awsui_trigger_lpshu_1ipnb_145:not(#\9):active {
+.awsui_trigger_lpshu_hah7l_145.awsui_circle_lpshu_hah7l_167:not(#\9):active {
   background: var(--color-background-control-disabled-2ixett, #d5dbdb);
   color: var(--color-text-interactive-hover-bu4gls, #16191f);
 }
-.awsui_trigger_lpshu_1ipnb_145:not(#\9):focus {
-  outline: none;
-}
-.awsui_trigger_lpshu_1ipnb_145.awsui_selected_lpshu_1ipnb_175:not(#\9) {
+.awsui_trigger_lpshu_hah7l_145.awsui_circle_lpshu_hah7l_167.awsui_selected_lpshu_hah7l_183:not(#\9) {
   background: var(--color-background-layout-toggle-selected-default-o4my1h, #0073bb);
   color: var(--color-text-layout-toggle-selected-ofhd1q, #ffffff);
 }
-.awsui_trigger_lpshu_1ipnb_145.awsui_selected_lpshu_1ipnb_175:not(#\9):hover {
+.awsui_trigger_lpshu_hah7l_145.awsui_circle_lpshu_hah7l_167.awsui_selected_lpshu_hah7l_183:not(#\9):hover {
   background: var(--color-background-layout-toggle-selected-hover-yuaxel, #0a4a74);
 }
-.awsui_trigger_lpshu_1ipnb_145.awsui_selected_lpshu_1ipnb_175:not(#\9):active {
+.awsui_trigger_lpshu_hah7l_145.awsui_circle_lpshu_hah7l_167.awsui_selected_lpshu_hah7l_183:not(#\9):active {
   background: var(--color-background-layout-toggle-selected-active-wfv72o, #0073bb);
 }
 
-.awsui_trigger-wrapper_lpshu_1ipnb_186:not(#\9) {
+.awsui_trigger-wrapper_lpshu_hah7l_194:not(#\9) {
   position: relative;
 }
-.awsui_trigger-wrapper_lpshu_1ipnb_186:not(#\9):has(:focus-visible) {
+.awsui_trigger-wrapper_lpshu_hah7l_194:not(#\9):has(:focus-visible) {
   position: relative;
 }
-.awsui_trigger-wrapper_lpshu_1ipnb_186:not(#\9):has(:focus-visible) {
+.awsui_trigger-wrapper_lpshu_hah7l_194:not(#\9):has(:focus-visible) {
   outline: 2px dotted transparent;
   outline-offset: calc(3px - 1px);
 }
-.awsui_trigger-wrapper_lpshu_1ipnb_186:not(#\9):has(:focus-visible)::before {
+.awsui_trigger-wrapper_lpshu_hah7l_194:not(#\9):has(:focus-visible)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -208,7 +216,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
 }
 
-.awsui_dot_lpshu_1ipnb_211:not(#\9) {
+.awsui_dot_lpshu_hah7l_219:not(#\9) {
   position: absolute;
   inline-size: 8px;
   block-size: 8px;

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

@@ -2,10 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "trigger": "awsui_trigger_lpshu_1ipnb_145",
-  "trigger-with-badge": "awsui_trigger-with-badge_lpshu_1ipnb_157",
-  "selected": "awsui_selected_lpshu_1ipnb_175",
-  "trigger-wrapper": "awsui_trigger-wrapper_lpshu_1ipnb_186",
-  "dot": "awsui_dot_lpshu_1ipnb_211"
+  "trigger": "awsui_trigger_lpshu_hah7l_145",
+  "custom": "awsui_custom_lpshu_hah7l_151",
+  "trigger-with-badge": "awsui_trigger-with-badge_lpshu_hah7l_157",
+  "circle": "awsui_circle_lpshu_hah7l_167",
+  "selected": "awsui_selected_lpshu_hah7l_183",
+  "trigger-wrapper": "awsui_trigger-wrapper_lpshu_hah7l_194",
+  "dot": "awsui_dot_lpshu_hah7l_219"
 };
   

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"before-main-slot.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAQ3D,eAAO,MAAM,4BAA4B,qDAAsD,iBAAiB,gBAqC/G,CAAC;AAEF,eAAO,MAAM,uCAAuC,gEAvC2C,iBAAiB,qFAAjB,iBAAiB,gBA0C/G,CAAC"}
+{"version":3,"file":"before-main-slot.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAQ3D,eAAO,MAAM,4BAA4B,qDAAsD,iBAAiB,gBA4F/G,CAAC;AAEF,eAAO,MAAM,uCAAuC,gEA9F2C,iBAAiB,qFAAjB,iBAAiB,gBAiG/G,CAAC"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.js

@@ -1,8 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { createWidgetizedComponent } from '../../../internal/widgets';
+import { ActiveDrawersContext } from '../../utils/visibility-context';
+import { AppLayoutGlobalAiDrawerImplementation } from '../drawer/global-ai-drawer';
 import { AppLayoutNavigationImplementation as AppLayoutNavigation } from '../navigation';
 import { BeforeMainSlotSkeleton } from '../skeleton/skeleton-parts';
 import { isWidgetReady } from '../state/invariants';
@@ -10,17 +12,35 @@ import { AppLayoutToolbarImplementation as AppLayoutToolbar } from '../toolbar';
 import sharedStyles from '../../resize/styles.css.js';
 import styles from '../skeleton/styles.css.js';
 export const BeforeMainSlotImplementation = ({ toolbarProps, appLayoutState, appLayoutProps }) => {
+    const wasAiDrawerOpenRef = useRef(false);
     if (!isWidgetReady(appLayoutState)) {
         return (React.createElement(BeforeMainSlotSkeleton, { toolbarProps: toolbarProps, appLayoutProps: appLayoutProps, appLayoutState: appLayoutState }));
     }
-    const { activeDrawer, navigationOpen, navigation, expandedDrawerId, navigationAnimationDisabled } = appLayoutState.widgetizedState;
+    const { activeDrawer, navigationOpen, navigation, expandedDrawerId, setExpandedDrawerId, navigationAnimationDisabled, activeAiDrawerId, aiDrawerExpandedMode, aiDrawer, activeAiDrawerSize, minAiDrawerSize, maxAiDrawerSize, onActiveAiDrawerResize, aiDrawerFocusControl, ariaLabels, isMobile, drawersOpenQueue, onActiveAiDrawerChange, activeAiDrawer, } = appLayoutState.widgetizedState;
     const drawerExpandedMode = !!expandedDrawerId;
     const toolsOpen = !!activeDrawer;
     // Must use `toolbarProps` because all layouts have to apply this mode, not just the one with toolbar
     const drawerExpandedModeInChildLayout = !!(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.expandedDrawerId);
     const { __embeddedViewMode: embeddedViewMode } = appLayoutProps;
     return (React.createElement(React.Fragment, null,
-        !!toolbarProps && !embeddedViewMode && (React.createElement(AppLayoutToolbar, { appLayoutInternals: appLayoutState.appLayoutInternals, toolbarProps: toolbarProps })),
+        !!toolbarProps && !embeddedViewMode && !aiDrawerExpandedMode && (React.createElement(AppLayoutToolbar, { appLayoutInternals: appLayoutState.appLayoutInternals, toolbarProps: toolbarProps })),
+        aiDrawer && (React.createElement("div", { className: clsx(styles['ai-drawer'], (drawerExpandedMode || drawerExpandedModeInChildLayout) && !aiDrawerExpandedMode && styles.hidden) },
+            React.createElement(ActiveDrawersContext.Provider, { value: activeAiDrawer ? [activeAiDrawer.id] : [] }, (!!activeAiDrawerId || ((aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.preserveInactiveContent) && wasAiDrawerOpenRef.current)) && (React.createElement(React.Fragment, null,
+                (wasAiDrawerOpenRef.current = true),
+                React.createElement(AppLayoutGlobalAiDrawerImplementation, { show: !!activeAiDrawerId, activeAiDrawer: aiDrawer !== null && aiDrawer !== void 0 ? aiDrawer : null, appLayoutInternals: appLayoutState.appLayoutInternals, aiDrawerProps: {
+                        activeAiDrawerSize: activeAiDrawerSize,
+                        minAiDrawerSize: minAiDrawerSize,
+                        maxAiDrawerSize: maxAiDrawerSize,
+                        aiDrawer: aiDrawer,
+                        ariaLabels,
+                        aiDrawerFocusControl,
+                        isMobile,
+                        drawersOpenQueue,
+                        onActiveAiDrawerChange,
+                        onActiveDrawerResize: ({ size }) => onActiveAiDrawerResize(size),
+                        expandedDrawerId,
+                        setExpandedDrawerId,
+                    } })))))),
         navigation && (React.createElement("div", { className: clsx(styles.navigation, !navigationOpen && styles['panel-hidden'], toolsOpen && styles['unfocusable-mobile'], !navigationAnimationDisabled && sharedStyles['with-motion-horizontal'], (drawerExpandedMode || drawerExpandedModeInChildLayout) && styles.hidden) },
             React.createElement(AppLayoutNavigation, { appLayoutInternals: appLayoutState.appLayoutInternals })))));
 };

package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.js.map

@@ -1 +1 @@
-{"version":3,"file":"before-main-slot.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,iCAAiC,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEzF,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,8BAA8B,IAAI,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEhF,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAE/C,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAqB,EAAE,EAAE;IAClH,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE;QAClC,OAAO,CACL,oBAAC,sBAAsB,IACrB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC;KACH;IACD,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,GAC/F,cAAc,CAAC,eAAe,CAAC;IACjC,MAAM,kBAAkB,GAAG,CAAC,CAAC,gBAAgB,CAAC;IAC9C,MAAM,SAAS,GAAG,CAAC,CAAC,YAAY,CAAC;IACjC,qGAAqG;IACrG,MAAM,+BAA+B,GAAG,CAAC,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,CAAA,CAAC;IACzE,MAAM,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,GAAG,cAAqB,CAAC;IACvE,OAAO,CACL;QACG,CAAC,CAAC,YAAY,IAAI,CAAC,gBAAgB,IAAI,CACtC,oBAAC,gBAAgB,IAAC,kBAAkB,EAAE,cAAc,CAAC,kBAAkB,EAAE,YAAY,EAAE,YAAY,GAAI,CACxG;QACA,UAAU,IAAI,CACb,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB,CAAC,cAAc,IAAI,MAAM,CAAC,cAAc,CAAC,EACzC,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC,EACzC,CAAC,2BAA2B,IAAI,YAAY,CAAC,wBAAwB,CAAC,EACtE,CAAC,kBAAkB,IAAI,+BAA+B,CAAC,IAAI,MAAM,CAAC,MAAM,CACzE;YAED,oBAAC,mBAAmB,IAAC,kBAAkB,EAAE,cAAc,CAAC,kBAAkB,GAAI,CAC1E,CACP,CACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uCAAuC,GAAG,yBAAyB,CAC9E,4BAA4B,EAC5B,sBAAsB,CACvB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutNavigationImplementation as AppLayoutNavigation } from '../navigation';\nimport { SkeletonPartProps } from '../skeleton/interfaces';\nimport { BeforeMainSlotSkeleton } from '../skeleton/skeleton-parts';\nimport { isWidgetReady } from '../state/invariants';\nimport { AppLayoutToolbarImplementation as AppLayoutToolbar } from '../toolbar';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport styles from '../skeleton/styles.css.js';\n\nexport const BeforeMainSlotImplementation = ({ toolbarProps, appLayoutState, appLayoutProps }: SkeletonPartProps) => {\n  if (!isWidgetReady(appLayoutState)) {\n    return (\n      <BeforeMainSlotSkeleton\n        toolbarProps={toolbarProps}\n        appLayoutProps={appLayoutProps}\n        appLayoutState={appLayoutState}\n      />\n    );\n  }\n  const { activeDrawer, navigationOpen, navigation, expandedDrawerId, navigationAnimationDisabled } =\n    appLayoutState.widgetizedState;\n  const drawerExpandedMode = !!expandedDrawerId;\n  const toolsOpen = !!activeDrawer;\n  // Must use `toolbarProps` because all layouts have to apply this mode, not just the one with toolbar\n  const drawerExpandedModeInChildLayout = !!toolbarProps?.expandedDrawerId;\n  const { __embeddedViewMode: embeddedViewMode } = appLayoutProps as any;\n  return (\n    <>\n      {!!toolbarProps && !embeddedViewMode && (\n        <AppLayoutToolbar appLayoutInternals={appLayoutState.appLayoutInternals} toolbarProps={toolbarProps} />\n      )}\n      {navigation && (\n        <div\n          className={clsx(\n            styles.navigation,\n            !navigationOpen && styles['panel-hidden'],\n            toolsOpen && styles['unfocusable-mobile'],\n            !navigationAnimationDisabled && sharedStyles['with-motion-horizontal'],\n            (drawerExpandedMode || drawerExpandedModeInChildLayout) && styles.hidden\n          )}\n        >\n          <AppLayoutNavigation appLayoutInternals={appLayoutState.appLayoutInternals} />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport const createWidgetizedAppLayoutBeforeMainSlot = createWidgetizedComponent(\n  BeforeMainSlotImplementation,\n  BeforeMainSlotSkeleton\n);\n"]}
+{"version":3,"file":"before-main-slot.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { ActiveDrawersContext } from '../../utils/visibility-context';\nimport { AppLayoutGlobalAiDrawerImplementation } from '../drawer/global-ai-drawer';\nimport { AppLayoutNavigationImplementation as AppLayoutNavigation } from '../navigation';\nimport { SkeletonPartProps } from '../skeleton/interfaces';\nimport { BeforeMainSlotSkeleton } from '../skeleton/skeleton-parts';\nimport { isWidgetReady } from '../state/invariants';\nimport { AppLayoutToolbarImplementation as AppLayoutToolbar } from '../toolbar';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport styles from '../skeleton/styles.css.js';\n\nexport const BeforeMainSlotImplementation = ({ toolbarProps, appLayoutState, appLayoutProps }: SkeletonPartProps) => {\n  const wasAiDrawerOpenRef = useRef(false);\n  if (!isWidgetReady(appLayoutState)) {\n    return (\n      <BeforeMainSlotSkeleton\n        toolbarProps={toolbarProps}\n        appLayoutProps={appLayoutProps}\n        appLayoutState={appLayoutState}\n      />\n    );\n  }\n  const {\n    activeDrawer,\n    navigationOpen,\n    navigation,\n    expandedDrawerId,\n    setExpandedDrawerId,\n    navigationAnimationDisabled,\n    activeAiDrawerId,\n    aiDrawerExpandedMode,\n    aiDrawer,\n    activeAiDrawerSize,\n    minAiDrawerSize,\n    maxAiDrawerSize,\n    onActiveAiDrawerResize,\n    aiDrawerFocusControl,\n    ariaLabels,\n    isMobile,\n    drawersOpenQueue,\n    onActiveAiDrawerChange,\n    activeAiDrawer,\n  } = appLayoutState.widgetizedState;\n  const drawerExpandedMode = !!expandedDrawerId;\n  const toolsOpen = !!activeDrawer;\n  // Must use `toolbarProps` because all layouts have to apply this mode, not just the one with toolbar\n  const drawerExpandedModeInChildLayout = !!toolbarProps?.expandedDrawerId;\n  const { __embeddedViewMode: embeddedViewMode } = appLayoutProps as any;\n  return (\n    <>\n      {!!toolbarProps && !embeddedViewMode && !aiDrawerExpandedMode && (\n        <AppLayoutToolbar appLayoutInternals={appLayoutState.appLayoutInternals} toolbarProps={toolbarProps} />\n      )}\n      {aiDrawer && (\n        <div\n          className={clsx(\n            styles['ai-drawer'],\n            (drawerExpandedMode || drawerExpandedModeInChildLayout) && !aiDrawerExpandedMode && styles.hidden\n          )}\n        >\n          <ActiveDrawersContext.Provider value={activeAiDrawer ? [activeAiDrawer.id] : []}>\n            {(!!activeAiDrawerId || (aiDrawer?.preserveInactiveContent && wasAiDrawerOpenRef.current)) && (\n              <>\n                {(wasAiDrawerOpenRef.current = true)}\n                <AppLayoutGlobalAiDrawerImplementation\n                  show={!!activeAiDrawerId}\n                  activeAiDrawer={aiDrawer ?? null}\n                  appLayoutInternals={appLayoutState.appLayoutInternals}\n                  aiDrawerProps={{\n                    activeAiDrawerSize: activeAiDrawerSize!,\n                    minAiDrawerSize: minAiDrawerSize!,\n                    maxAiDrawerSize: maxAiDrawerSize!,\n                    aiDrawer: aiDrawer!,\n                    ariaLabels,\n                    aiDrawerFocusControl,\n                    isMobile,\n                    drawersOpenQueue,\n                    onActiveAiDrawerChange,\n                    onActiveDrawerResize: ({ size }) => onActiveAiDrawerResize(size),\n                    expandedDrawerId,\n                    setExpandedDrawerId,\n                  }}\n                />\n              </>\n            )}\n          </ActiveDrawersContext.Provider>\n        </div>\n      )}\n      {navigation && (\n        <div\n          className={clsx(\n            styles.navigation,\n            !navigationOpen && styles['panel-hidden'],\n            toolsOpen && styles['unfocusable-mobile'],\n            !navigationAnimationDisabled && sharedStyles['with-motion-horizontal'],\n            (drawerExpandedMode || drawerExpandedModeInChildLayout) && styles.hidden\n          )}\n        >\n          <AppLayoutNavigation appLayoutInternals={appLayoutState.appLayoutInternals} />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport const createWidgetizedAppLayoutBeforeMainSlot = createWidgetizedComponent(\n  BeforeMainSlotImplementation,\n  BeforeMainSlotSkeleton\n);\n"]}

package/lib/internal/template/internal/base-component/styles.scoped.css

@@ -3892,5 +3892,5 @@
   }
 }
 :root {
-  --awsui-version-info-5b144292: true;
+  --awsui-version-info-3048a990: true;
 }

package/lib/internal/template/internal/components/panel-resize-handle/index.d.ts

@@ -4,11 +4,12 @@ interface ResizeHandleProps {
     className?: string;
     ariaLabel: string | undefined;
     tooltipText?: string | undefined;
-    position: 'side' | 'bottom';
+    position: 'side-start' | 'side' | 'bottom';
     ariaValuenow: number;
     onDirectionClick: DragHandleProps['onDirectionClick'];
     onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
     onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;
+    disabled?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<ResizeHandleProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;