@cloudscape-design/components-themeable 3.0.1328 → 3.0.1330

package/lib/internal/template/popover/styles.selectors.js

@@ -2,63 +2,63 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "arrow": "awsui_arrow_xjuzf_1cnox_153",
-  "arrow-outer": "awsui_arrow-outer_xjuzf_1cnox_157",
-  "arrow-inner": "awsui_arrow-inner_xjuzf_1cnox_157",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_1cnox_199",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_1cnox_199",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_1cnox_202",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_1cnox_202",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_1cnox_205",
-  "arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_1cnox_205",
-  "arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_1cnox_205",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_1cnox_205",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_1cnox_208",
-  "arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_1cnox_208",
-  "arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_1cnox_208",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_1cnox_208",
-  "arrow-variant-info": "awsui_arrow-variant-info_xjuzf_1cnox_212",
-  "body": "awsui_body_xjuzf_1cnox_227",
-  "body-overflow-visible": "awsui_body-overflow-visible_xjuzf_1cnox_263",
-  "body-variant-chart": "awsui_body-variant-chart_xjuzf_1cnox_266",
-  "has-dismiss": "awsui_has-dismiss_xjuzf_1cnox_271",
-  "dismiss": "awsui_dismiss_xjuzf_1cnox_276",
-  "dismiss-control": "awsui_dismiss-control_xjuzf_1cnox_284",
-  "header-row": "awsui_header-row_xjuzf_1cnox_288",
-  "header": "awsui_header_xjuzf_1cnox_288",
-  "content": "awsui_content_xjuzf_1cnox_317",
-  "content-overflow-visible": "awsui_content-overflow-visible_xjuzf_1cnox_326",
-  "container": "awsui_container_xjuzf_1cnox_338",
-  "container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_1cnox_349",
-  "container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_1cnox_349",
-  "container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_1cnox_349",
-  "container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_1cnox_354",
-  "container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_1cnox_354",
-  "container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_1cnox_354",
-  "container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_1cnox_359",
-  "container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_1cnox_359",
-  "container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_1cnox_364",
-  "container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_1cnox_364",
-  "container-body": "awsui_container-body_xjuzf_1cnox_370",
-  "container-body-variant-annotation": "awsui_container-body-variant-annotation_xjuzf_1cnox_410",
-  "container-body-size-small": "awsui_container-body-size-small_xjuzf_1cnox_415",
-  "fixed-width": "awsui_fixed-width_xjuzf_1cnox_418",
-  "container-body-size-medium": "awsui_container-body-size-medium_xjuzf_1cnox_422",
-  "container-body-size-large": "awsui_container-body-size-large_xjuzf_1cnox_429",
-  "container-arrow": "awsui_container-arrow_xjuzf_1cnox_349",
-  "container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_1cnox_479",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_1cnox_1",
-  "refresh": "awsui_refresh_xjuzf_1cnox_537",
-  "root": "awsui_root_xjuzf_1cnox_559",
-  "no-wrap": "awsui_no-wrap_xjuzf_1cnox_591",
-  "trigger-type-text-inline": "awsui_trigger-type-text-inline_xjuzf_1cnox_594",
-  "overflow-ellipsis": "awsui_overflow-ellipsis_xjuzf_1cnox_594",
-  "trigger-type-text": "awsui_trigger-type-text_xjuzf_1cnox_594",
-  "root-filtering-token": "awsui_root-filtering-token_xjuzf_1cnox_616",
-  "trigger": "awsui_trigger_xjuzf_1cnox_594",
-  "in-inline-token": "awsui_in-inline-token_xjuzf_1cnox_658",
-  "trigger-type-filtering-token": "awsui_trigger-type-filtering-token_xjuzf_1cnox_706",
-  "popover-inline-content": "awsui_popover-inline-content_xjuzf_1cnox_710",
-  "hover-area": "awsui_hover-area_xjuzf_1cnox_714"
+  "arrow": "awsui_arrow_xjuzf_1tcee_153",
+  "arrow-outer": "awsui_arrow-outer_xjuzf_1tcee_157",
+  "arrow-inner": "awsui_arrow-inner_xjuzf_1tcee_157",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_1tcee_199",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_1tcee_199",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_1tcee_202",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_1tcee_202",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_1tcee_205",
+  "arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_1tcee_205",
+  "arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_1tcee_205",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_1tcee_205",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_1tcee_208",
+  "arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_1tcee_208",
+  "arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_1tcee_208",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_1tcee_208",
+  "arrow-variant-info": "awsui_arrow-variant-info_xjuzf_1tcee_212",
+  "body": "awsui_body_xjuzf_1tcee_227",
+  "body-overflow-visible": "awsui_body-overflow-visible_xjuzf_1tcee_263",
+  "body-variant-chart": "awsui_body-variant-chart_xjuzf_1tcee_266",
+  "has-dismiss": "awsui_has-dismiss_xjuzf_1tcee_271",
+  "dismiss": "awsui_dismiss_xjuzf_1tcee_276",
+  "dismiss-control": "awsui_dismiss-control_xjuzf_1tcee_284",
+  "header-row": "awsui_header-row_xjuzf_1tcee_288",
+  "header": "awsui_header_xjuzf_1tcee_288",
+  "content": "awsui_content_xjuzf_1tcee_317",
+  "content-overflow-visible": "awsui_content-overflow-visible_xjuzf_1tcee_326",
+  "container": "awsui_container_xjuzf_1tcee_338",
+  "container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_1tcee_349",
+  "container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_1tcee_349",
+  "container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_1tcee_349",
+  "container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_1tcee_354",
+  "container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_1tcee_354",
+  "container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_1tcee_354",
+  "container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_1tcee_359",
+  "container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_1tcee_359",
+  "container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_1tcee_364",
+  "container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_1tcee_364",
+  "container-body": "awsui_container-body_xjuzf_1tcee_370",
+  "container-body-variant-annotation": "awsui_container-body-variant-annotation_xjuzf_1tcee_410",
+  "container-body-size-small": "awsui_container-body-size-small_xjuzf_1tcee_415",
+  "fixed-width": "awsui_fixed-width_xjuzf_1tcee_418",
+  "container-body-size-medium": "awsui_container-body-size-medium_xjuzf_1tcee_422",
+  "container-body-size-large": "awsui_container-body-size-large_xjuzf_1tcee_429",
+  "container-arrow": "awsui_container-arrow_xjuzf_1tcee_349",
+  "container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_1tcee_479",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_1tcee_1",
+  "refresh": "awsui_refresh_xjuzf_1tcee_537",
+  "root": "awsui_root_xjuzf_1tcee_559",
+  "no-wrap": "awsui_no-wrap_xjuzf_1tcee_591",
+  "trigger-type-text-inline": "awsui_trigger-type-text-inline_xjuzf_1tcee_594",
+  "overflow-ellipsis": "awsui_overflow-ellipsis_xjuzf_1tcee_594",
+  "trigger-type-text": "awsui_trigger-type-text_xjuzf_1tcee_594",
+  "root-filtering-token": "awsui_root-filtering-token_xjuzf_1tcee_616",
+  "trigger": "awsui_trigger_xjuzf_1tcee_594",
+  "in-inline-token": "awsui_in-inline-token_xjuzf_1tcee_658",
+  "trigger-type-filtering-token": "awsui_trigger-type-filtering-token_xjuzf_1tcee_706",
+  "popover-inline-content": "awsui_popover-inline-content_xjuzf_1tcee_710",
+  "hover-area": "awsui_hover-area_xjuzf_1tcee_714"
 };
   

package/lib/internal/template/progress-bar/styles.css.js

@@ -1,23 +1,23 @@
 
     import './styles.scoped.css';
     export default {
-  "progress": "awsui_progress_11huc_38flh_189",
-  "result-state": "awsui_result-state_11huc_38flh_203",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_38flh_1",
-  "root": "awsui_root_11huc_38flh_225",
-  "with-result-button": "awsui_with-result-button_11huc_38flh_257",
-  "result-text": "awsui_result-text_11huc_38flh_261",
-  "result-container-error": "awsui_result-container-error_11huc_38flh_265",
-  "result-container-success": "awsui_result-container-success_11huc_38flh_265",
-  "result-button": "awsui_result-button_11huc_38flh_269",
-  "word-wrap": "awsui_word-wrap_11huc_38flh_275",
-  "label-flash": "awsui_label-flash_11huc_38flh_280",
-  "label-key-value": "awsui_label-key-value_11huc_38flh_284",
-  "flash": "awsui_flash_11huc_38flh_292",
-  "progress-container": "awsui_progress-container_11huc_38flh_296",
-  "percentage-container": "awsui_percentage-container_11huc_38flh_303",
-  "percentage": "awsui_percentage_11huc_38flh_303",
-  "complete": "awsui_complete_11huc_38flh_349",
-  "additional-info": "awsui_additional-info_11huc_38flh_363"
+  "progress": "awsui_progress_11huc_15aqv_189",
+  "result-state": "awsui_result-state_11huc_15aqv_203",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_15aqv_1",
+  "root": "awsui_root_11huc_15aqv_225",
+  "with-result-button": "awsui_with-result-button_11huc_15aqv_257",
+  "result-text": "awsui_result-text_11huc_15aqv_261",
+  "result-container-error": "awsui_result-container-error_11huc_15aqv_265",
+  "result-container-success": "awsui_result-container-success_11huc_15aqv_265",
+  "result-button": "awsui_result-button_11huc_15aqv_269",
+  "word-wrap": "awsui_word-wrap_11huc_15aqv_275",
+  "label-flash": "awsui_label-flash_11huc_15aqv_280",
+  "label-key-value": "awsui_label-key-value_11huc_15aqv_284",
+  "flash": "awsui_flash_11huc_15aqv_292",
+  "progress-container": "awsui_progress-container_11huc_15aqv_296",
+  "percentage-container": "awsui_percentage-container_11huc_15aqv_303",
+  "percentage": "awsui_percentage_11huc_15aqv_303",
+  "complete": "awsui_complete_11huc_15aqv_349",
+  "additional-info": "awsui_additional-info_11huc_15aqv_363"
 };
   

package/lib/internal/template/progress-bar/styles.scoped.css

@@ -186,27 +186,27 @@ 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_progress_11huc_38flh_189:not(#\9)::-webkit-progress-value {
+.awsui_progress_11huc_15aqv_189:not(#\9)::-webkit-progress-value {
   -webkit-transition: width var(--motion-duration-moderate-24bai8, 135ms) linear;
   transition: width var(--motion-duration-moderate-24bai8, 135ms) linear;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_progress_11huc_38flh_189:not(#\9)::-webkit-progress-value {
+  .awsui_progress_11huc_15aqv_189:not(#\9)::-webkit-progress-value {
     animation: none;
     -webkit-transition: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_progress_11huc_38flh_189:not(#\9)::-webkit-progress-value, .awsui-mode-entering .awsui_progress_11huc_38flh_189:not(#\9)::-webkit-progress-value {
+.awsui-motion-disabled .awsui_progress_11huc_15aqv_189:not(#\9)::-webkit-progress-value, .awsui-mode-entering .awsui_progress_11huc_15aqv_189:not(#\9)::-webkit-progress-value {
   animation: none;
   -webkit-transition: none;
   transition: none;
 }
 
-.awsui_result-state_11huc_38flh_203:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_11huc_38flh_1 var(--motion-duration-transition-show-paced-0w35xp, 180ms) var(--motion-easing-transition-show-paced-ufdgkj, ease-out);
+.awsui_result-state_11huc_15aqv_203:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_11huc_15aqv_1 var(--motion-duration-transition-show-paced-0w35xp, 180ms) var(--motion-easing-transition-show-paced-ufdgkj, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_11huc_38flh_1 {
+@keyframes awsui_awsui-motion-fade-in_11huc_15aqv_1 {
   from {
     opacity: 0.2;
   }
@@ -215,17 +215,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_result-state_11huc_38flh_203:not(#\9) {
+  .awsui_result-state_11huc_15aqv_203:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_result-state_11huc_38flh_203:not(#\9), .awsui-mode-entering .awsui_result-state_11huc_38flh_203:not(#\9) {
+.awsui-motion-disabled .awsui_result-state_11huc_15aqv_203:not(#\9), .awsui-mode-entering .awsui_result-state_11huc_15aqv_203:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_11huc_38flh_225:not(#\9) {
+.awsui_root_11huc_15aqv_225:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -257,34 +257,34 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
 }
 
-.awsui_with-result-button_11huc_38flh_257:not(#\9) {
+.awsui_with-result-button_11huc_15aqv_257:not(#\9) {
   padding-inline-end: var(--space-m-n2lypl, 16px);
 }
 
-.awsui_result-text_11huc_38flh_261:not(#\9) {
+.awsui_result-text_11huc_15aqv_261:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_result-container-error_11huc_38flh_265:not(#\9), .awsui_result-container-success_11huc_38flh_265:not(#\9) {
+.awsui_result-container-error_11huc_15aqv_265:not(#\9), .awsui_result-container-success_11huc_15aqv_265:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_result-button_11huc_38flh_269:not(#\9) {
+.awsui_result-button_11huc_15aqv_269:not(#\9) {
   display: inline-block;
   margin-block: var(--space-scaled-xxs-jatbiv, 4px);
   margin-inline: 0;
 }
 
-.awsui_word-wrap_11huc_38flh_275:not(#\9) {
+.awsui_word-wrap_11huc_15aqv_275:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
 }
 
-.awsui_label-flash_11huc_38flh_280:not(#\9) {
+.awsui_label-flash_11huc_15aqv_280:not(#\9) {
   color: inherit;
   font-weight: var(--font-weight-bold-p16d06, 700);
 }
-.awsui_label-key-value_11huc_38flh_284:not(#\9) {
+.awsui_label-key-value_11huc_15aqv_284:not(#\9) {
   font-size: var(--font-size-body-m-vv54cm, 14px);
   line-height: var(--line-height-body-m-bedeoh, 22px);
   font-weight: var(--font-display-label-weight-ise9n2, 400);
@@ -292,18 +292,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-end: var(--space-scaled-xxxs-prgw5k, 2px);
 }
 
-.awsui_flash_11huc_38flh_292:not(#\9) {
+.awsui_flash_11huc_15aqv_292:not(#\9) {
   color: inherit;
 }
 
-.awsui_progress-container_11huc_38flh_296:not(#\9) {
+.awsui_progress-container_11huc_15aqv_296:not(#\9) {
   display: flex;
   align-items: center;
   max-inline-size: 800px;
   block-size: var(--line-height-body-m-bedeoh, 22px);
 }
 
-.awsui_percentage-container_11huc_38flh_303:not(#\9) {
+.awsui_percentage-container_11huc_15aqv_303:not(#\9) {
   inline-size: 33px;
   flex-shrink: 0;
   white-space: nowrap;
@@ -313,56 +313,56 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   letter-spacing: var(--letter-spacing-body-s-egrcsd, normal);
 }
 
-.awsui_percentage_11huc_38flh_303:not(#\9) {
+.awsui_percentage_11huc_15aqv_303:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_progress_11huc_38flh_189:not(#\9) {
+.awsui_progress_11huc_15aqv_189:not(#\9) {
   inline-size: 100%;
   margin-inline-end: var(--space-s-4a5hs8, 12px);
   min-inline-size: 0;
-  block-size: var(--awsui-progress-bar-height-6b9ypa, 4px);
+  block-size: var(--awsui-progress-bar-height-z17rmd, 4px);
   border-block: 0;
   border-inline: none;
   box-sizing: border-box;
-  border-start-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-start-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-end-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-end-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  background-color: var(--awsui-progress-bar-background-color-6b9ypa, var(--color-background-progress-bar-default-kw9ow4, #eaeded));
+  border-start-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-start-end-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-end-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-end-end-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  background-color: var(--awsui-progress-bar-background-color-z17rmd, var(--color-background-progress-bar-default-kw9ow4, #eaeded));
 }
-.awsui_progress_11huc_38flh_189:not(#\9)::-webkit-progress-bar {
-  block-size: var(--awsui-progress-bar-height-6b9ypa, 4px);
+.awsui_progress_11huc_15aqv_189:not(#\9)::-webkit-progress-bar {
+  block-size: var(--awsui-progress-bar-height-z17rmd, 4px);
   border-block: 0;
   border-inline: none;
   box-sizing: border-box;
-  border-start-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-start-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-end-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-end-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  background-color: var(--awsui-progress-bar-background-color-6b9ypa, var(--color-background-progress-bar-default-kw9ow4, #eaeded));
+  border-start-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-start-end-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-end-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-end-end-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  background-color: var(--awsui-progress-bar-background-color-z17rmd, var(--color-background-progress-bar-default-kw9ow4, #eaeded));
 }
-.awsui_progress_11huc_38flh_189:not(#\9)::-webkit-progress-value {
-  border-start-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+.awsui_progress_11huc_15aqv_189:not(#\9)::-webkit-progress-value {
+  border-start-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
   border-start-end-radius: 0;
-  border-end-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  border-end-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
   border-end-end-radius: 0;
-  background-color: var(--awsui-progress-value-background-color-6b9ypa, var(--color-background-progress-bar-value-default-1bekh3, #0073bb));
+  background-color: var(--awsui-progress-value-background-color-z17rmd, var(--color-background-progress-bar-value-default-1bekh3, #0073bb));
 }
-.awsui_progress_11huc_38flh_189.awsui_complete_11huc_38flh_349:not(#\9)::-webkit-progress-value {
-  border-start-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-start-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-end-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-end-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+.awsui_progress_11huc_15aqv_189.awsui_complete_11huc_15aqv_349:not(#\9)::-webkit-progress-value {
+  border-start-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-start-end-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-end-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-end-end-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
 }
-.awsui_progress_11huc_38flh_189:not(#\9)::-moz-progress-bar {
-  border-start-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+.awsui_progress_11huc_15aqv_189:not(#\9)::-moz-progress-bar {
+  border-start-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
   border-start-end-radius: 0;
-  border-end-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  border-end-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
   border-end-end-radius: 0;
-  background-color: var(--awsui-progress-value-background-color-6b9ypa, var(--color-background-progress-bar-value-default-1bekh3, #0073bb));
+  background-color: var(--awsui-progress-value-background-color-z17rmd, var(--color-background-progress-bar-value-default-1bekh3, #0073bb));
 }
 
-.awsui_additional-info_11huc_38flh_363:not(#\9) {
+.awsui_additional-info_11huc_15aqv_363:not(#\9) {
   /* used in test-utils */
 }

package/lib/internal/template/progress-bar/styles.selectors.js

@@ -2,23 +2,23 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "progress": "awsui_progress_11huc_38flh_189",
-  "result-state": "awsui_result-state_11huc_38flh_203",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_38flh_1",
-  "root": "awsui_root_11huc_38flh_225",
-  "with-result-button": "awsui_with-result-button_11huc_38flh_257",
-  "result-text": "awsui_result-text_11huc_38flh_261",
-  "result-container-error": "awsui_result-container-error_11huc_38flh_265",
-  "result-container-success": "awsui_result-container-success_11huc_38flh_265",
-  "result-button": "awsui_result-button_11huc_38flh_269",
-  "word-wrap": "awsui_word-wrap_11huc_38flh_275",
-  "label-flash": "awsui_label-flash_11huc_38flh_280",
-  "label-key-value": "awsui_label-key-value_11huc_38flh_284",
-  "flash": "awsui_flash_11huc_38flh_292",
-  "progress-container": "awsui_progress-container_11huc_38flh_296",
-  "percentage-container": "awsui_percentage-container_11huc_38flh_303",
-  "percentage": "awsui_percentage_11huc_38flh_303",
-  "complete": "awsui_complete_11huc_38flh_349",
-  "additional-info": "awsui_additional-info_11huc_38flh_363"
+  "progress": "awsui_progress_11huc_15aqv_189",
+  "result-state": "awsui_result-state_11huc_15aqv_203",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_15aqv_1",
+  "root": "awsui_root_11huc_15aqv_225",
+  "with-result-button": "awsui_with-result-button_11huc_15aqv_257",
+  "result-text": "awsui_result-text_11huc_15aqv_261",
+  "result-container-error": "awsui_result-container-error_11huc_15aqv_265",
+  "result-container-success": "awsui_result-container-success_11huc_15aqv_265",
+  "result-button": "awsui_result-button_11huc_15aqv_269",
+  "word-wrap": "awsui_word-wrap_11huc_15aqv_275",
+  "label-flash": "awsui_label-flash_11huc_15aqv_280",
+  "label-key-value": "awsui_label-key-value_11huc_15aqv_284",
+  "flash": "awsui_flash_11huc_15aqv_292",
+  "progress-container": "awsui_progress-container_11huc_15aqv_296",
+  "percentage-container": "awsui_percentage-container_11huc_15aqv_303",
+  "percentage": "awsui_percentage_11huc_15aqv_303",
+  "complete": "awsui_complete_11huc_15aqv_349",
+  "additional-info": "awsui_additional-info_11huc_15aqv_363"
 };
   

package/lib/internal/template/prompt-input/components/menu-dropdown.d.ts

@@ -15,7 +15,9 @@ interface MenuDropdownProps {
     hasDropdownStatus?: boolean;
     listBottom?: React.ReactNode;
     ariaDescribedby?: string;
+    /** Custom CSS properties applied to the options list root to theme option rows. */
+    optionsListCustomProperties?: React.CSSProperties;
 }
-export default function MenuDropdown({ menu, statusType, menuItemsState, menuItemsHandlers, highlightedOptionId, highlightText, listId, controlId, handleLoadMore, hasDropdownStatus, listBottom, ariaDescribedby, }: MenuDropdownProps): JSX.Element;
+export default function MenuDropdown({ menu, statusType, menuItemsState, menuItemsHandlers, highlightedOptionId, highlightText, listId, controlId, handleLoadMore, hasDropdownStatus, listBottom, ariaDescribedby, optionsListCustomProperties, }: MenuDropdownProps): JSX.Element;
 export {};
 //# sourceMappingURL=menu-dropdown.d.ts.map

package/lib/internal/template/prompt-input/components/menu-dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/prompt-input/components/menu-dropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,4EAA4E;AAC5E,UAAU,iBAAiB;IACzB,IAAI,EAAE,gBAAgB,CAAC,cAAc,CAAC;IACtC,UAAU,EAAE,gBAAgB,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IAC1D,cAAc,EAAE,cAAc,CAAC;IAC/B,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAQD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,MAAM,EACN,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,UAAU,EACV,eAAe,GAChB,EAAE,iBAAiB,eAmDnB"}
+{"version":3,"file":"menu-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/prompt-input/components/menu-dropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,4EAA4E;AAC5E,UAAU,iBAAiB;IACzB,IAAI,EAAE,gBAAgB,CAAC,cAAc,CAAC;IACtC,UAAU,EAAE,gBAAgB,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IAC1D,cAAc,EAAE,cAAc,CAAC;IAC/B,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mFAAmF;IACnF,2BAA2B,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACnD;AAQD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,MAAM,EACN,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,UAAU,EACV,eAAe,EACf,2BAA2B,GAC5B,EAAE,iBAAiB,eAoDnB"}

package/lib/internal/template/prompt-input/components/menu-dropdown.js

@@ -10,7 +10,7 @@ const createMouseEventHandler = (handler) => (itemIndex) => {
         handler(itemIndex);
     }
 };
-export default function MenuDropdown({ menu, statusType, menuItemsState, menuItemsHandlers, highlightedOptionId, highlightText, listId, controlId, handleLoadMore, hasDropdownStatus, listBottom, ariaDescribedby, }) {
+export default function MenuDropdown({ menu, statusType, menuItemsState, menuItemsHandlers, highlightedOptionId, highlightText, listId, controlId, handleLoadMore, hasDropdownStatus, listBottom, ariaDescribedby, optionsListCustomProperties, }) {
     const handleMouseUp = createMouseEventHandler(menuItemsHandlers.selectVisibleOptionWithMouse);
     const handleMouseMove = createMouseEventHandler(menuItemsHandlers.highlightVisibleOptionWithMouse);
     const ListComponent = menu.virtualScroll ? VirtualList : PlainList;
@@ -43,6 +43,7 @@ export default function MenuDropdown({ menu, statusType, menuItemsState, menuIte
                 onMouseMove: handleMouseMove,
                 ariaDescribedby,
                 statusType: statusType !== null && statusType !== void 0 ? statusType : 'finished',
+                customProperties: optionsListCustomProperties,
             }, screenReaderContent: announcement })));
 }
 //# sourceMappingURL=menu-dropdown.js.map

package/lib/internal/template/prompt-input/components/menu-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-dropdown.js","sourceRoot":"","sources":["../../../../src/prompt-input/components/menu-dropdown.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,SAAS,MAAM,8BAA8B,CAAC;AACrD,OAAO,WAAW,MAAM,gCAAgC,CAAC;AACzD,OAAO,kBAA6C,MAAM,4BAA4B,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AAoBtE,MAAM,uBAAuB,GAAG,CAAC,OAAgC,EAAE,EAAE,CAAC,CAAC,SAAiB,EAAE,EAAE;IAC1F,IAAI,SAAS,GAAG,CAAC,CAAC,EAAE,CAAC;QACnB,OAAO,CAAC,SAAS,CAAC,CAAC;IACrB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,MAAM,EACN,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,UAAU,EACV,eAAe,GACG;IAClB,MAAM,aAAa,GAAG,uBAAuB,CAAC,iBAAiB,CAAC,4BAA4B,CAAC,CAAC;IAC9F,MAAM,eAAe,GAAG,uBAAuB,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,CAAC;IAEnG,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;IAEnE,MAAM,YAAY,GAAG,eAAe,CAAC;QACnC,aAAa;QACb,gBAAgB,EAAE,KAAK;QACvB,iBAAiB,EAAE,cAAc,CAAC,iBAAiB;QACnD,SAAS,EAAE,MAAM,CAAC,EAAE,CAAC,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC;KACzD,CAAC,CAAC;IAEH,8DAA8D;IAC9D,oEAAoE;IACpE,uEAAuE;IACvE,oEAAoE;IACpE,sDAAsD;IACtD,MAAM,aAAa,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC1D,MAAM,kBAAkB,GAAG,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/D,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,cAAc,CAAC,KAAK,CAAC,MAAM,KAAK,kBAAkB,CAAC,OAAO,IAAI,YAAY,EAAE,CAAC;YAC/E,MAAA,aAAa,CAAC,OAAO,0CAAE,UAAU,EAAE,CAAC;QACtC,CAAC;QACD,kBAAkB,CAAC,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC;IAC3D,CAAC,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAEhD,OAAO,CACL;QACE,oBAAC,kBAAkB,IAAC,GAAG,EAAE,aAAa,EAAE,OAAO,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,IAChE,YAAY,CACM;QACrB,oBAAC,aAAa,IACZ,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,qBAAqB,EAAE,cAAc,EACrC,aAAa,EAAE,aAAa,EAC5B,oBAAoB,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,EAAE,EAC5E,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE;gBACT,EAAE,EAAE,MAAM;gBACV,cAAc,EAAE,SAAS;gBACzB,SAAS,EAAE,aAAa;gBACxB,WAAW,EAAE,eAAe;gBAC5B,eAAe;gBACf,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,UAAU;aACrC,EACD,mBAAmB,EAAE,YAAY,GACjC,CACD,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useRef } from 'react';\n\nimport PlainList from '../../autosuggest/plain-list';\nimport VirtualList from '../../autosuggest/virtual-list';\nimport InternalLiveRegion, { InternalLiveRegionRef } from '../../live-region/internal';\nimport { useAnnouncement } from '../../select/utils/use-announcement';\nimport { MenuItemsHandlers, MenuItemsState } from '../core/menu-state';\nimport { PromptInputProps } from '../interfaces';\n\n/** Props for the menu options list rendered inside the trigger dropdown. */\ninterface MenuDropdownProps {\n  menu: PromptInputProps.MenuDefinition;\n  statusType: PromptInputProps.MenuDefinition['statusType'];\n  menuItemsState: MenuItemsState;\n  menuItemsHandlers: MenuItemsHandlers;\n  highlightedOptionId?: string;\n  highlightText: string;\n  listId: string;\n  controlId: string;\n  handleLoadMore: () => void;\n  hasDropdownStatus?: boolean;\n  listBottom?: React.ReactNode;\n  ariaDescribedby?: string;\n}\n\nconst createMouseEventHandler = (handler: (index: number) => void) => (itemIndex: number) => {\n  if (itemIndex > -1) {\n    handler(itemIndex);\n  }\n};\n\nexport default function MenuDropdown({\n  menu,\n  statusType,\n  menuItemsState,\n  menuItemsHandlers,\n  highlightedOptionId,\n  highlightText,\n  listId,\n  controlId,\n  handleLoadMore,\n  hasDropdownStatus,\n  listBottom,\n  ariaDescribedby,\n}: MenuDropdownProps) {\n  const handleMouseUp = createMouseEventHandler(menuItemsHandlers.selectVisibleOptionWithMouse);\n  const handleMouseMove = createMouseEventHandler(menuItemsHandlers.highlightVisibleOptionWithMouse);\n\n  const ListComponent = menu.virtualScroll ? VirtualList : PlainList;\n\n  const announcement = useAnnouncement({\n    highlightText,\n    announceSelected: false,\n    highlightedOption: menuItemsState.highlightedOption,\n    getParent: option => menuItemsState.getItemGroup(option),\n  });\n\n  // Force re-announcement when the filtered items list changes.\n  // The screenReaderContent on SelectableItem only works for keyboard\n  // navigation (highlight moving between existing items). When filtering\n  // replaces the entire list, new items mount already highlighted and\n  // the SR doesn't pick up the initial textContent set.\n  const liveRegionRef = useRef<InternalLiveRegionRef>(null);\n  const prevItemsLengthRef = useRef(menuItemsState.items.length);\n  useEffect(() => {\n    if (menuItemsState.items.length !== prevItemsLengthRef.current && announcement) {\n      liveRegionRef.current?.reannounce();\n    }\n    prevItemsLengthRef.current = menuItemsState.items.length;\n  }, [menuItemsState.items.length, announcement]);\n\n  return (\n    <>\n      <InternalLiveRegion ref={liveRegionRef} tagName=\"span\" hidden={true}>\n        {announcement}\n      </InternalLiveRegion>\n      <ListComponent\n        listBottom={listBottom}\n        handleLoadMore={handleLoadMore}\n        autosuggestItemsState={menuItemsState}\n        highlightText={highlightText}\n        highlightedA11yProps={highlightedOptionId ? { id: highlightedOptionId } : {}}\n        hasDropdownStatus={hasDropdownStatus}\n        menuProps={{\n          id: listId,\n          ariaLabelledby: controlId,\n          onMouseUp: handleMouseUp,\n          onMouseMove: handleMouseMove,\n          ariaDescribedby,\n          statusType: statusType ?? 'finished',\n        }}\n        screenReaderContent={announcement}\n      />\n    </>\n  );\n}\n"]}
+{"version":3,"file":"menu-dropdown.js","sourceRoot":"","sources":["../../../../src/prompt-input/components/menu-dropdown.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,SAAS,MAAM,8BAA8B,CAAC;AACrD,OAAO,WAAW,MAAM,gCAAgC,CAAC;AACzD,OAAO,kBAA6C,MAAM,4BAA4B,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AAsBtE,MAAM,uBAAuB,GAAG,CAAC,OAAgC,EAAE,EAAE,CAAC,CAAC,SAAiB,EAAE,EAAE;IAC1F,IAAI,SAAS,GAAG,CAAC,CAAC,EAAE,CAAC;QACnB,OAAO,CAAC,SAAS,CAAC,CAAC;IACrB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,MAAM,EACN,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,UAAU,EACV,eAAe,EACf,2BAA2B,GACT;IAClB,MAAM,aAAa,GAAG,uBAAuB,CAAC,iBAAiB,CAAC,4BAA4B,CAAC,CAAC;IAC9F,MAAM,eAAe,GAAG,uBAAuB,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,CAAC;IAEnG,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;IAEnE,MAAM,YAAY,GAAG,eAAe,CAAC;QACnC,aAAa;QACb,gBAAgB,EAAE,KAAK;QACvB,iBAAiB,EAAE,cAAc,CAAC,iBAAiB;QACnD,SAAS,EAAE,MAAM,CAAC,EAAE,CAAC,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC;KACzD,CAAC,CAAC;IAEH,8DAA8D;IAC9D,oEAAoE;IACpE,uEAAuE;IACvE,oEAAoE;IACpE,sDAAsD;IACtD,MAAM,aAAa,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC1D,MAAM,kBAAkB,GAAG,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/D,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,cAAc,CAAC,KAAK,CAAC,MAAM,KAAK,kBAAkB,CAAC,OAAO,IAAI,YAAY,EAAE,CAAC;YAC/E,MAAA,aAAa,CAAC,OAAO,0CAAE,UAAU,EAAE,CAAC;QACtC,CAAC;QACD,kBAAkB,CAAC,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC;IAC3D,CAAC,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAEhD,OAAO,CACL;QACE,oBAAC,kBAAkB,IAAC,GAAG,EAAE,aAAa,EAAE,OAAO,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,IAChE,YAAY,CACM;QACrB,oBAAC,aAAa,IACZ,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,qBAAqB,EAAE,cAAc,EACrC,aAAa,EAAE,aAAa,EAC5B,oBAAoB,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,EAAE,EAC5E,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE;gBACT,EAAE,EAAE,MAAM;gBACV,cAAc,EAAE,SAAS;gBACzB,SAAS,EAAE,aAAa;gBACxB,WAAW,EAAE,eAAe;gBAC5B,eAAe;gBACf,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,UAAU;gBACpC,gBAAgB,EAAE,2BAA2B;aAC9C,EACD,mBAAmB,EAAE,YAAY,GACjC,CACD,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useRef } from 'react';\n\nimport PlainList from '../../autosuggest/plain-list';\nimport VirtualList from '../../autosuggest/virtual-list';\nimport InternalLiveRegion, { InternalLiveRegionRef } from '../../live-region/internal';\nimport { useAnnouncement } from '../../select/utils/use-announcement';\nimport { MenuItemsHandlers, MenuItemsState } from '../core/menu-state';\nimport { PromptInputProps } from '../interfaces';\n\n/** Props for the menu options list rendered inside the trigger dropdown. */\ninterface MenuDropdownProps {\n  menu: PromptInputProps.MenuDefinition;\n  statusType: PromptInputProps.MenuDefinition['statusType'];\n  menuItemsState: MenuItemsState;\n  menuItemsHandlers: MenuItemsHandlers;\n  highlightedOptionId?: string;\n  highlightText: string;\n  listId: string;\n  controlId: string;\n  handleLoadMore: () => void;\n  hasDropdownStatus?: boolean;\n  listBottom?: React.ReactNode;\n  ariaDescribedby?: string;\n  /** Custom CSS properties applied to the options list root to theme option rows. */\n  optionsListCustomProperties?: React.CSSProperties;\n}\n\nconst createMouseEventHandler = (handler: (index: number) => void) => (itemIndex: number) => {\n  if (itemIndex > -1) {\n    handler(itemIndex);\n  }\n};\n\nexport default function MenuDropdown({\n  menu,\n  statusType,\n  menuItemsState,\n  menuItemsHandlers,\n  highlightedOptionId,\n  highlightText,\n  listId,\n  controlId,\n  handleLoadMore,\n  hasDropdownStatus,\n  listBottom,\n  ariaDescribedby,\n  optionsListCustomProperties,\n}: MenuDropdownProps) {\n  const handleMouseUp = createMouseEventHandler(menuItemsHandlers.selectVisibleOptionWithMouse);\n  const handleMouseMove = createMouseEventHandler(menuItemsHandlers.highlightVisibleOptionWithMouse);\n\n  const ListComponent = menu.virtualScroll ? VirtualList : PlainList;\n\n  const announcement = useAnnouncement({\n    highlightText,\n    announceSelected: false,\n    highlightedOption: menuItemsState.highlightedOption,\n    getParent: option => menuItemsState.getItemGroup(option),\n  });\n\n  // Force re-announcement when the filtered items list changes.\n  // The screenReaderContent on SelectableItem only works for keyboard\n  // navigation (highlight moving between existing items). When filtering\n  // replaces the entire list, new items mount already highlighted and\n  // the SR doesn't pick up the initial textContent set.\n  const liveRegionRef = useRef<InternalLiveRegionRef>(null);\n  const prevItemsLengthRef = useRef(menuItemsState.items.length);\n  useEffect(() => {\n    if (menuItemsState.items.length !== prevItemsLengthRef.current && announcement) {\n      liveRegionRef.current?.reannounce();\n    }\n    prevItemsLengthRef.current = menuItemsState.items.length;\n  }, [menuItemsState.items.length, announcement]);\n\n  return (\n    <>\n      <InternalLiveRegion ref={liveRegionRef} tagName=\"span\" hidden={true}>\n        {announcement}\n      </InternalLiveRegion>\n      <ListComponent\n        listBottom={listBottom}\n        handleLoadMore={handleLoadMore}\n        autosuggestItemsState={menuItemsState}\n        highlightText={highlightText}\n        highlightedA11yProps={highlightedOptionId ? { id: highlightedOptionId } : {}}\n        hasDropdownStatus={hasDropdownStatus}\n        menuProps={{\n          id: listId,\n          ariaLabelledby: controlId,\n          onMouseUp: handleMouseUp,\n          onMouseMove: handleMouseMove,\n          ariaDescribedby,\n          statusType: statusType ?? 'finished',\n          customProperties: optionsListCustomProperties,\n        }}\n        screenReaderContent={announcement}\n      />\n    </>\n  );\n}\n"]}

package/lib/internal/template/prompt-input/components/token-mode.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { DropdownStatusResult } from '../../internal/components/dropdown-status';
 import { MenuItemsHandlers, MenuItemsState } from '../core/menu-state';
 import { PromptInputProps } from '../interfaces';
+import { PromptInputMenuStyle } from '../internal-interfaces';
 /** Props for the token-mode contentEditable input and its associated menu dropdown. */
 interface TokenModeProps {
     /** Ref to the contentEditable div */
@@ -34,7 +35,8 @@ interface TokenModeProps {
     };
     i18nStrings?: PromptInputProps['i18nStrings'];
     maxMenuHeight?: number;
+    menuStyle?: PromptInputMenuStyle;
 }
-export default function TokenMode({ editableElementRef, triggerWrapperRef, controlId, menuListId, menuFooterControlId, highlightedMenuOptionId, name, plainTextValue, menuIsOpen, triggerWrapperReady, shouldRenderMenuDropdown, activeMenu, activeTriggerToken, menuFilterText, menuItemsState, menuItemsHandlers, menuDropdownStatus, maxMenuHeight, handleInput, handleLoadMore, editableElementAttributes, }: TokenModeProps): JSX.Element;
+export default function TokenMode({ editableElementRef, triggerWrapperRef, controlId, menuListId, menuFooterControlId, highlightedMenuOptionId, name, plainTextValue, menuIsOpen, triggerWrapperReady, shouldRenderMenuDropdown, activeMenu, activeTriggerToken, menuFilterText, menuItemsState, menuItemsHandlers, menuDropdownStatus, maxMenuHeight, menuStyle, handleInput, handleLoadMore, editableElementAttributes, }: TokenModeProps): JSX.Element;
 export {};
 //# sourceMappingURL=token-mode.d.ts.map

package/lib/internal/template/prompt-input/components/token-mode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"token-mode.d.ts","sourceRoot":"","sources":["../../../../src/prompt-input/components/token-mode.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAMjD,uFAAuF;AACvF,UAAU,cAAc;IACtB,qCAAqC;IACrC,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACpD,qEAAqE;IACrE,iBAAiB,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,kFAAkF;IAClF,mBAAmB,EAAE,OAAO,CAAC;IAC7B,wBAAwB,EAAE,OAAO,CAAC;IAElC,UAAU,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC;IACnD,kBAAkB,EAAE,gBAAgB,CAAC,YAAY,GAAG,IAAI,CAAC;IACzD,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,kBAAkB,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAEhD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,MAAM,IAAI,CAAC;IAE3B,+FAA+F;IAC/F,yBAAyB,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;QAChE,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B,CAAC;IAEF,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAE9C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAID,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,kBAAkB,EAClB,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,uBAAuB,EACvB,IAAI,EACJ,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,wBAAwB,EACxB,UAAU,EACV,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,cAAc,EACd,yBAAyB,GAC1B,EAAE,cAAc,eAkGhB"}
+{"version":3,"file":"token-mode.d.ts","sourceRoot":"","sources":["../../../../src/prompt-input/components/token-mode.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAO9D,uFAAuF;AACvF,UAAU,cAAc;IACtB,qCAAqC;IACrC,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACpD,qEAAqE;IACrE,iBAAiB,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,kFAAkF;IAClF,mBAAmB,EAAE,OAAO,CAAC;IAC7B,wBAAwB,EAAE,OAAO,CAAC;IAElC,UAAU,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC;IACnD,kBAAkB,EAAE,gBAAgB,CAAC,YAAY,GAAG,IAAI,CAAC;IACzD,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,kBAAkB,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAEhD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,MAAM,IAAI,CAAC;IAE3B,+FAA+F;IAC/F,yBAAyB,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;QAChE,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B,CAAC;IAEF,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAE9C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAID,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,kBAAkB,EAClB,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,uBAAuB,EACvB,IAAI,EACJ,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,wBAAwB,EACxB,UAAU,EACV,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,SAAS,EACT,WAAW,EACX,cAAc,EACd,yBAAyB,GAC1B,EAAE,cAAc,eAgHhB"}

package/lib/internal/template/prompt-input/components/token-mode.js

@@ -4,11 +4,12 @@ import React from 'react';
 import clsx from 'clsx';
 import Dropdown from '../../dropdown/internal';
 import DropdownFooter from '../../internal/components/dropdown-footer';
+import { getMenuOptionsListStyles } from '../styles';
 import MenuDropdown from './menu-dropdown';
 import styles from '../styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
 const MENU_MIN_WIDTH = 300;
-export default function TokenMode({ editableElementRef, triggerWrapperRef, controlId, menuListId, menuFooterControlId, highlightedMenuOptionId, name, plainTextValue, menuIsOpen, triggerWrapperReady, shouldRenderMenuDropdown, activeMenu, activeTriggerToken, menuFilterText, menuItemsState, menuItemsHandlers, menuDropdownStatus, maxMenuHeight, handleInput, handleLoadMore, editableElementAttributes, }) {
+export default function TokenMode({ editableElementRef, triggerWrapperRef, controlId, menuListId, menuFooterControlId, highlightedMenuOptionId, name, plainTextValue, menuIsOpen, triggerWrapperReady, shouldRenderMenuDropdown, activeMenu, activeTriggerToken, menuFilterText, menuItemsState, menuItemsHandlers, menuDropdownStatus, maxMenuHeight, menuStyle, handleInput, handleLoadMore, editableElementAttributes, }) {
     var _a;
     return (React.createElement(React.Fragment, null,
         name && React.createElement("input", { type: "hidden", name: name, value: plainTextValue }),
@@ -20,7 +21,17 @@ export default function TokenMode({ editableElementRef, triggerWrapperRef, contr
                 // We suppress this because we intentionally manage the DOM directly via token-renderer
                 // to avoid React's reconciliation conflicting with browser-native editing behavior.
                 suppressContentEditableWarning: true, "aria-controls": menuIsOpen ? menuListId : undefined, "aria-owns": menuIsOpen ? menuListId : undefined, "aria-activedescendant": highlightedMenuOptionId, onInput: handleInput, ...editableElementAttributes, className: clsx(editableElementAttributes.className, testutilStyles['content-editable'], styles['editable-element']) }),
-            React.createElement(Dropdown, { minWidth: MENU_MIN_WIDTH, maxHeight: maxMenuHeight, expandToViewport: true, open: !!(shouldRenderMenuDropdown &&
+            React.createElement(Dropdown, { minWidth: MENU_MIN_WIDTH, maxHeight: maxMenuHeight, expandToViewport: true, style: menuStyle
+                    ? {
+                        // DropdownProps.Style names the fill `background`; PromptInput exposes it as `backgroundColor`.
+                        dropdown: {
+                            background: menuStyle.backgroundColor,
+                            borderColor: menuStyle.borderColor,
+                            borderRadius: menuStyle.borderRadius,
+                            borderWidth: menuStyle.borderWidth,
+                        },
+                    }
+                    : undefined, open: !!(shouldRenderMenuDropdown &&
                     triggerWrapperReady &&
                     menuIsOpen &&
                     menuItemsState &&
@@ -32,6 +43,6 @@ export default function TokenMode({ editableElementRef, triggerWrapperRef, contr
                     // Prevent default to stop the dropdown from stealing focus from the contentEditable.
                     // Without this, clicking a menu option would blur the input before the selection handler fires.
                     event.preventDefault();
-                }, footer: (menuDropdownStatus === null || menuDropdownStatus === void 0 ? void 0 : menuDropdownStatus.isSticky) && menuDropdownStatus.content ? (React.createElement(DropdownFooter, { id: menuFooterControlId, content: menuDropdownStatus.content, hasItems: menuItemsState ? menuItemsState.items.length >= 1 : false })) : null, content: React.createElement(React.Fragment, null, shouldRenderMenuDropdown && menuItemsState && menuItemsHandlers && activeMenu && (React.createElement(MenuDropdown, { menu: activeMenu, statusType: (_a = activeMenu.statusType) !== null && _a !== void 0 ? _a : 'finished', menuItemsState: menuItemsState, menuItemsHandlers: menuItemsHandlers, highlightedOptionId: highlightedMenuOptionId, highlightText: menuFilterText, listId: menuListId, controlId: controlId !== null && controlId !== void 0 ? controlId : '', handleLoadMore: handleLoadMore, hasDropdownStatus: (menuDropdownStatus === null || menuDropdownStatus === void 0 ? void 0 : menuDropdownStatus.content) !== null, listBottom: !(menuDropdownStatus === null || menuDropdownStatus === void 0 ? void 0 : menuDropdownStatus.isSticky) && (menuDropdownStatus === null || menuDropdownStatus === void 0 ? void 0 : menuDropdownStatus.content) ? (React.createElement(DropdownFooter, { content: menuDropdownStatus.content, id: menuFooterControlId })) : null, ariaDescribedby: (menuDropdownStatus === null || menuDropdownStatus === void 0 ? void 0 : menuDropdownStatus.content) ? menuFooterControlId : undefined }))) }))));
+                }, footer: (menuDropdownStatus === null || menuDropdownStatus === void 0 ? void 0 : menuDropdownStatus.isSticky) && menuDropdownStatus.content ? (React.createElement(DropdownFooter, { id: menuFooterControlId, content: menuDropdownStatus.content, hasItems: menuItemsState ? menuItemsState.items.length >= 1 : false })) : null, content: React.createElement(React.Fragment, null, shouldRenderMenuDropdown && menuItemsState && menuItemsHandlers && activeMenu && (React.createElement(MenuDropdown, { menu: activeMenu, statusType: (_a = activeMenu.statusType) !== null && _a !== void 0 ? _a : 'finished', menuItemsState: menuItemsState, menuItemsHandlers: menuItemsHandlers, optionsListCustomProperties: getMenuOptionsListStyles(menuStyle), highlightedOptionId: highlightedMenuOptionId, highlightText: menuFilterText, listId: menuListId, controlId: controlId !== null && controlId !== void 0 ? controlId : '', handleLoadMore: handleLoadMore, hasDropdownStatus: (menuDropdownStatus === null || menuDropdownStatus === void 0 ? void 0 : menuDropdownStatus.content) !== null, listBottom: !(menuDropdownStatus === null || menuDropdownStatus === void 0 ? void 0 : menuDropdownStatus.isSticky) && (menuDropdownStatus === null || menuDropdownStatus === void 0 ? void 0 : menuDropdownStatus.content) ? (React.createElement(DropdownFooter, { content: menuDropdownStatus.content, id: menuFooterControlId })) : null, ariaDescribedby: (menuDropdownStatus === null || menuDropdownStatus === void 0 ? void 0 : menuDropdownStatus.content) ? menuFooterControlId : undefined }))) }))));
 }
 //# sourceMappingURL=token-mode.js.map