@cloudscape-design/components-themeable 3.0.611 → 3.0.613

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "4f9bf8687fe3e1e35bfc102de8ff4a45d17e6530"
+  "commit": "9b1e87582399b3c8907487cea9e5eead633b8a94"
 }

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

@@ -51,6 +51,9 @@
 .active-drawer-close-button {
   /* used in tests */
 }
+.overflow-menu {
+  /* used in test-utils */
+}
 
 .drawers-slider {
   /* used in tests */

package/lib/internal/scss/button-dropdown/category-elements/styles.scss

@@ -66,19 +66,6 @@
         box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
       }
     }
-    &.variant-navigation {
-      padding-block-start: awsui.$space-xs;
-      padding-block-end: awsui.$space-xs;
-
-      &.highlighted {
-        border-color: transparent;
-        border-block-start-color: awsui.$color-border-dropdown-group;
-        border-block-end-color: awsui.$color-border-dropdown-group;
-
-        background-color: transparent;
-        color: awsui.$color-text-accent;
-      }
-    }
   }
 }
 

package/lib/internal/scss/button-dropdown/item-element/styles.scss

@@ -32,48 +32,22 @@
     color: awsui.$color-text-dropdown-item-highlighted;
     z-index: 2;
 
-    &.variant-icon,
-    &.variant-inline-icon,
-    &.variant-normal,
-    &.variant-primary {
-      background-color: awsui.$color-background-dropdown-item-hover;
-      border-color: awsui.$color-border-dropdown-item-hover;
-      border-start-start-radius: awsui.$border-radius-item;
-      border-start-end-radius: awsui.$border-radius-item;
-      border-end-start-radius: awsui.$border-radius-item;
-      border-end-end-radius: awsui.$border-radius-item;
+    background-color: awsui.$color-background-dropdown-item-hover;
+    border-color: awsui.$color-border-dropdown-item-hover;
+    border-start-start-radius: awsui.$border-radius-item;
+    border-start-end-radius: awsui.$border-radius-item;
+    border-end-start-radius: awsui.$border-radius-item;
+    border-end-end-radius: awsui.$border-radius-item;
 
-      &.disabled {
-        color: awsui.$color-text-dropdown-item-dimmed;
-        border-color: awsui.$color-border-dropdown-item-dimmed-hover;
-        background-color: awsui.$color-background-dropdown-item-dimmed;
-      }
-
-      &.is-focused {
-        border-color: awsui.$color-border-dropdown-item-focused;
-        box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
-      }
-    }
-  }
-
-  &.variant-navigation {
-    &.highlighted {
-      color: awsui.$color-text-accent;
+    &.disabled {
+      color: awsui.$color-text-dropdown-item-dimmed;
+      border-color: awsui.$color-border-dropdown-item-dimmed-hover;
+      background-color: awsui.$color-background-dropdown-item-dimmed;
     }
 
-    // Additional spacing for groups of items
-    &.first:not(.has-category-header) {
-      padding-block-start: styles.$option-padding-vertical;
-    }
-    &.last {
-      padding-block-end: styles.$option-padding-vertical;
-    }
-    &.first.last {
-      padding-block: styles.$option-padding-vertical;
-    }
-    // Additional spacing for the very last item in the list
-    &.last:last-child {
-      padding-block-end: styles.$option-padding-vertical;
+    &.is-focused {
+      border-color: awsui.$color-border-dropdown-item-focused;
+      box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
     }
   }
 }

package/lib/internal/scss/table/body-cell/styles.scss

@@ -26,6 +26,15 @@ $edit-button-padding-right: calc(
 ); // Cell vertical padding + xxs space that would normally come from the button.
 $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-with-spacing});
 
+@mixin cell-focus-outline {
+  @include styles.focus-highlight(calc(-1 * #{awsui.$space-scaled-xxs}));
+  // @mixin focus-highlight sets cell's position to "relative".
+  // Reinforcing sticky position for it to take precedence.
+  &.sticky-cell {
+    position: sticky;
+  }
+}
+
 .expandable-toggle-wrapper {
   position: absolute;
   inset-block: 0;
@@ -59,17 +68,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
   font-weight: inherit;
 
   @include focus-visible.when-visible {
-    @include styles.focus-highlight(
-      (
-        'vertical': calc(-1 * #{awsui.$space-scaled-xxs}),
-        'horizontal': calc(-1 * #{awsui.$space-scaled-xxs}),
-      )
-    );
-    // @mixin focus-highlight sets cell's position to "relative".
-    // Reinforcing sticky position for it to take precedence.
-    &.sticky-cell {
-      position: sticky;
-    }
+    @include cell-focus-outline;
   }
 
   text-align: start;
@@ -365,12 +364,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
       // It's therefore important to display the focus outline, even when a keyboard use wasn't detected.
       // For example, when an edit button is selected from the VoiceOver rotor menu.
       &.body-cell-interactive:focus-within {
-        @include styles.focus-highlight(
-          (
-            'vertical': calc(-1 * #{awsui.$space-scaled-xxs}),
-            'horizontal': calc(-1 * #{awsui.$space-scaled-xxs}),
-          )
-        );
+        @include cell-focus-outline;
       }
       // When a cell is not interactive the focus outline must be present for the editor button.
       &:not(.body-cell-interactive) > .body-cell-editor-wrapper > .body-cell-editor,

package/lib/internal/scss/table/expandable-rows/styles.scss

@@ -6,7 +6,6 @@
 @use '../../internal/styles/index' as styles;
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/hooks/focus-visible' as focus-visible;
-@use '../../internal/styles/tokens' as tokens;
 
 @use './motion';
 

package/lib/internal/scss/table/header-cell/styles.scss

@@ -7,6 +7,22 @@
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
 
+@mixin when-focus-visible-or-fake {
+  @include focus-visible.when-visible {
+    @content;
+  }
+  // stylelint-disable-next-line selector-combinator-disallowed-list
+  body[data-awsui-focus-visible='true'] &.header-cell-fake-focus {
+    @content;
+  }
+}
+
+@mixin header-cell-focus-outline($gutter) {
+  @include when-focus-visible-or-fake {
+    @include styles.focus-highlight(calc(-1 * #{$gutter}));
+  }
+}
+
 @mixin cell-offset($padding) {
   padding-inline-start: $padding;
 
@@ -27,23 +43,7 @@
   padding-block: awsui.$space-scaled-xxs;
   padding-inline: awsui.$space-scaled-xs;
 
-  @include focus-visible.when-visible {
-    @include styles.focus-highlight(
-      (
-        'vertical': calc(-1 * #{awsui.$space-scaled-xxs}),
-        'horizontal': calc(-1 * #{awsui.$space-scaled-xxs}),
-      )
-    );
-  }
-  // stylelint-disable-next-line selector-combinator-disallowed-list
-  body[data-awsui-focus-visible='true'] &-fake-focus {
-    @include styles.focus-highlight(
-      (
-        'vertical': calc(-1 * #{awsui.$space-scaled-xxs}),
-        'horizontal': calc(-1 * #{awsui.$space-scaled-xxs}),
-      )
-    );
-  }
+  @include header-cell-focus-outline(awsui.$space-scaled-xxs);
 
   &-sticky {
     border-block-end: awsui.$border-table-sticky-width solid awsui.$color-border-divider-default;
@@ -113,14 +113,7 @@
     text-decoration: none;
   }
 
-  @include focus-visible.when-visible {
-    @include styles.focus-highlight(awsui.$space-table-header-focus-outline-gutter);
-  }
-
-  // stylelint-disable-next-line selector-combinator-disallowed-list
-  body[data-awsui-focus-visible='true'] &.header-cell-fake-focus {
-    @include styles.focus-highlight(awsui.$space-table-header-focus-outline-gutter);
-  }
+  @include header-cell-focus-outline(awsui.$space-table-header-focus-outline-gutter);
 
   .header-cell-disabled.header-cell-sorted > & {
     & > .sorting-icon {

package/lib/internal/template/app-layout/drawer/overflow-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overflow-menu.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/drawer/overflow-menu.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AACpG,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,UAAU,iBAAiB;IACzB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IACpC,WAAW,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC1E,oBAAoB,CAAC,EAAE,2BAA2B,CAAC,sBAAsB,CAAC,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,SAAS,EAAE,EAAE,iBAAiB,eAiB9G"}
+{"version":3,"file":"overflow-menu.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/drawer/overflow-menu.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AACpG,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,UAAU,iBAAiB;IACzB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IACpC,WAAW,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC1E,oBAAoB,CAAC,EAAE,2BAA2B,CAAC,sBAAsB,CAAC,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,SAAS,EAAE,EAAE,iBAAiB,eAkB9G"}

package/lib/internal/template/app-layout/drawer/overflow-menu.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import InternalButtonDropdown from '../../button-dropdown/internal';
+import testutilStyles from '../test-classes/styles.css.js';
 export default function OverflowMenu({ items, onItemClick, customTriggerBuilder, ariaLabel }) {
     return (React.createElement(InternalButtonDropdown, { items: items.map(item => ({
             id: item.id,
@@ -9,6 +10,6 @@ export default function OverflowMenu({ items, onItemClick, customTriggerBuilder,
             iconName: item.trigger.iconName,
             iconSvg: item.trigger.iconSvg,
             badge: item.badge,
-        })), onItemClick: onItemClick, ariaLabel: ariaLabel, variant: "icon", customTriggerBuilder: customTriggerBuilder, expandToViewport: true }));
+        })), className: testutilStyles['overflow-menu'], onItemClick: onItemClick, ariaLabel: ariaLabel, variant: "icon", customTriggerBuilder: customTriggerBuilder, expandToViewport: true }));
 }
 //# sourceMappingURL=overflow-menu.js.map

package/lib/internal/template/app-layout/drawer/overflow-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"overflow-menu.js","sourceRoot":"","sources":["../../../../src/app-layout/drawer/overflow-menu.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,sBAAsB,MAAM,gCAAgC,CAAC;AAYpE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,SAAS,EAAqB;IAC7G,OAAO,CACL,oBAAC,sBAAsB,IACrB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACxB,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,UAAU;YAChC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ;YAC/B,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;YAC7B,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC,EACH,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,oBAAoB,EAAE,oBAAoB,EAC1C,gBAAgB,EAAE,IAAI,GACtB,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport InternalButtonDropdown from '../../button-dropdown/internal';\nimport { ButtonDropdownProps, InternalButtonDropdownProps } from '../../button-dropdown/interfaces';\nimport { CancelableEventHandler } from '../../internal/events';\nimport { AppLayoutProps } from '../interfaces';\n\ninterface OverflowMenuProps {\n  items: Array<AppLayoutProps.Drawer>;\n  onItemClick: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  customTriggerBuilder?: InternalButtonDropdownProps['customTriggerBuilder'];\n  ariaLabel?: string;\n}\n\nexport default function OverflowMenu({ items, onItemClick, customTriggerBuilder, ariaLabel }: OverflowMenuProps) {\n  return (\n    <InternalButtonDropdown\n      items={items.map(item => ({\n        id: item.id,\n        text: item.ariaLabels.drawerName,\n        iconName: item.trigger.iconName,\n        iconSvg: item.trigger.iconSvg,\n        badge: item.badge,\n      }))}\n      onItemClick={onItemClick}\n      ariaLabel={ariaLabel}\n      variant=\"icon\"\n      customTriggerBuilder={customTriggerBuilder}\n      expandToViewport={true}\n    />\n  );\n}\n"]}
+{"version":3,"file":"overflow-menu.js","sourceRoot":"","sources":["../../../../src/app-layout/drawer/overflow-menu.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,sBAAsB,MAAM,gCAAgC,CAAC;AAIpE,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAS3D,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,SAAS,EAAqB;IAC7G,OAAO,CACL,oBAAC,sBAAsB,IACrB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACxB,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,UAAU;YAChC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ;YAC/B,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;YAC7B,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC,EACH,SAAS,EAAE,cAAc,CAAC,eAAe,CAAC,EAC1C,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,oBAAoB,EAAE,oBAAoB,EAC1C,gBAAgB,EAAE,IAAI,GACtB,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport InternalButtonDropdown from '../../button-dropdown/internal';\nimport { ButtonDropdownProps, InternalButtonDropdownProps } from '../../button-dropdown/interfaces';\nimport { CancelableEventHandler } from '../../internal/events';\nimport { AppLayoutProps } from '../interfaces';\nimport testutilStyles from '../test-classes/styles.css.js';\n\ninterface OverflowMenuProps {\n  items: Array<AppLayoutProps.Drawer>;\n  onItemClick: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  customTriggerBuilder?: InternalButtonDropdownProps['customTriggerBuilder'];\n  ariaLabel?: string;\n}\n\nexport default function OverflowMenu({ items, onItemClick, customTriggerBuilder, ariaLabel }: OverflowMenuProps) {\n  return (\n    <InternalButtonDropdown\n      items={items.map(item => ({\n        id: item.id,\n        text: item.ariaLabels.drawerName,\n        iconName: item.trigger.iconName,\n        iconSvg: item.trigger.iconSvg,\n        badge: item.badge,\n      }))}\n      className={testutilStyles['overflow-menu']}\n      onItemClick={onItemClick}\n      ariaLabel={ariaLabel}\n      variant=\"icon\"\n      customTriggerBuilder={customTriggerBuilder}\n      expandToViewport={true}\n    />\n  );\n}\n"]}

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

@@ -1,22 +1,23 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1fj9k_1uvk8_5",
-  "navigation": "awsui_navigation_1fj9k_1uvk8_9",
-  "navigation-toggle": "awsui_navigation-toggle_1fj9k_1uvk8_13",
-  "navigation-close": "awsui_navigation-close_1fj9k_1uvk8_17",
-  "content": "awsui_content_1fj9k_1uvk8_21",
-  "notifications": "awsui_notifications_1fj9k_1uvk8_25",
-  "breadcrumbs": "awsui_breadcrumbs_1fj9k_1uvk8_29",
-  "tools": "awsui_tools_1fj9k_1uvk8_33",
-  "tools-close": "awsui_tools-close_1fj9k_1uvk8_37",
-  "tools-toggle": "awsui_tools-toggle_1fj9k_1uvk8_41",
-  "drawer-closed": "awsui_drawer-closed_1fj9k_1uvk8_45",
-  "mobile-bar": "awsui_mobile-bar_1fj9k_1uvk8_49",
-  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_1uvk8_53",
-  "drawers-trigger": "awsui_drawers-trigger_1fj9k_1uvk8_57",
-  "active-drawer": "awsui_active-drawer_1fj9k_1uvk8_61",
-  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_1uvk8_65",
-  "drawers-slider": "awsui_drawers-slider_1fj9k_1uvk8_69"
+  "root": "awsui_root_1fj9k_3pu9z_5",
+  "navigation": "awsui_navigation_1fj9k_3pu9z_9",
+  "navigation-toggle": "awsui_navigation-toggle_1fj9k_3pu9z_13",
+  "navigation-close": "awsui_navigation-close_1fj9k_3pu9z_17",
+  "content": "awsui_content_1fj9k_3pu9z_21",
+  "notifications": "awsui_notifications_1fj9k_3pu9z_25",
+  "breadcrumbs": "awsui_breadcrumbs_1fj9k_3pu9z_29",
+  "tools": "awsui_tools_1fj9k_3pu9z_33",
+  "tools-close": "awsui_tools-close_1fj9k_3pu9z_37",
+  "tools-toggle": "awsui_tools-toggle_1fj9k_3pu9z_41",
+  "drawer-closed": "awsui_drawer-closed_1fj9k_3pu9z_45",
+  "mobile-bar": "awsui_mobile-bar_1fj9k_3pu9z_49",
+  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_3pu9z_53",
+  "drawers-trigger": "awsui_drawers-trigger_1fj9k_3pu9z_57",
+  "active-drawer": "awsui_active-drawer_1fj9k_3pu9z_61",
+  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_3pu9z_65",
+  "overflow-menu": "awsui_overflow-menu_1fj9k_3pu9z_69",
+  "drawers-slider": "awsui_drawers-slider_1fj9k_3pu9z_73"
 };
   

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

@@ -2,70 +2,74 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_1fj9k_1uvk8_5:not(#\9) {
+.awsui_root_1fj9k_3pu9z_5:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_navigation_1fj9k_1uvk8_9:not(#\9) {
+.awsui_navigation_1fj9k_3pu9z_9:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_navigation-toggle_1fj9k_1uvk8_13:not(#\9) {
+.awsui_navigation-toggle_1fj9k_3pu9z_13:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_navigation-close_1fj9k_1uvk8_17:not(#\9) {
+.awsui_navigation-close_1fj9k_3pu9z_17:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content_1fj9k_1uvk8_21:not(#\9) {
+.awsui_content_1fj9k_3pu9z_21:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_notifications_1fj9k_1uvk8_25:not(#\9) {
+.awsui_notifications_1fj9k_3pu9z_25:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_breadcrumbs_1fj9k_1uvk8_29:not(#\9) {
+.awsui_breadcrumbs_1fj9k_3pu9z_29:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_tools_1fj9k_1uvk8_33:not(#\9) {
+.awsui_tools_1fj9k_3pu9z_33:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_tools-close_1fj9k_1uvk8_37:not(#\9) {
+.awsui_tools-close_1fj9k_3pu9z_37:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_tools-toggle_1fj9k_1uvk8_41:not(#\9) {
+.awsui_tools-toggle_1fj9k_3pu9z_41:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_drawer-closed_1fj9k_1uvk8_45:not(#\9) {
+.awsui_drawer-closed_1fj9k_3pu9z_45:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_mobile-bar_1fj9k_1uvk8_49:not(#\9) {
+.awsui_mobile-bar_1fj9k_3pu9z_49:not(#\9) {
   /* used in tests */
 }
 
-.awsui_disable-body-scroll-root_1fj9k_1uvk8_53:not(#\9) {
+.awsui_disable-body-scroll-root_1fj9k_3pu9z_53:not(#\9) {
   /* used in tests */
 }
 
-.awsui_drawers-trigger_1fj9k_1uvk8_57:not(#\9) {
+.awsui_drawers-trigger_1fj9k_3pu9z_57:not(#\9) {
   /* used in tests */
 }
 
-.awsui_active-drawer_1fj9k_1uvk8_61:not(#\9) {
+.awsui_active-drawer_1fj9k_3pu9z_61:not(#\9) {
   /* used in tests */
 }
 
-.awsui_active-drawer-close-button_1fj9k_1uvk8_65:not(#\9) {
+.awsui_active-drawer-close-button_1fj9k_3pu9z_65:not(#\9) {
   /* used in tests */
 }
 
-.awsui_drawers-slider_1fj9k_1uvk8_69:not(#\9) {
+.awsui_overflow-menu_1fj9k_3pu9z_69:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_drawers-slider_1fj9k_3pu9z_73:not(#\9) {
   /* used in tests */
 }

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

@@ -2,22 +2,23 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1fj9k_1uvk8_5",
-  "navigation": "awsui_navigation_1fj9k_1uvk8_9",
-  "navigation-toggle": "awsui_navigation-toggle_1fj9k_1uvk8_13",
-  "navigation-close": "awsui_navigation-close_1fj9k_1uvk8_17",
-  "content": "awsui_content_1fj9k_1uvk8_21",
-  "notifications": "awsui_notifications_1fj9k_1uvk8_25",
-  "breadcrumbs": "awsui_breadcrumbs_1fj9k_1uvk8_29",
-  "tools": "awsui_tools_1fj9k_1uvk8_33",
-  "tools-close": "awsui_tools-close_1fj9k_1uvk8_37",
-  "tools-toggle": "awsui_tools-toggle_1fj9k_1uvk8_41",
-  "drawer-closed": "awsui_drawer-closed_1fj9k_1uvk8_45",
-  "mobile-bar": "awsui_mobile-bar_1fj9k_1uvk8_49",
-  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_1uvk8_53",
-  "drawers-trigger": "awsui_drawers-trigger_1fj9k_1uvk8_57",
-  "active-drawer": "awsui_active-drawer_1fj9k_1uvk8_61",
-  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_1uvk8_65",
-  "drawers-slider": "awsui_drawers-slider_1fj9k_1uvk8_69"
+  "root": "awsui_root_1fj9k_3pu9z_5",
+  "navigation": "awsui_navigation_1fj9k_3pu9z_9",
+  "navigation-toggle": "awsui_navigation-toggle_1fj9k_3pu9z_13",
+  "navigation-close": "awsui_navigation-close_1fj9k_3pu9z_17",
+  "content": "awsui_content_1fj9k_3pu9z_21",
+  "notifications": "awsui_notifications_1fj9k_3pu9z_25",
+  "breadcrumbs": "awsui_breadcrumbs_1fj9k_3pu9z_29",
+  "tools": "awsui_tools_1fj9k_3pu9z_33",
+  "tools-close": "awsui_tools-close_1fj9k_3pu9z_37",
+  "tools-toggle": "awsui_tools-toggle_1fj9k_3pu9z_41",
+  "drawer-closed": "awsui_drawer-closed_1fj9k_3pu9z_45",
+  "mobile-bar": "awsui_mobile-bar_1fj9k_3pu9z_49",
+  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_3pu9z_53",
+  "drawers-trigger": "awsui_drawers-trigger_1fj9k_3pu9z_57",
+  "active-drawer": "awsui_active-drawer_1fj9k_3pu9z_61",
+  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_3pu9z_65",
+  "overflow-menu": "awsui_overflow-menu_1fj9k_3pu9z_69",
+  "drawers-slider": "awsui_drawers-slider_1fj9k_3pu9z_73"
 };
   

package/lib/internal/template/button-dropdown/category-elements/styles.css.js

@@ -1,19 +1,19 @@
 
     import './styles.scoped.css';
     export default {
-  "header": "awsui_header_16mm3_c9kjq_99",
-  "disabled": "awsui_disabled_16mm3_c9kjq_116",
-  "expandable-header": "awsui_expandable-header_16mm3_c9kjq_120",
-  "rolled-down": "awsui_rolled-down_16mm3_c9kjq_131",
-  "highlighted": "awsui_highlighted_16mm3_c9kjq_134",
-  "is-focused": "awsui_is-focused_16mm3_c9kjq_152",
-  "variant-navigation": "awsui_variant-navigation_16mm3_c9kjq_156",
-  "category": "awsui_category_16mm3_c9kjq_168",
-  "expandable": "awsui_expandable_16mm3_c9kjq_120",
-  "expand-icon": "awsui_expand-icon_16mm3_c9kjq_190",
-  "expand-icon-up": "awsui_expand-icon-up_16mm3_c9kjq_197",
-  "expand-icon-right": "awsui_expand-icon-right_16mm3_c9kjq_200",
-  "items-list-container": "awsui_items-list-container_16mm3_c9kjq_214",
-  "in-dropdown": "awsui_in-dropdown_16mm3_c9kjq_223"
+  "header": "awsui_header_16mm3_8foeb_99",
+  "disabled": "awsui_disabled_16mm3_8foeb_116",
+  "expandable-header": "awsui_expandable-header_16mm3_8foeb_120",
+  "rolled-down": "awsui_rolled-down_16mm3_8foeb_131",
+  "highlighted": "awsui_highlighted_16mm3_8foeb_134",
+  "is-focused": "awsui_is-focused_16mm3_8foeb_152",
+  "category": "awsui_category_16mm3_8foeb_157",
+  "expandable": "awsui_expandable_16mm3_8foeb_120",
+  "variant-navigation": "awsui_variant-navigation_16mm3_8foeb_172",
+  "expand-icon": "awsui_expand-icon_16mm3_8foeb_179",
+  "expand-icon-up": "awsui_expand-icon-up_16mm3_8foeb_186",
+  "expand-icon-right": "awsui_expand-icon-right_16mm3_8foeb_189",
+  "items-list-container": "awsui_items-list-container_16mm3_8foeb_203",
+  "in-dropdown": "awsui_in-dropdown_16mm3_8foeb_212"
 };
   

package/lib/internal/template/button-dropdown/category-elements/styles.scoped.css

@@ -96,7 +96,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_header_16mm3_c9kjq_99:not(#\9) {
+.awsui_header_16mm3_8foeb_99:not(#\9) {
   position: relative;
   margin-block: 0;
   margin-inline: 0;
@@ -113,25 +113,25 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-inline: calc(var(--space-button-horizontal-lcftji, 20px) + var(--border-item-width-0zxiwv, 1px));
   z-index: 1;
 }
-.awsui_header_16mm3_c9kjq_99.awsui_disabled_16mm3_c9kjq_116:not(#\9) {
+.awsui_header_16mm3_8foeb_99.awsui_disabled_16mm3_8foeb_116:not(#\9) {
   color: var(--color-text-dropdown-item-disabled-nf1b1j, #aab7b8);
   cursor: default;
 }
-.awsui_header_16mm3_c9kjq_99.awsui_expandable-header_16mm3_c9kjq_120:not(#\9) {
+.awsui_header_16mm3_8foeb_99.awsui_expandable-header_16mm3_8foeb_120:not(#\9) {
   border-block-start-color: var(--color-border-dropdown-group-mkqzrv, #eaeded);
   border-block-end-color: var(--color-border-dropdown-group-mkqzrv, #eaeded);
   cursor: pointer;
 }
-.awsui_header_16mm3_c9kjq_99.awsui_expandable-header_16mm3_c9kjq_120.awsui_disabled_16mm3_c9kjq_116:not(#\9) {
+.awsui_header_16mm3_8foeb_99.awsui_expandable-header_16mm3_8foeb_120.awsui_disabled_16mm3_8foeb_116:not(#\9) {
   cursor: default;
 }
-.awsui_header_16mm3_c9kjq_99.awsui_expandable-header_16mm3_c9kjq_120:not(#\9):focus {
+.awsui_header_16mm3_8foeb_99.awsui_expandable-header_16mm3_8foeb_120:not(#\9):focus {
   outline: none;
 }
-.awsui_header_16mm3_c9kjq_99.awsui_expandable-header_16mm3_c9kjq_120.awsui_rolled-down_16mm3_c9kjq_131:not(#\9) {
+.awsui_header_16mm3_8foeb_99.awsui_expandable-header_16mm3_8foeb_120.awsui_rolled-down_16mm3_8foeb_131:not(#\9) {
   border-block-end-color: transparent;
 }
-.awsui_header_16mm3_c9kjq_99.awsui_expandable-header_16mm3_c9kjq_120.awsui_highlighted_16mm3_c9kjq_134:not(#\9) {
+.awsui_header_16mm3_8foeb_99.awsui_expandable-header_16mm3_8foeb_120.awsui_highlighted_16mm3_8foeb_134:not(#\9) {
   background-color: var(--color-background-dropdown-item-hover-i8ac7r, #f2f3f3);
   color: var(--color-text-dropdown-item-highlighted-ek38zi, #16191f);
   padding-block: var(--space-xxs-9rrxti, 4px);
@@ -144,74 +144,63 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-item-jsz3j8, 0px);
   z-index: 2;
 }
-.awsui_header_16mm3_c9kjq_99.awsui_expandable-header_16mm3_c9kjq_120.awsui_highlighted_16mm3_c9kjq_134.awsui_disabled_16mm3_c9kjq_116:not(#\9) {
+.awsui_header_16mm3_8foeb_99.awsui_expandable-header_16mm3_8foeb_120.awsui_highlighted_16mm3_8foeb_134.awsui_disabled_16mm3_8foeb_116:not(#\9) {
   background-color: var(--color-background-dropdown-item-dimmed-e83q5u, transparent);
   border-color: var(--color-border-dropdown-item-dimmed-hover-ydzhss, #879596);
   color: var(--color-text-dropdown-item-dimmed-oru6hf, #aab7b8);
 }
-.awsui_header_16mm3_c9kjq_99.awsui_expandable-header_16mm3_c9kjq_120.awsui_highlighted_16mm3_c9kjq_134.awsui_is-focused_16mm3_c9kjq_152:not(#\9) {
+.awsui_header_16mm3_8foeb_99.awsui_expandable-header_16mm3_8foeb_120.awsui_highlighted_16mm3_8foeb_134.awsui_is-focused_16mm3_8foeb_152:not(#\9) {
   border-color: var(--color-border-dropdown-item-focused-3o10kx, #0073bb);
   box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-0k725q, 1px) var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_header_16mm3_c9kjq_99.awsui_expandable-header_16mm3_c9kjq_120.awsui_variant-navigation_16mm3_c9kjq_156:not(#\9) {
-  padding-block-start: var(--space-xs-xf5ch3, 8px);
-  padding-block-end: var(--space-xs-xf5ch3, 8px);
-}
-.awsui_header_16mm3_c9kjq_99.awsui_expandable-header_16mm3_c9kjq_120.awsui_variant-navigation_16mm3_c9kjq_156.awsui_highlighted_16mm3_c9kjq_134:not(#\9) {
-  border-color: transparent;
-  border-block-start-color: var(--color-border-dropdown-group-mkqzrv, #eaeded);
-  border-block-end-color: var(--color-border-dropdown-group-mkqzrv, #eaeded);
-  background-color: transparent;
-  color: var(--color-text-accent-yy9054, #0073bb);
-}
 
-.awsui_category_16mm3_c9kjq_168:not(#\9) {
+.awsui_category_16mm3_8foeb_157:not(#\9) {
   list-style: none;
   margin-block-start: calc(-1 * var(--border-divider-list-width-471u6a, 1px));
   padding-block: 0;
   padding-inline: 0;
 }
-.awsui_category_16mm3_c9kjq_168:not(#\9):first-child {
+.awsui_category_16mm3_8foeb_157:not(#\9):first-child {
   margin-block-start: 0;
 }
-.awsui_category_16mm3_c9kjq_168.awsui_expandable_16mm3_c9kjq_120:not(#\9) {
+.awsui_category_16mm3_8foeb_157.awsui_expandable_16mm3_8foeb_120:not(#\9) {
   border-block-start: 0;
 }
-.awsui_category_16mm3_c9kjq_168:not(#\9):last-child {
+.awsui_category_16mm3_8foeb_157:not(#\9):last-child {
   border-block-end: none;
 }
-.awsui_category_16mm3_c9kjq_168.awsui_variant-navigation_16mm3_c9kjq_156:not(#\9) {
+.awsui_category_16mm3_8foeb_157.awsui_variant-navigation_16mm3_8foeb_172:not(#\9) {
   padding-block-start: var(--space-xxs-9rrxti, 4px);
 }
-.awsui_category_16mm3_c9kjq_168.awsui_variant-navigation_16mm3_c9kjq_156.awsui_expandable_16mm3_c9kjq_120:not(#\9) {
+.awsui_category_16mm3_8foeb_157.awsui_variant-navigation_16mm3_8foeb_172.awsui_expandable_16mm3_8foeb_120:not(#\9) {
   padding-block-start: 0;
 }
 
-.awsui_expand-icon_16mm3_c9kjq_190:not(#\9) {
+.awsui_expand-icon_16mm3_8foeb_179:not(#\9) {
   position: relative;
   inset-inline-start: var(--space-s-2025hl, 12px);
   inline-size: var(--space-m-kpg8id, 16px);
   display: inline-block;
   transition: transform var(--motion-duration-rotate-180-6z1h8e, 135ms) var(--motion-easing-rotate-180-l3wboa, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
-.awsui_expand-icon-up_16mm3_c9kjq_197:not(#\9) {
+.awsui_expand-icon-up_16mm3_8foeb_186:not(#\9) {
   transform: rotate(-180deg);
 }
-.awsui_expand-icon-right_16mm3_c9kjq_200:not(#\9) {
+.awsui_expand-icon-right_16mm3_8foeb_189:not(#\9) {
   transform: rotate(-90deg);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_expand-icon_16mm3_c9kjq_190:not(#\9) {
+  .awsui_expand-icon_16mm3_8foeb_179:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_expand-icon_16mm3_c9kjq_190:not(#\9), .awsui-mode-entering .awsui_expand-icon_16mm3_c9kjq_190:not(#\9) {
+.awsui-motion-disabled .awsui_expand-icon_16mm3_8foeb_179:not(#\9), .awsui-mode-entering .awsui_expand-icon_16mm3_8foeb_179:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_items-list-container_16mm3_c9kjq_214:not(#\9) {
+.awsui_items-list-container_16mm3_8foeb_203:not(#\9) {
   padding-block: 0;
   padding-inline: 0;
   margin-block-start: -1px;
@@ -220,6 +209,6 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overflow-y: auto;
 }
 
-.awsui_in-dropdown_16mm3_c9kjq_223:not(#\9) {
+.awsui_in-dropdown_16mm3_8foeb_212:not(#\9) {
   margin-block-end: -1px;
 }

package/lib/internal/template/button-dropdown/category-elements/styles.selectors.js

@@ -2,19 +2,19 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "header": "awsui_header_16mm3_c9kjq_99",
-  "disabled": "awsui_disabled_16mm3_c9kjq_116",
-  "expandable-header": "awsui_expandable-header_16mm3_c9kjq_120",
-  "rolled-down": "awsui_rolled-down_16mm3_c9kjq_131",
-  "highlighted": "awsui_highlighted_16mm3_c9kjq_134",
-  "is-focused": "awsui_is-focused_16mm3_c9kjq_152",
-  "variant-navigation": "awsui_variant-navigation_16mm3_c9kjq_156",
-  "category": "awsui_category_16mm3_c9kjq_168",
-  "expandable": "awsui_expandable_16mm3_c9kjq_120",
-  "expand-icon": "awsui_expand-icon_16mm3_c9kjq_190",
-  "expand-icon-up": "awsui_expand-icon-up_16mm3_c9kjq_197",
-  "expand-icon-right": "awsui_expand-icon-right_16mm3_c9kjq_200",
-  "items-list-container": "awsui_items-list-container_16mm3_c9kjq_214",
-  "in-dropdown": "awsui_in-dropdown_16mm3_c9kjq_223"
+  "header": "awsui_header_16mm3_8foeb_99",
+  "disabled": "awsui_disabled_16mm3_8foeb_116",
+  "expandable-header": "awsui_expandable-header_16mm3_8foeb_120",
+  "rolled-down": "awsui_rolled-down_16mm3_8foeb_131",
+  "highlighted": "awsui_highlighted_16mm3_8foeb_134",
+  "is-focused": "awsui_is-focused_16mm3_8foeb_152",
+  "category": "awsui_category_16mm3_8foeb_157",
+  "expandable": "awsui_expandable_16mm3_8foeb_120",
+  "variant-navigation": "awsui_variant-navigation_16mm3_8foeb_172",
+  "expand-icon": "awsui_expand-icon_16mm3_8foeb_179",
+  "expand-icon-up": "awsui_expand-icon-up_16mm3_8foeb_186",
+  "expand-icon-right": "awsui_expand-icon-right_16mm3_8foeb_189",
+  "items-list-container": "awsui_items-list-container_16mm3_8foeb_203",
+  "in-dropdown": "awsui_in-dropdown_16mm3_8foeb_212"
 };