@cloudscape-design/components-themeable 3.0.961 → 3.0.963

package/lib/internal/template/internal/components/option/styles.scoped.css

@@ -150,7 +150,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_option_1p2cx_1k7wc_153:not(#\9) {
+.awsui_option_1p2cx_wsbdt_153:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -174,11 +174,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   visibility: visible;
   white-space: normal;
   word-spacing: normal;
-  font-size: var(--font-size-body-m-6wxxs5, 14px);
-  line-height: var(--line-height-body-m-gw0130, 22px);
-  color: var(--color-text-body-default-agk00h, #16191f);
+  font-size: var(--font-size-body-m-vv54cm, 14px);
+  line-height: var(--line-height-body-m-bedeoh, 22px);
+  color: var(--color-text-body-default-1tki40, #16191f);
   font-weight: 400;
-  font-family: var(--font-family-base-pxn2ad, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-family: var(--font-family-base-8x5ngf, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
   display: flex;
@@ -188,107 +188,107 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-sizing: border-box;
   color: inherit;
 }
-.awsui_option_1p2cx_1k7wc_153:not(#\9):not(.awsui_disabled_1p2cx_1k7wc_190) {
+.awsui_option_1p2cx_wsbdt_153:not(#\9):not(.awsui_disabled_1p2cx_wsbdt_190) {
   cursor: inherit;
 }
-.awsui_option_1p2cx_1k7wc_153.awsui_parent_1p2cx_1k7wc_193:not(#\9) {
+.awsui_option_1p2cx_wsbdt_153.awsui_parent_1p2cx_wsbdt_193:not(#\9) {
   font-weight: bold;
 }
-.awsui_option_1p2cx_1k7wc_153.awsui_parent_1p2cx_1k7wc_193:not(#\9):not(.awsui_disabled_1p2cx_1k7wc_190):not(.awsui_highlighted_1p2cx_1k7wc_196) {
-  color: var(--color-text-dropdown-group-label-h1uzwg, #545b64);
+.awsui_option_1p2cx_wsbdt_153.awsui_parent_1p2cx_wsbdt_193:not(#\9):not(.awsui_disabled_1p2cx_wsbdt_190):not(.awsui_highlighted_1p2cx_wsbdt_196) {
+  color: var(--color-text-dropdown-group-label-8bba32, #545b64);
 }
 
-.awsui_content_1p2cx_1k7wc_200:not(#\9) {
+.awsui_content_1p2cx_wsbdt_200:not(#\9) {
   inline-size: 100%;
   display: flex;
   flex-direction: column;
   min-inline-size: 0;
 }
 
-.awsui_label-content_1p2cx_1k7wc_207:not(#\9) {
+.awsui_label-content_1p2cx_wsbdt_207:not(#\9) {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
 }
 
-.awsui_label_1p2cx_1k7wc_207:not(#\9),
-.awsui_tag_1p2cx_1k7wc_214:not(#\9),
-.awsui_label-tag_1p2cx_1k7wc_215:not(#\9) {
+.awsui_label_1p2cx_wsbdt_207:not(#\9),
+.awsui_tag_1p2cx_wsbdt_214:not(#\9),
+.awsui_label-tag_1p2cx_wsbdt_215:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
 }
 
-.awsui_label_1p2cx_1k7wc_207:not(#\9),
-.awsui_tag_1p2cx_1k7wc_214:not(#\9) {
+.awsui_label_1p2cx_wsbdt_207:not(#\9),
+.awsui_tag_1p2cx_wsbdt_214:not(#\9) {
   flex-wrap: wrap;
 }
 
-.awsui_label-prefix_1p2cx_1k7wc_225:not(#\9) {
+.awsui_label-prefix_1p2cx_wsbdt_225:not(#\9) {
   font-weight: 700;
 }
 
-.awsui_label-tag_1p2cx_1k7wc_215:not(#\9) {
-  padding-inline-start: var(--space-s-vmutj3, 12px);
+.awsui_label-tag_1p2cx_wsbdt_215:not(#\9) {
+  padding-inline-start: var(--space-s-4a5hs8, 12px);
   flex: auto;
   text-align: end;
 }
-.awsui_label-tag_1p2cx_1k7wc_215:not(#\9):empty {
+.awsui_label-tag_1p2cx_wsbdt_215:not(#\9):empty {
   display: none;
 }
 
-.awsui_tags_1p2cx_1k7wc_238:not(#\9),
-.awsui_description_1p2cx_1k7wc_239:not(#\9) {
-  font-size: var(--font-size-body-s-4dzx5q, 12px);
-  line-height: var(--line-height-body-s-egzl4q, 16px);
-  letter-spacing: var(--letter-spacing-body-s-cbaxyl, normal);
-  color: var(--color-text-dropdown-item-secondary-e9qaxj, #687078);
+.awsui_tags_1p2cx_wsbdt_238:not(#\9),
+.awsui_description_1p2cx_wsbdt_239:not(#\9) {
+  font-size: var(--font-size-body-s-psgqn2, 12px);
+  line-height: var(--line-height-body-s-otgtsr, 16px);
+  letter-spacing: var(--letter-spacing-body-s-egrcsd, normal);
+  color: var(--color-text-dropdown-item-secondary-w5rx3r, #687078);
   flex-wrap: wrap;
 }
-.awsui_tags_1p2cx_1k7wc_238.awsui_highlighted_1p2cx_1k7wc_196:not(#\9),
-.awsui_description_1p2cx_1k7wc_239.awsui_highlighted_1p2cx_1k7wc_196:not(#\9) {
-  color: var(--color-text-dropdown-item-secondary-hover-t5irby, #687078);
+.awsui_tags_1p2cx_wsbdt_238.awsui_highlighted_1p2cx_wsbdt_196:not(#\9),
+.awsui_description_1p2cx_wsbdt_239.awsui_highlighted_1p2cx_wsbdt_196:not(#\9) {
+  color: var(--color-text-dropdown-item-secondary-hover-rvqzjl, #687078);
 }
-.awsui_tags_1p2cx_1k7wc_238.awsui_selected_1p2cx_1k7wc_250:not(#\9),
-.awsui_description_1p2cx_1k7wc_239.awsui_selected_1p2cx_1k7wc_250:not(#\9) {
-  color: var(--color-text-dropdown-item-secondary-e9qaxj, #687078);
+.awsui_tags_1p2cx_wsbdt_238.awsui_selected_1p2cx_wsbdt_250:not(#\9),
+.awsui_description_1p2cx_wsbdt_239.awsui_selected_1p2cx_wsbdt_250:not(#\9) {
+  color: var(--color-text-dropdown-item-secondary-w5rx3r, #687078);
 }
 
-.awsui_tags_1p2cx_1k7wc_238:not(#\9) {
+.awsui_tags_1p2cx_wsbdt_238:not(#\9) {
   display: flex;
   align-items: stretch;
 }
 
-.awsui_tag_1p2cx_1k7wc_214:not(#\9):not(:last-child) {
-  padding-inline-end: var(--space-m-u91ipm, 16px);
+.awsui_tag_1p2cx_wsbdt_214:not(#\9):not(:last-child) {
+  padding-inline-end: var(--space-m-n2lypl, 16px);
 }
 
-.awsui_icon_1p2cx_1k7wc_264:not(#\9) {
-  padding-inline-end: var(--space-xs-6dgkww, 8px);
+.awsui_icon_1p2cx_wsbdt_264:not(#\9) {
+  padding-inline-end: var(--space-xs-kw7k3v, 8px);
   align-content: center;
   display: flex;
   flex-shrink: 0;
 }
 
-.awsui_icon-size-big_1p2cx_1k7wc_271:not(#\9) {
-  padding-block-start: var(--space-option-icon-big-top-wh0y7a, 2px);
+.awsui_icon-size-big_1p2cx_wsbdt_271:not(#\9) {
+  padding-block-start: var(--space-option-icon-big-top-ybqefd, 2px);
 }
 
-.awsui_filtering-match-highlight_1p2cx_1k7wc_275:not(#\9) {
-  background-color: var(--color-background-dropdown-item-filter-match-ifarp3, #f1faff);
-  color: var(--color-text-dropdown-item-filter-match-krqyb4, #0073bb);
+.awsui_filtering-match-highlight_1p2cx_wsbdt_275:not(#\9) {
+  background-color: var(--color-background-dropdown-item-filter-match-w242ue, #f1faff);
+  color: var(--color-text-dropdown-item-filter-match-57lths, #0073bb);
   font-weight: bold;
 }
 
-.awsui_disabled_1p2cx_1k7wc_190:not(#\9) {
-  color: var(--color-text-dropdown-item-disabled-gk1x2u, #aab7b8);
+.awsui_disabled_1p2cx_wsbdt_190:not(#\9) {
+  color: var(--color-text-dropdown-item-disabled-g8nr7t, #aab7b8);
   pointer-events: none;
 }
-.awsui_disabled_1p2cx_1k7wc_190 > .awsui_content_1p2cx_1k7wc_200 > .awsui_tags_1p2cx_1k7wc_238:not(#\9),
-.awsui_disabled_1p2cx_1k7wc_190 > .awsui_content_1p2cx_1k7wc_200 > .awsui_description_1p2cx_1k7wc_239:not(#\9) {
+.awsui_disabled_1p2cx_wsbdt_190 > .awsui_content_1p2cx_wsbdt_200 > .awsui_tags_1p2cx_wsbdt_238:not(#\9),
+.awsui_disabled_1p2cx_wsbdt_190 > .awsui_content_1p2cx_wsbdt_200 > .awsui_description_1p2cx_wsbdt_239:not(#\9) {
   color: currentColor;
 }
 
-.awsui_trigger-variant_1p2cx_1k7wc_290:not(#\9) {
+.awsui_trigger-variant_1p2cx_wsbdt_290:not(#\9) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/lib/internal/template/internal/components/option/styles.selectors.js

@@ -2,22 +2,22 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "option": "awsui_option_1p2cx_1k7wc_153",
-  "disabled": "awsui_disabled_1p2cx_1k7wc_190",
-  "parent": "awsui_parent_1p2cx_1k7wc_193",
-  "highlighted": "awsui_highlighted_1p2cx_1k7wc_196",
-  "content": "awsui_content_1p2cx_1k7wc_200",
-  "label-content": "awsui_label-content_1p2cx_1k7wc_207",
-  "label": "awsui_label_1p2cx_1k7wc_207",
-  "tag": "awsui_tag_1p2cx_1k7wc_214",
-  "label-tag": "awsui_label-tag_1p2cx_1k7wc_215",
-  "label-prefix": "awsui_label-prefix_1p2cx_1k7wc_225",
-  "tags": "awsui_tags_1p2cx_1k7wc_238",
-  "description": "awsui_description_1p2cx_1k7wc_239",
-  "selected": "awsui_selected_1p2cx_1k7wc_250",
-  "icon": "awsui_icon_1p2cx_1k7wc_264",
-  "icon-size-big": "awsui_icon-size-big_1p2cx_1k7wc_271",
-  "filtering-match-highlight": "awsui_filtering-match-highlight_1p2cx_1k7wc_275",
-  "trigger-variant": "awsui_trigger-variant_1p2cx_1k7wc_290"
+  "option": "awsui_option_1p2cx_wsbdt_153",
+  "disabled": "awsui_disabled_1p2cx_wsbdt_190",
+  "parent": "awsui_parent_1p2cx_wsbdt_193",
+  "highlighted": "awsui_highlighted_1p2cx_wsbdt_196",
+  "content": "awsui_content_1p2cx_wsbdt_200",
+  "label-content": "awsui_label-content_1p2cx_wsbdt_207",
+  "label": "awsui_label_1p2cx_wsbdt_207",
+  "tag": "awsui_tag_1p2cx_wsbdt_214",
+  "label-tag": "awsui_label-tag_1p2cx_wsbdt_215",
+  "label-prefix": "awsui_label-prefix_1p2cx_wsbdt_225",
+  "tags": "awsui_tags_1p2cx_wsbdt_238",
+  "description": "awsui_description_1p2cx_wsbdt_239",
+  "selected": "awsui_selected_1p2cx_wsbdt_250",
+  "icon": "awsui_icon_1p2cx_wsbdt_264",
+  "icon-size-big": "awsui_icon-size-big_1p2cx_wsbdt_271",
+  "filtering-match-highlight": "awsui_filtering-match-highlight_1p2cx_wsbdt_275",
+  "trigger-variant": "awsui_trigger-variant_1p2cx_wsbdt_290"
 };
   

package/lib/internal/template/internal/components/options-list/styles.css.js

@@ -1,8 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "options-list": "awsui_options-list_19gcf_p08j8_145",
-  "options-list-embedded": "awsui_options-list-embedded_19gcf_p08j8_192",
-  "decrease-block-margin": "awsui_decrease-block-margin_19gcf_p08j8_199"
+  "options-list": "awsui_options-list_19gcf_1gmb2_145",
+  "options-list-embedded": "awsui_options-list-embedded_19gcf_1gmb2_192",
+  "decrease-block-margin": "awsui_decrease-block-margin_19gcf_1gmb2_199"
 };
   

package/lib/internal/template/internal/components/options-list/styles.scoped.css

@@ -142,7 +142,7 @@
 */
 /* 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_options-list_19gcf_p08j8_145:not(#\9) {
+.awsui_options-list_19gcf_1gmb2_145:not(#\9) {
   padding-block: 0;
   padding-inline: 0;
   margin-block: 0;
@@ -173,31 +173,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   visibility: visible;
   white-space: normal;
   word-spacing: normal;
-  font-size: var(--font-size-body-m-6wxxs5, 14px);
-  line-height: var(--line-height-body-m-gw0130, 22px);
-  color: var(--color-text-body-default-agk00h, #16191f);
+  font-size: var(--font-size-body-m-vv54cm, 14px);
+  line-height: var(--line-height-body-m-bedeoh, 22px);
+  color: var(--color-text-body-default-1tki40, #16191f);
   font-weight: 400;
-  font-family: var(--font-family-base-pxn2ad, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-family: var(--font-family-base-8x5ngf, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
   white-space: inherit;
   overflow-y: auto;
   flex: 1 1 auto;
   min-block-size: 0;
-  border-start-start-radius: var(--border-radius-dropdown-knc5ce, 0px);
-  border-start-end-radius: var(--border-radius-dropdown-knc5ce, 0px);
-  border-end-start-radius: var(--border-radius-dropdown-knc5ce, 0px);
-  border-end-end-radius: var(--border-radius-dropdown-knc5ce, 0px);
+  border-start-start-radius: var(--border-radius-dropdown-oaxffg, 0px);
+  border-start-end-radius: var(--border-radius-dropdown-oaxffg, 0px);
+  border-end-start-radius: var(--border-radius-dropdown-oaxffg, 0px);
+  border-end-end-radius: var(--border-radius-dropdown-oaxffg, 0px);
   -webkit-user-select: none;
           user-select: none;
 }
-.awsui_options-list-embedded_19gcf_p08j8_192:not(#\9) {
+.awsui_options-list-embedded_19gcf_1gmb2_192:not(#\9) {
   border-start-start-radius: 0px;
   border-start-end-radius: 0px;
   border-end-start-radius: 0px;
   border-end-end-radius: 0px;
 }
 
-.awsui_decrease-block-margin_19gcf_p08j8_199:not(#\9) {
+.awsui_decrease-block-margin_19gcf_1gmb2_199:not(#\9) {
   margin-block: -1px;
 }

package/lib/internal/template/internal/components/options-list/styles.selectors.js

@@ -2,8 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "options-list": "awsui_options-list_19gcf_p08j8_145",
-  "options-list-embedded": "awsui_options-list-embedded_19gcf_p08j8_192",
-  "decrease-block-margin": "awsui_decrease-block-margin_19gcf_p08j8_199"
+  "options-list": "awsui_options-list_19gcf_1gmb2_145",
+  "options-list-embedded": "awsui_options-list-embedded_19gcf_1gmb2_192",
+  "decrease-block-margin": "awsui_decrease-block-margin_19gcf_1gmb2_199"
 };
   

package/lib/internal/template/internal/components/panel-resize-handle/styles.css.js

@@ -1,10 +1,10 @@
 
     import './styles.scoped.css';
     export default {
-  "slider": "awsui_slider_cqzlk_vw9m6_145",
-  "slider-side": "awsui_slider-side_cqzlk_vw9m6_180",
-  "slider-icon": "awsui_slider-icon_cqzlk_vw9m6_187",
-  "slider-icon-bottom": "awsui_slider-icon-bottom_cqzlk_vw9m6_193",
-  "slider-icon-side": "awsui_slider-icon-side_cqzlk_vw9m6_197"
+  "slider": "awsui_slider_cqzlk_1nbqh_145",
+  "slider-side": "awsui_slider-side_cqzlk_1nbqh_180",
+  "slider-icon": "awsui_slider-icon_cqzlk_1nbqh_187",
+  "slider-icon-bottom": "awsui_slider-icon-bottom_cqzlk_1nbqh_193",
+  "slider-icon-side": "awsui_slider-icon-side_cqzlk_1nbqh_197"
 };
   

package/lib/internal/template/internal/components/panel-resize-handle/styles.scoped.css

@@ -142,7 +142,7 @@
 */
 /* 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_slider_cqzlk_vw9m6_145:not(#\9) {
+.awsui_slider_cqzlk_1nbqh_145:not(#\9) {
   padding-block: 0;
   padding-inline: 0;
   cursor: ns-resize;
@@ -152,17 +152,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   block-size: 16px;
   touch-action: none;
 }
-.awsui_slider_cqzlk_vw9m6_145:not(#\9):focus {
+.awsui_slider_cqzlk_1nbqh_145:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_vw9m6_145:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_1nbqh_145:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_vw9m6_145:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_1nbqh_145:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_vw9m6_145:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_1nbqh_145:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -170,30 +170,30 @@ body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_vw9m6_145:not(#\9):focus
   inset-block-start: calc(-1 * 0px);
   inline-size: calc(100% + 0px + 0px);
   block-size: calc(100% + 0px + 0px);
-  border-start-start-radius: var(--border-radius-control-default-focus-ring-vy2hlh, 2px);
-  border-start-end-radius: var(--border-radius-control-default-focus-ring-vy2hlh, 2px);
-  border-end-start-radius: var(--border-radius-control-default-focus-ring-vy2hlh, 2px);
-  border-end-end-radius: var(--border-radius-control-default-focus-ring-vy2hlh, 2px);
-  box-shadow: 0 0 0 2px var(--color-border-item-focused-q68bgg, #0073bb);
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-vx5mpq, #0073bb);
 }
 
-.awsui_slider-side_cqzlk_vw9m6_180:not(#\9) {
+.awsui_slider-side_cqzlk_1nbqh_180:not(#\9) {
   cursor: ew-resize;
   margin-block: 0;
   margin-inline-start: 2px;
   margin-inline-end: 0;
 }
 
-.awsui_slider-icon_cqzlk_vw9m6_187:not(#\9) {
-  stroke: var(--color-text-interactive-default-t1snbz, #545b64);
+.awsui_slider-icon_cqzlk_1nbqh_187:not(#\9) {
+  stroke: var(--color-text-interactive-default-mf3cev, #545b64);
 }
-.awsui_slider-icon_cqzlk_vw9m6_187:not(#\9):hover {
-  stroke: var(--color-text-interactive-hover-kxltdh, #16191f);
+.awsui_slider-icon_cqzlk_1nbqh_187:not(#\9):hover {
+  stroke: var(--color-text-interactive-hover-kceoak, #16191f);
 }
-.awsui_slider-icon-bottom_cqzlk_vw9m6_193:not(#\9) {
+.awsui_slider-icon-bottom_cqzlk_1nbqh_193:not(#\9) {
   margin-block: auto;
   margin-inline: auto;
 }
-.awsui_slider-icon-side_cqzlk_vw9m6_197:not(#\9) {
+.awsui_slider-icon-side_cqzlk_1nbqh_197:not(#\9) {
   transform: rotate(90deg);
 }

package/lib/internal/template/internal/components/panel-resize-handle/styles.selectors.js

@@ -2,10 +2,10 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "slider": "awsui_slider_cqzlk_vw9m6_145",
-  "slider-side": "awsui_slider-side_cqzlk_vw9m6_180",
-  "slider-icon": "awsui_slider-icon_cqzlk_vw9m6_187",
-  "slider-icon-bottom": "awsui_slider-icon-bottom_cqzlk_vw9m6_193",
-  "slider-icon-side": "awsui_slider-icon-side_cqzlk_vw9m6_197"
+  "slider": "awsui_slider_cqzlk_1nbqh_145",
+  "slider-side": "awsui_slider-side_cqzlk_1nbqh_180",
+  "slider-icon": "awsui_slider-icon_cqzlk_1nbqh_187",
+  "slider-icon-bottom": "awsui_slider-icon-bottom_cqzlk_1nbqh_193",
+  "slider-icon-side": "awsui_slider-icon-side_cqzlk_1nbqh_197"
 };
   

package/lib/internal/template/internal/components/selectable-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAOvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;;AA0H/B,wBAAgD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAQvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;;AA4H/B,wBAAgD"}

package/lib/internal/template/internal/components/selectable-item/index.js

@@ -4,12 +4,14 @@ import { __rest } from "tslib";
 import React, { useLayoutEffect, useRef } from 'react';
 import clsx from 'clsx';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+import { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';
 import { getBaseProps } from '../../base-component';
 import { getAnalyticsSelectActionMetadata } from './analytics-metadata/utils';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 const SelectableItem = (_a, ref) => {
     var { children: content, ariaSelected, ariaChecked, selected, highlighted, disabled, hasBackground, isParent, isChild, isSelectAll, virtualPosition, padBottom, isNextSelected, useInteractiveGroups, screenReaderContent, ariaPosinset, ariaSetsize, highlightType, value, sticky, afterHeader, withScrollbar } = _a, restProps = __rest(_a, ["children", "ariaSelected", "ariaChecked", "selected", "highlighted", "disabled", "hasBackground", "isParent", "isChild", "isSelectAll", "virtualPosition", "padBottom", "isNextSelected", "useInteractiveGroups", "screenReaderContent", "ariaPosinset", "ariaSetsize", "highlightType", "value", "sticky", "afterHeader", "withScrollbar"]);
+    const isVisualRefresh = useVisualRefresh();
     const _b = getBaseProps(restProps), { className } = _b, rest = __rest(_b, ["className"]);
     const classNames = clsx(className, styles['selectable-item'], {
         [styles.selected]: selected,
@@ -28,6 +30,7 @@ const SelectableItem = (_a, ref) => {
         [styles.sticky]: sticky,
         [styles['after-header']]: !!afterHeader,
         [styles['with-scrollbar']]: withScrollbar,
+        [styles['visual-refresh']]: isVisualRefresh,
     });
     const contentRef = useRef(null);
     const screenReaderContentRef = useRef(null);

package/lib/internal/template/internal/components/selectable-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/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, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../../base-component';\nimport { getAnalyticsSelectActionMetadata } from './analytics-metadata/utils';\nimport { SelectableItemProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SelectableItemProps };\n\nconst SelectableItem = (\n  {\n    children: content,\n    ariaSelected,\n    ariaChecked,\n    selected,\n    highlighted,\n    disabled,\n    hasBackground,\n    isParent,\n    isChild,\n    isSelectAll,\n    virtualPosition,\n    padBottom,\n    isNextSelected,\n    useInteractiveGroups,\n    screenReaderContent,\n    ariaPosinset,\n    ariaSetsize,\n    highlightType,\n    value,\n    sticky,\n    afterHeader,\n    withScrollbar,\n    ...restProps\n  }: SelectableItemProps,\n  ref: React.Ref<HTMLDivElement>\n) => {\n  const { className, ...rest } = getBaseProps(restProps);\n  const classNames = clsx(className, styles['selectable-item'], {\n    [styles.selected]: selected,\n    [styles.highlighted]: highlighted,\n    [styles['has-background']]: hasBackground,\n    [styles.parent]: isParent,\n    [analyticsSelectors.parent]: isParent,\n    [styles.child]: isChild,\n    [styles['select-all']]: isSelectAll,\n    [styles['is-keyboard']]: highlightType === 'keyboard',\n    [styles.disabled]: disabled,\n    [styles.virtual]: virtualPosition !== undefined && !sticky,\n    [styles['pad-bottom']]: padBottom,\n    [styles['next-item-selected']]: isNextSelected,\n    [styles.interactiveGroups]: useInteractiveGroups,\n    [styles.sticky]: sticky,\n    [styles['after-header']]: !!afterHeader,\n    [styles['with-scrollbar']]: withScrollbar,\n  });\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const screenReaderContentRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    // the state of aria-hidden and announcement is not set back because NVDA+Firefox would announce\n    // the item which lost highlight\n    // set aria-hidden true when there is announcement content, so that screen reader still announce\n    // meaningful content when navigate with screen reader cursor\n    // imperatively update to avoid announcement made multiple times when content updates\n    if (highlighted && screenReaderContent) {\n      if (contentRef.current) {\n        contentRef.current.setAttribute('aria-hidden', 'true');\n      }\n      if (screenReaderContentRef.current) {\n        screenReaderContentRef.current.textContent = screenReaderContent;\n      }\n    }\n  }, [highlighted, screenReaderContent, contentRef, screenReaderContentRef]);\n\n  const style =\n    virtualPosition !== undefined\n      ? {\n          transform: `translateY(${virtualPosition}px)`,\n        }\n      : undefined;\n\n  const a11yProperties: Record<string, string | number | boolean | undefined> = {\n    'aria-disabled': disabled,\n  };\n\n  if (isParent && !useInteractiveGroups) {\n    a11yProperties['aria-hidden'] = true;\n  }\n\n  if (ariaSelected !== undefined) {\n    a11yProperties['aria-selected'] = ariaSelected;\n  }\n\n  // Safari+VO needs aria-checked for multi-selection. Otherwise it only announces selected option even though another option is highlighted.\n  if (ariaChecked !== undefined) {\n    a11yProperties['aria-checked'] = ariaChecked;\n  }\n\n  if (ariaPosinset && ariaSetsize) {\n    a11yProperties['aria-posinset'] = ariaPosinset;\n    a11yProperties['aria-setsize'] = ariaSetsize;\n  }\n\n  if (restProps.ariaDescribedby) {\n    a11yProperties['aria-describedby'] = restProps.ariaDescribedby;\n  }\n\n  return (\n    <li\n      role=\"option\"\n      className={classNames}\n      style={style}\n      {...a11yProperties}\n      {...rest}\n      {...(isParent || disabled\n        ? {}\n        : getAnalyticsMetadataAttribute(getAnalyticsSelectActionMetadata({ isChild, value, ...restProps })))}\n    >\n      <div className={clsx(styles['option-content'], analyticsSelectors['option-content'])} ref={contentRef}>\n        {content}\n      </div>\n      <div className={styles['measure-strut']} ref={ref} />\n      <div className={styles['screenreader-content']} ref={screenReaderContentRef}></div>\n    </li>\n  );\n};\n\nexport default React.forwardRef(SelectableItem);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/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, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\nimport { getBaseProps } from '../../base-component';\nimport { getAnalyticsSelectActionMetadata } from './analytics-metadata/utils';\nimport { SelectableItemProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SelectableItemProps };\n\nconst SelectableItem = (\n  {\n    children: content,\n    ariaSelected,\n    ariaChecked,\n    selected,\n    highlighted,\n    disabled,\n    hasBackground,\n    isParent,\n    isChild,\n    isSelectAll,\n    virtualPosition,\n    padBottom,\n    isNextSelected,\n    useInteractiveGroups,\n    screenReaderContent,\n    ariaPosinset,\n    ariaSetsize,\n    highlightType,\n    value,\n    sticky,\n    afterHeader,\n    withScrollbar,\n    ...restProps\n  }: SelectableItemProps,\n  ref: React.Ref<HTMLDivElement>\n) => {\n  const isVisualRefresh = useVisualRefresh();\n  const { className, ...rest } = getBaseProps(restProps);\n  const classNames = clsx(className, styles['selectable-item'], {\n    [styles.selected]: selected,\n    [styles.highlighted]: highlighted,\n    [styles['has-background']]: hasBackground,\n    [styles.parent]: isParent,\n    [analyticsSelectors.parent]: isParent,\n    [styles.child]: isChild,\n    [styles['select-all']]: isSelectAll,\n    [styles['is-keyboard']]: highlightType === 'keyboard',\n    [styles.disabled]: disabled,\n    [styles.virtual]: virtualPosition !== undefined && !sticky,\n    [styles['pad-bottom']]: padBottom,\n    [styles['next-item-selected']]: isNextSelected,\n    [styles.interactiveGroups]: useInteractiveGroups,\n    [styles.sticky]: sticky,\n    [styles['after-header']]: !!afterHeader,\n    [styles['with-scrollbar']]: withScrollbar,\n    [styles['visual-refresh']]: isVisualRefresh,\n  });\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const screenReaderContentRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    // the state of aria-hidden and announcement is not set back because NVDA+Firefox would announce\n    // the item which lost highlight\n    // set aria-hidden true when there is announcement content, so that screen reader still announce\n    // meaningful content when navigate with screen reader cursor\n    // imperatively update to avoid announcement made multiple times when content updates\n    if (highlighted && screenReaderContent) {\n      if (contentRef.current) {\n        contentRef.current.setAttribute('aria-hidden', 'true');\n      }\n      if (screenReaderContentRef.current) {\n        screenReaderContentRef.current.textContent = screenReaderContent;\n      }\n    }\n  }, [highlighted, screenReaderContent, contentRef, screenReaderContentRef]);\n\n  const style =\n    virtualPosition !== undefined\n      ? {\n          transform: `translateY(${virtualPosition}px)`,\n        }\n      : undefined;\n\n  const a11yProperties: Record<string, string | number | boolean | undefined> = {\n    'aria-disabled': disabled,\n  };\n\n  if (isParent && !useInteractiveGroups) {\n    a11yProperties['aria-hidden'] = true;\n  }\n\n  if (ariaSelected !== undefined) {\n    a11yProperties['aria-selected'] = ariaSelected;\n  }\n\n  // Safari+VO needs aria-checked for multi-selection. Otherwise it only announces selected option even though another option is highlighted.\n  if (ariaChecked !== undefined) {\n    a11yProperties['aria-checked'] = ariaChecked;\n  }\n\n  if (ariaPosinset && ariaSetsize) {\n    a11yProperties['aria-posinset'] = ariaPosinset;\n    a11yProperties['aria-setsize'] = ariaSetsize;\n  }\n\n  if (restProps.ariaDescribedby) {\n    a11yProperties['aria-describedby'] = restProps.ariaDescribedby;\n  }\n\n  return (\n    <li\n      role=\"option\"\n      className={classNames}\n      style={style}\n      {...a11yProperties}\n      {...rest}\n      {...(isParent || disabled\n        ? {}\n        : getAnalyticsMetadataAttribute(getAnalyticsSelectActionMetadata({ isChild, value, ...restProps })))}\n    >\n      <div className={clsx(styles['option-content'], analyticsSelectors['option-content'])} ref={contentRef}>\n        {content}\n      </div>\n      <div className={styles['measure-strut']} ref={ref} />\n      <div className={styles['screenreader-content']} ref={screenReaderContentRef}></div>\n    </li>\n  );\n};\n\nexport default React.forwardRef(SelectableItem);\n"]}

package/lib/internal/template/internal/components/selectable-item/styles.css.js

@@ -1,25 +1,26 @@
 
     import './styles.scoped.css';
     export default {
-  "selectable-item": "awsui_selectable-item_15o6u_14svm_145",
-  "pad-bottom": "awsui_pad-bottom_15o6u_14svm_167",
-  "virtual": "awsui_virtual_15o6u_14svm_171",
-  "has-background": "awsui_has-background_15o6u_14svm_174",
-  "highlighted": "awsui_highlighted_15o6u_14svm_177",
-  "selected": "awsui_selected_15o6u_14svm_177",
-  "disabled": "awsui_disabled_15o6u_14svm_195",
-  "next-item-selected": "awsui_next-item-selected_15o6u_14svm_205",
-  "is-keyboard": "awsui_is-keyboard_15o6u_14svm_217",
-  "parent": "awsui_parent_15o6u_14svm_221",
-  "interactiveGroups": "awsui_interactiveGroups_15o6u_14svm_225",
-  "child": "awsui_child_15o6u_14svm_241",
-  "sticky": "awsui_sticky_15o6u_14svm_247",
-  "with-scrollbar": "awsui_with-scrollbar_15o6u_14svm_259",
-  "after-header": "awsui_after-header_15o6u_14svm_265",
-  "measure-strut": "awsui_measure-strut_15o6u_14svm_300",
-  "measure-strut-first": "awsui_measure-strut-first_15o6u_14svm_309",
-  "screenreader-content": "awsui_screenreader-content_15o6u_14svm_313",
-  "option-content": "awsui_option-content_15o6u_14svm_319",
-  "select-all": "awsui_select-all_15o6u_14svm_323"
+  "selectable-item": "awsui_selectable-item_15o6u_2z7dj_145",
+  "pad-bottom": "awsui_pad-bottom_15o6u_2z7dj_167",
+  "virtual": "awsui_virtual_15o6u_2z7dj_171",
+  "has-background": "awsui_has-background_15o6u_2z7dj_174",
+  "highlighted": "awsui_highlighted_15o6u_2z7dj_177",
+  "selected": "awsui_selected_15o6u_2z7dj_177",
+  "disabled": "awsui_disabled_15o6u_2z7dj_195",
+  "next-item-selected": "awsui_next-item-selected_15o6u_2z7dj_205",
+  "is-keyboard": "awsui_is-keyboard_15o6u_2z7dj_217",
+  "visual-refresh": "awsui_visual-refresh_15o6u_2z7dj_220",
+  "parent": "awsui_parent_15o6u_2z7dj_223",
+  "interactiveGroups": "awsui_interactiveGroups_15o6u_2z7dj_227",
+  "child": "awsui_child_15o6u_2z7dj_243",
+  "sticky": "awsui_sticky_15o6u_2z7dj_249",
+  "with-scrollbar": "awsui_with-scrollbar_15o6u_2z7dj_261",
+  "after-header": "awsui_after-header_15o6u_2z7dj_267",
+  "measure-strut": "awsui_measure-strut_15o6u_2z7dj_302",
+  "measure-strut-first": "awsui_measure-strut-first_15o6u_2z7dj_311",
+  "screenreader-content": "awsui_screenreader-content_15o6u_2z7dj_315",
+  "option-content": "awsui_option-content_15o6u_2z7dj_321",
+  "select-all": "awsui_select-all_15o6u_2z7dj_325"
 };