npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1328 → 3.0.1330 - Mend

@cloudscape-design/components-themeable 3.0.1328 → 3.0.1330

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (416) hide show

package/lib/internal/template/top-navigation/styles.scoped.css CHANGED Viewed

@@ -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_top-navigation_k5dlb_1n64f_145:not(#\9) {
+.awsui_top-navigation_k5dlb_k9i6n_145:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -173,9 +173,9 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
   background: var(--color-background-container-content-aemn43, #ffffff);
-  border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-divider-default-ipvpev, #eaeded);
+  border-block-end: var(--border-divider-section-width-dlkb8v, 1px) solid var(--color-border-divider-default-ipvpev, #eaeded);
 }
-.awsui_top-navigation_k5dlb_1n64f_145 > .awsui_padding-box_k5dlb_1n64f_178:not(#\9) {
+.awsui_top-navigation_k5dlb_k9i6n_145 > .awsui_padding-box_k5dlb_k9i6n_178:not(#\9) {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -185,22 +185,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   block-size: calc(var(--space-xxxl-qhelse, 40px) + var(--space-scaled-m-sw9kcx, 16px));
   padding-inline-start: var(--space-xxl-q0lyvp, 32px);
 }
-.awsui_top-navigation_k5dlb_1n64f_145.awsui_medium_k5dlb_1n64f_188 > .awsui_padding-box_k5dlb_1n64f_178:not(#\9), .awsui_top-navigation_k5dlb_1n64f_145.awsui_narrow_k5dlb_1n64f_188 > .awsui_padding-box_k5dlb_1n64f_178:not(#\9) {
+.awsui_top-navigation_k5dlb_k9i6n_145.awsui_medium_k5dlb_k9i6n_188 > .awsui_padding-box_k5dlb_k9i6n_178:not(#\9), .awsui_top-navigation_k5dlb_k9i6n_145.awsui_narrow_k5dlb_k9i6n_188 > .awsui_padding-box_k5dlb_k9i6n_178:not(#\9) {
   padding-inline-start: var(--space-l-3cws6j, 20px);
 }
-.awsui_top-navigation_k5dlb_1n64f_145.awsui_medium_k5dlb_1n64f_188 > .awsui_padding-box_k5dlb_1n64f_178:not(#\9) {
+.awsui_top-navigation_k5dlb_k9i6n_145.awsui_medium_k5dlb_k9i6n_188 > .awsui_padding-box_k5dlb_k9i6n_178:not(#\9) {
   block-size: calc(var(--space-xxxl-qhelse, 40px) + var(--space-scaled-xs-sppte9, 8px));
   padding-inline-end: 0;
 }
-.awsui_top-navigation_k5dlb_1n64f_145.awsui_narrow_k5dlb_1n64f_188 > .awsui_padding-box_k5dlb_1n64f_178:not(#\9) {
+.awsui_top-navigation_k5dlb_k9i6n_145.awsui_narrow_k5dlb_k9i6n_188 > .awsui_padding-box_k5dlb_k9i6n_178:not(#\9) {
   block-size: var(--space-xxxl-qhelse, 40px);
 }
-.awsui_virtual_k5dlb_1n64f_199:not(#\9) {
+.awsui_virtual_k5dlb_k9i6n_199:not(#\9) {
   inline-size: 9000px;
 }
-.awsui_hidden_k5dlb_1n64f_203:not(#\9) {
+.awsui_hidden_k5dlb_k9i6n_203:not(#\9) {
   position: absolute !important;
   inset-block-start: -9999px !important;
   inset-inline-start: -9999px !important;
@@ -208,38 +208,38 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
-.awsui_hidden_k5dlb_1n64f_203 *:not(#\9):not(#awsui_\9 _k5dlb_1n64f_1) {
+.awsui_hidden_k5dlb_k9i6n_203 *:not(#\9):not(#awsui_\9 _k5dlb_k9i6n_1) {
   visibility: hidden;
 }
-.awsui_identity_k5dlb_1n64f_215:not(#\9) {
+.awsui_identity_k5dlb_k9i6n_215:not(#\9) {
   min-inline-size: 0;
 }
-.awsui_identity_k5dlb_1n64f_215 > .awsui_identity-link_k5dlb_1n64f_218:not(#\9) {
+.awsui_identity_k5dlb_k9i6n_215 > .awsui_identity-link_k5dlb_k9i6n_218:not(#\9) {
   display: flex;
   align-items: center;
   text-decoration: none;
   color: var(--color-text-top-navigation-title-4lkrln, #16191f);
 }
-.awsui_identity_k5dlb_1n64f_215 > .awsui_identity-link_k5dlb_1n64f_218:not(#\9):hover {
+.awsui_identity_k5dlb_k9i6n_215 > .awsui_identity-link_k5dlb_k9i6n_218:not(#\9):hover {
   color: var(--color-text-accent-rvq171, #0073bb);
 }
-body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_1n64f_215 > .awsui_identity-link_k5dlb_1n64f_218:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_k9i6n_215 > .awsui_identity-link_k5dlb_k9i6n_218:not(#\9):focus {
   outline: thin dotted;
-  outline: var(--border-link-focus-ring-outline-c5423y, 5px auto Highlight);
+  outline: var(--border-link-focus-ring-outline-wn9h6t, 5px auto Highlight);
   outline-offset: 2px;
   outline-color: var(--color-border-item-focused-r5f6xl, #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 var(--border-link-focus-ring-shadow-spread-woh62o, 0px) var(--color-border-item-focused-r5f6xl, #0073bb);
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-akwhsf, 2px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-akwhsf, 2px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-akwhsf, 2px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-akwhsf, 2px);
+  box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-ggjunl, 0px) var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_identity_k5dlb_1n64f_215.awsui_no-logo_k5dlb_1n64f_238:not(#\9) {
+.awsui_identity_k5dlb_k9i6n_215.awsui_no-logo_k5dlb_k9i6n_238:not(#\9) {
   min-inline-size: 100px;
 }
-.awsui_logo_k5dlb_1n64f_242:not(#\9) {
+.awsui_logo_k5dlb_k9i6n_242:not(#\9) {
   display: block;
   max-block-size: var(--space-xxl-q0lyvp, 32px);
   margin-inline-end: var(--space-s-4a5hs8, 12px);
@@ -247,11 +247,11 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_1n64f_215 > .awsui_ide
   flex-shrink: 0;
   min-inline-size: 10px;
 }
-.awsui_logo_k5dlb_1n64f_242.awsui_narrow_k5dlb_1n64f_188:not(#\9) {
+.awsui_logo_k5dlb_k9i6n_242.awsui_narrow_k5dlb_k9i6n_188:not(#\9) {
   max-block-size: var(--space-xl-4dmkh1, 24px);
 }
-.awsui_title_k5dlb_1n64f_254:not(#\9) {
+.awsui_title_k5dlb_k9i6n_254:not(#\9) {
   font-family: var(--font-family-heading-gnchto, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   font-size: var(--font-size-heading-m-56jjln, 18px);
   line-height: var(--line-height-heading-m-irezqt, 22px);
@@ -263,11 +263,11 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_1n64f_215 > .awsui_ide
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.awsui_no-logo_k5dlb_1n64f_238 > .awsui_identity-link_k5dlb_1n64f_218 > .awsui_title_k5dlb_1n64f_254:not(#\9) {
+.awsui_no-logo_k5dlb_k9i6n_238 > .awsui_identity-link_k5dlb_k9i6n_218 > .awsui_title_k5dlb_k9i6n_254:not(#\9) {
   font-weight: var(--font-weight-bold-p16d06, 700);
 }
-.awsui_inputs_k5dlb_1n64f_270:not(#\9) {
+.awsui_inputs_k5dlb_k9i6n_270:not(#\9) {
   display: flex;
   flex: 1;
   padding-block: 0;
@@ -275,26 +275,26 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_1n64f_215 > .awsui_ide
   justify-content: center;
 }
-.awsui_search_k5dlb_1n64f_278:not(#\9) {
+.awsui_search_k5dlb_k9i6n_278:not(#\9) {
   inline-size: 100%;
   max-inline-size: 340px;
 }
-.awsui_search-expanded_k5dlb_1n64f_282:not(#\9) {
+.awsui_search-expanded_k5dlb_k9i6n_282:not(#\9) {
   max-inline-size: none;
 }
-.awsui_utilities_k5dlb_1n64f_286:not(#\9) {
+.awsui_utilities_k5dlb_k9i6n_286:not(#\9) {
   display: flex;
   flex-shrink: 0;
   flex-direction: row;
   align-items: stretch;
   block-size: 100%;
 }
-.awsui_medium_k5dlb_1n64f_188 > .awsui_padding-box_k5dlb_1n64f_178 > .awsui_utilities_k5dlb_1n64f_286:not(#\9), .awsui_narrow_k5dlb_1n64f_188 > .awsui_padding-box_k5dlb_1n64f_178 > .awsui_utilities_k5dlb_1n64f_286:not(#\9) {
+.awsui_medium_k5dlb_k9i6n_188 > .awsui_padding-box_k5dlb_k9i6n_178 > .awsui_utilities_k5dlb_k9i6n_286:not(#\9), .awsui_narrow_k5dlb_k9i6n_188 > .awsui_padding-box_k5dlb_k9i6n_178 > .awsui_utilities_k5dlb_k9i6n_286:not(#\9) {
   padding-inline-start: 0;
 }
-.awsui_utility-wrapper_k5dlb_1n64f_297:not(#\9) {
+.awsui_utility-wrapper_k5dlb_k9i6n_297:not(#\9) {
   display: flex;
   position: relative;
   flex-shrink: 0;
@@ -302,7 +302,7 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_1n64f_215 > .awsui_ide
   padding-block: 0;
   padding-inline: var(--space-m-n2lypl, 16px);
 }
-.awsui_utility-wrapper_k5dlb_1n64f_297:not(#\9)::after {
+.awsui_utility-wrapper_k5dlb_k9i6n_297:not(#\9)::after {
   display: block;
   position: absolute;
   content: "";
@@ -311,61 +311,61 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_1n64f_215 > .awsui_ide
   inset-block: var(--space-s-4a5hs8, 12px);
   background: var(--color-border-divider-default-ipvpev, #eaeded);
 }
-.awsui_utility-wrapper_k5dlb_1n64f_297:not(#\9):last-of-type::after {
+.awsui_utility-wrapper_k5dlb_k9i6n_297:not(#\9):last-of-type::after {
   display: none;
 }
-.awsui_utility-type-button-link_k5dlb_1n64f_318:not(#\9) {
+.awsui_utility-type-button-link_k5dlb_k9i6n_318:not(#\9) {
   padding-block: 0;
   padding-inline: var(--space-l-3cws6j, 20px);
 }
-.awsui_utility-type-menu-dropdown_k5dlb_1n64f_323:not(#\9) {
+.awsui_utility-type-menu-dropdown_k5dlb_k9i6n_323:not(#\9) {
   padding-block: 0;
   padding-inline: var(--space-s-4a5hs8, 12px);
   align-items: stretch;
 }
-.awsui_utility-type-menu-dropdown_k5dlb_1n64f_323:not(#\9):not(.awsui_narrow_k5dlb_1n64f_188):last-of-type, .awsui_utility-type-menu-dropdown_k5dlb_1n64f_323:not(#\9):not(.awsui_medium_k5dlb_1n64f_188):last-of-type {
+.awsui_utility-type-menu-dropdown_k5dlb_k9i6n_323:not(#\9):not(.awsui_narrow_k5dlb_k9i6n_188):last-of-type, .awsui_utility-type-menu-dropdown_k5dlb_k9i6n_323:not(#\9):not(.awsui_medium_k5dlb_k9i6n_188):last-of-type {
   padding-inline-end: 0;
 }
-.awsui_utility-type-button-primary-button_k5dlb_1n64f_332:not(#\9) {
+.awsui_utility-type-button-primary-button_k5dlb_k9i6n_332:not(#\9) {
   inset-inline-start: -1px;
   border-inline-start: 1px solid var(--color-background-container-content-aemn43, #ffffff);
 }
-.awsui_utility-type-button-primary-button_k5dlb_1n64f_332:not(#\9)::after {
+.awsui_utility-type-button-primary-button_k5dlb_k9i6n_332:not(#\9)::after {
   display: none;
 }
-.awsui_utility-link-icon_k5dlb_1n64f_340:not(#\9) {
+.awsui_utility-link-icon_k5dlb_k9i6n_340:not(#\9) {
   margin-inline-start: var(--space-xxs-jnczic, 4px);
 }
-.awsui_utility-button-external-icon_k5dlb_1n64f_344:not(#\9) {
+.awsui_utility-button-external-icon_k5dlb_k9i6n_344:not(#\9) {
   display: inline-block;
 }
-.awsui_offset-right-none_k5dlb_1n64f_348:not(#\9) {
+.awsui_offset-right-none_k5dlb_k9i6n_348:not(#\9) {
   margin-inline-end: 0;
 }
-.awsui_offset-right-l_k5dlb_1n64f_352:not(#\9) {
+.awsui_offset-right-l_k5dlb_k9i6n_352:not(#\9) {
   margin-inline-end: var(--space-xxs-jnczic, 4px);
 }
-.awsui_offset-right-xxl_k5dlb_1n64f_356:not(#\9) {
+.awsui_offset-right-xxl_k5dlb_k9i6n_356:not(#\9) {
   margin-inline-end: var(--space-m-n2lypl, 16px);
 }
 /* Overflow Menu */
-.awsui_overflow-menu-drawer_k5dlb_1n64f_361:not(#\9) {
+.awsui_overflow-menu-drawer_k5dlb_k9i6n_361:not(#\9) {
   position: fixed;
   block-size: 100%;
   inline-size: 100%;
   z-index: 1001;
 }
-.awsui_overflow-menu_k5dlb_1n64f_361:not(#\9) {
+.awsui_overflow-menu_k5dlb_k9i6n_361:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -399,22 +399,22 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_1n64f_215 > .awsui_ide
   block-size: 100%;
 }
-.awsui_overflow-menu-header_k5dlb_1n64f_402:not(#\9) {
+.awsui_overflow-menu-header_k5dlb_k9i6n_402:not(#\9) {
   display: flex;
   align-items: center;
   min-block-size: var(--font-panel-header-line-height-z3wpa5, 22px);
   padding-block: var(--space-scaled-m-sw9kcx, 16px);
   padding-inline: var(--space-scaled-m-sw9kcx, 16px);
-  border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-divider-default-ipvpev, #eaeded);
+  border-block-end: var(--border-divider-section-width-dlkb8v, 1px) solid var(--color-border-divider-default-ipvpev, #eaeded);
 }
-.awsui_overflow-menu-header-text_k5dlb_1n64f_410:not(#\9) {
+.awsui_overflow-menu-header-text_k5dlb_k9i6n_410:not(#\9) {
   color: var(--color-text-heading-default-wlau07, #16191f);
   flex: 1;
   margin-block: 0;
   margin-inline: 0;
   text-align: center;
 }
-.awsui_overflow-menu-header-text--title_k5dlb_1n64f_417:not(#\9) {
+.awsui_overflow-menu-header-text--title_k5dlb_k9i6n_417:not(#\9) {
   /* used in test-utils */
   font-size: var(--font-panel-header-size-i1j838, 18px);
   letter-spacing: var(--letter-spacing-heading-m-93y02s, normal);
@@ -423,7 +423,7 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_1n64f_215 > .awsui_ide
   -webkit-font-smoothing: var(--font-smoothing-webkit-px4az4, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
 }
-.awsui_overflow-menu-header-text--secondary_k5dlb_1n64f_426:not(#\9) {
+.awsui_overflow-menu-header-text--secondary_k5dlb_k9i6n_426:not(#\9) {
   font-size: var(--font-header-h2-description-size-t8fx03, 12px);
   line-height: var(--font-header-h2-description-line-height-7ibe40, 16px);
   font-weight: var(--font-weight-normal-7w835s, 400);
@@ -431,15 +431,15 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_1n64f_215 > .awsui_ide
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
 }
-.awsui_overflow-menu-back-button_k5dlb_1n64f_434:not(#\9) {
+.awsui_overflow-menu-back-button_k5dlb_k9i6n_434:not(#\9) {
   /* used in test-utils */
 }
-.awsui_overflow-menu-dismiss-button_k5dlb_1n64f_438:not(#\9) {
+.awsui_overflow-menu-dismiss-button_k5dlb_k9i6n_438:not(#\9) {
   /* used in test-utils */
 }
-.awsui_overflow-menu-control_k5dlb_1n64f_442:not(#\9) {
+.awsui_overflow-menu-control_k5dlb_k9i6n_442:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -477,32 +477,32 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_1n64f_215 > .awsui_ide
   border-block: none;
   border-inline: none;
 }
-.awsui_overflow-menu-list-item-utility_k5dlb_1n64f_480 > .awsui_overflow-menu-control_k5dlb_1n64f_442:not(#\9) {
+.awsui_overflow-menu-list-item-utility_k5dlb_k9i6n_480 > .awsui_overflow-menu-control_k5dlb_k9i6n_442:not(#\9) {
   padding-block: var(--space-scaled-m-sw9kcx, 16px);
   padding-inline: var(--space-scaled-m-sw9kcx, 16px);
 }
-.awsui_overflow-menu-control_k5dlb_1n64f_442:not(#\9):hover {
+.awsui_overflow-menu-control_k5dlb_k9i6n_442:not(#\9):hover {
   color: var(--color-text-accent-rvq171, #0073bb);
   cursor: pointer;
 }
-.awsui_overflow-menu-control-link_k5dlb_1n64f_488:not(#\9) {
+.awsui_overflow-menu-control-link_k5dlb_k9i6n_488:not(#\9) {
   text-decoration: none;
 }
-.awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_1n64f_491:not(#\9) {
+.awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_k9i6n_491:not(#\9) {
   color: var(--color-text-dropdown-group-label-m31yo5, #545b64);
   font-weight: var(--font-weight-bold-p16d06, 700);
 }
-.awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_1n64f_491:not(#\9):hover {
+.awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_k9i6n_491:not(#\9):hover {
   color: var(--color-text-accent-rvq171, #0073bb);
 }
-body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_1n64f_442:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_k9i6n_442:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_1n64f_442:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_k9i6n_442:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-button-focus-outline-gutter-vsdlzg, 3px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_1n64f_442:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_k9i6n_442:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -510,70 +510,70 @@ body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_1n64f_442
   inset-block-start: calc(-1 * var(--space-button-focus-outline-gutter-vsdlzg, 3px));
   inline-size: calc(100% + var(--space-button-focus-outline-gutter-vsdlzg, 3px) + var(--space-button-focus-outline-gutter-vsdlzg, 3px));
   block-size: calc(100% + var(--space-button-focus-outline-gutter-vsdlzg, 3px) + var(--space-button-focus-outline-gutter-vsdlzg, 3px));
-  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);
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-akwhsf, 2px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-akwhsf, 2px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-akwhsf, 2px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-akwhsf, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_overflow-menu-list_k5dlb_1n64f_480:not(#\9) {
+.awsui_overflow-menu-list_k5dlb_k9i6n_480:not(#\9) {
   list-style: none;
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
   padding-inline: 0;
 }
-.awsui_overflow-menu-list-submenu_k5dlb_1n64f_527:not(#\9) {
+.awsui_overflow-menu-list-submenu_k5dlb_k9i6n_527:not(#\9) {
   margin-block: var(--space-scaled-xxs-jatbiv, 4px);
   margin-inline: 0;
 }
-.awsui_overflow-menu-list-item_k5dlb_1n64f_480:not(#\9) {
+.awsui_overflow-menu-list-item_k5dlb_k9i6n_480:not(#\9) {
   box-sizing: border-box;
   letter-spacing: var(--font-button-letter-spacing-9h7rbb, 0.25px);
 }
-.awsui_overflow-menu-list-item-icon_k5dlb_1n64f_536:not(#\9) {
+.awsui_overflow-menu-list-item-icon_k5dlb_k9i6n_536:not(#\9) {
   margin-inline-end: var(--space-xxs-jnczic, 4px);
 }
-.awsui_overflow-menu-list-item-text_k5dlb_1n64f_539:not(#\9) {
+.awsui_overflow-menu-list-item-text_k5dlb_k9i6n_539:not(#\9) {
   flex: 1;
 }
-.awsui_overflow-menu-list-item-utility_k5dlb_1n64f_480:not(#\9) {
+.awsui_overflow-menu-list-item-utility_k5dlb_k9i6n_480:not(#\9) {
   font-weight: var(--font-weight-button-hh0ago, 700);
   -webkit-font-smoothing: var(--font-smoothing-webkit-px4az4, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
-  border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-divider-default-ipvpev, #eaeded);
+  border-block-end: var(--border-divider-section-width-dlkb8v, 1px) solid var(--color-border-divider-default-ipvpev, #eaeded);
 }
-.awsui_overflow-menu-list-item-submenu_k5dlb_1n64f_548:not(#\9) {
-  border-block-start: var(--border-divider-section-width-sznrdy, 1px) solid transparent;
-  border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid transparent;
+.awsui_overflow-menu-list-item-submenu_k5dlb_k9i6n_548:not(#\9) {
+  border-block-start: var(--border-divider-section-width-dlkb8v, 1px) solid transparent;
+  border-block-end: var(--border-divider-section-width-dlkb8v, 1px) solid transparent;
   padding-block: var(--space-scaled-xxs-jatbiv, 4px);
   padding-inline: var(--space-scaled-l-66n9sr, 20px);
 }
-.awsui_overflow-menu-list-item-dropdown-menu_k5dlb_1n64f_554:not(#\9) {
+.awsui_overflow-menu-list-item-dropdown-menu_k5dlb_k9i6n_554:not(#\9) {
   padding-block: var(--space-scaled-xxs-jatbiv, 4px);
   padding-inline: var(--space-scaled-s-gjhvjd, 12px);
 }
-.awsui_overflow-menu-list-item-expandable_k5dlb_1n64f_558:not(#\9) {
+.awsui_overflow-menu-list-item-expandable_k5dlb_k9i6n_558:not(#\9) {
   border-block-start-color: var(--color-border-divider-default-ipvpev, #eaeded);
   border-block-end-color: var(--color-border-divider-default-ipvpev, #eaeded);
 }
-.awsui_icon_k5dlb_1n64f_563:not(#\9) {
+.awsui_icon_k5dlb_k9i6n_563:not(#\9) {
   transform: rotate(0deg);
   transition: transform var(--motion-duration-rotate-180-4er9qu, 135ms) var(--motion-easing-rotate-180-xlspcm, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_icon_k5dlb_1n64f_563:not(#\9) {
+  .awsui_icon_k5dlb_k9i6n_563:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_icon_k5dlb_1n64f_563:not(#\9), .awsui-mode-entering .awsui_icon_k5dlb_1n64f_563:not(#\9) {
+.awsui-motion-disabled .awsui_icon_k5dlb_k9i6n_563:not(#\9), .awsui-mode-entering .awsui_icon_k5dlb_k9i6n_563:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_icon-open_k5dlb_1n64f_577:not(#\9) {
+.awsui_icon-open_k5dlb_k9i6n_577:not(#\9) {
   transform: rotate(-180deg);
 }

package/lib/internal/template/top-navigation/styles.selectors.js CHANGED Viewed

@@ -2,52 +2,52 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "top-navigation": "awsui_top-navigation_k5dlb_1n64f_145",
-  "padding-box": "awsui_padding-box_k5dlb_1n64f_178",
-  "medium": "awsui_medium_k5dlb_1n64f_188",
-  "narrow": "awsui_narrow_k5dlb_1n64f_188",
-  "virtual": "awsui_virtual_k5dlb_1n64f_199",
-  "hidden": "awsui_hidden_k5dlb_1n64f_203",
-  "\t": "awsui_\t_k5dlb_1n64f_1",
-  "identity": "awsui_identity_k5dlb_1n64f_215",
-  "identity-link": "awsui_identity-link_k5dlb_1n64f_218",
-  "no-logo": "awsui_no-logo_k5dlb_1n64f_238",
-  "logo": "awsui_logo_k5dlb_1n64f_242",
-  "title": "awsui_title_k5dlb_1n64f_254",
-  "inputs": "awsui_inputs_k5dlb_1n64f_270",
-  "search": "awsui_search_k5dlb_1n64f_278",
-  "search-expanded": "awsui_search-expanded_k5dlb_1n64f_282",
-  "utilities": "awsui_utilities_k5dlb_1n64f_286",
-  "utility-wrapper": "awsui_utility-wrapper_k5dlb_1n64f_297",
-  "utility-type-button-link": "awsui_utility-type-button-link_k5dlb_1n64f_318",
-  "utility-type-menu-dropdown": "awsui_utility-type-menu-dropdown_k5dlb_1n64f_323",
-  "utility-type-button-primary-button": "awsui_utility-type-button-primary-button_k5dlb_1n64f_332",
-  "utility-link-icon": "awsui_utility-link-icon_k5dlb_1n64f_340",
-  "utility-button-external-icon": "awsui_utility-button-external-icon_k5dlb_1n64f_344",
-  "offset-right-none": "awsui_offset-right-none_k5dlb_1n64f_348",
-  "offset-right-l": "awsui_offset-right-l_k5dlb_1n64f_352",
-  "offset-right-xxl": "awsui_offset-right-xxl_k5dlb_1n64f_356",
-  "overflow-menu-drawer": "awsui_overflow-menu-drawer_k5dlb_1n64f_361",
-  "overflow-menu": "awsui_overflow-menu_k5dlb_1n64f_361",
-  "overflow-menu-header": "awsui_overflow-menu-header_k5dlb_1n64f_402",
-  "overflow-menu-header-text": "awsui_overflow-menu-header-text_k5dlb_1n64f_410",
-  "overflow-menu-header-text--title": "awsui_overflow-menu-header-text--title_k5dlb_1n64f_417",
-  "overflow-menu-header-text--secondary": "awsui_overflow-menu-header-text--secondary_k5dlb_1n64f_426",
-  "overflow-menu-back-button": "awsui_overflow-menu-back-button_k5dlb_1n64f_434",
-  "overflow-menu-dismiss-button": "awsui_overflow-menu-dismiss-button_k5dlb_1n64f_438",
-  "overflow-menu-control": "awsui_overflow-menu-control_k5dlb_1n64f_442",
-  "overflow-menu-list-item-utility": "awsui_overflow-menu-list-item-utility_k5dlb_1n64f_480",
-  "overflow-menu-control-link": "awsui_overflow-menu-control-link_k5dlb_1n64f_488",
-  "overflow-menu-control-expandable-menu-trigger": "awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_1n64f_491",
-  "overflow-menu-list": "awsui_overflow-menu-list_k5dlb_1n64f_480",
-  "overflow-menu-list-submenu": "awsui_overflow-menu-list-submenu_k5dlb_1n64f_527",
-  "overflow-menu-list-item": "awsui_overflow-menu-list-item_k5dlb_1n64f_480",
-  "overflow-menu-list-item-icon": "awsui_overflow-menu-list-item-icon_k5dlb_1n64f_536",
-  "overflow-menu-list-item-text": "awsui_overflow-menu-list-item-text_k5dlb_1n64f_539",
-  "overflow-menu-list-item-submenu": "awsui_overflow-menu-list-item-submenu_k5dlb_1n64f_548",
-  "overflow-menu-list-item-dropdown-menu": "awsui_overflow-menu-list-item-dropdown-menu_k5dlb_1n64f_554",
-  "overflow-menu-list-item-expandable": "awsui_overflow-menu-list-item-expandable_k5dlb_1n64f_558",
-  "icon": "awsui_icon_k5dlb_1n64f_563",
-  "icon-open": "awsui_icon-open_k5dlb_1n64f_577"
+  "top-navigation": "awsui_top-navigation_k5dlb_k9i6n_145",
+  "padding-box": "awsui_padding-box_k5dlb_k9i6n_178",
+  "medium": "awsui_medium_k5dlb_k9i6n_188",
+  "narrow": "awsui_narrow_k5dlb_k9i6n_188",
+  "virtual": "awsui_virtual_k5dlb_k9i6n_199",
+  "hidden": "awsui_hidden_k5dlb_k9i6n_203",
+  "\t": "awsui_\t_k5dlb_k9i6n_1",
+  "identity": "awsui_identity_k5dlb_k9i6n_215",
+  "identity-link": "awsui_identity-link_k5dlb_k9i6n_218",
+  "no-logo": "awsui_no-logo_k5dlb_k9i6n_238",
+  "logo": "awsui_logo_k5dlb_k9i6n_242",
+  "title": "awsui_title_k5dlb_k9i6n_254",
+  "inputs": "awsui_inputs_k5dlb_k9i6n_270",
+  "search": "awsui_search_k5dlb_k9i6n_278",
+  "search-expanded": "awsui_search-expanded_k5dlb_k9i6n_282",
+  "utilities": "awsui_utilities_k5dlb_k9i6n_286",
+  "utility-wrapper": "awsui_utility-wrapper_k5dlb_k9i6n_297",
+  "utility-type-button-link": "awsui_utility-type-button-link_k5dlb_k9i6n_318",
+  "utility-type-menu-dropdown": "awsui_utility-type-menu-dropdown_k5dlb_k9i6n_323",
+  "utility-type-button-primary-button": "awsui_utility-type-button-primary-button_k5dlb_k9i6n_332",
+  "utility-link-icon": "awsui_utility-link-icon_k5dlb_k9i6n_340",
+  "utility-button-external-icon": "awsui_utility-button-external-icon_k5dlb_k9i6n_344",
+  "offset-right-none": "awsui_offset-right-none_k5dlb_k9i6n_348",
+  "offset-right-l": "awsui_offset-right-l_k5dlb_k9i6n_352",
+  "offset-right-xxl": "awsui_offset-right-xxl_k5dlb_k9i6n_356",
+  "overflow-menu-drawer": "awsui_overflow-menu-drawer_k5dlb_k9i6n_361",
+  "overflow-menu": "awsui_overflow-menu_k5dlb_k9i6n_361",
+  "overflow-menu-header": "awsui_overflow-menu-header_k5dlb_k9i6n_402",
+  "overflow-menu-header-text": "awsui_overflow-menu-header-text_k5dlb_k9i6n_410",
+  "overflow-menu-header-text--title": "awsui_overflow-menu-header-text--title_k5dlb_k9i6n_417",
+  "overflow-menu-header-text--secondary": "awsui_overflow-menu-header-text--secondary_k5dlb_k9i6n_426",
+  "overflow-menu-back-button": "awsui_overflow-menu-back-button_k5dlb_k9i6n_434",
+  "overflow-menu-dismiss-button": "awsui_overflow-menu-dismiss-button_k5dlb_k9i6n_438",
+  "overflow-menu-control": "awsui_overflow-menu-control_k5dlb_k9i6n_442",
+  "overflow-menu-list-item-utility": "awsui_overflow-menu-list-item-utility_k5dlb_k9i6n_480",
+  "overflow-menu-control-link": "awsui_overflow-menu-control-link_k5dlb_k9i6n_488",
+  "overflow-menu-control-expandable-menu-trigger": "awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_k9i6n_491",
+  "overflow-menu-list": "awsui_overflow-menu-list_k5dlb_k9i6n_480",
+  "overflow-menu-list-submenu": "awsui_overflow-menu-list-submenu_k5dlb_k9i6n_527",
+  "overflow-menu-list-item": "awsui_overflow-menu-list-item_k5dlb_k9i6n_480",
+  "overflow-menu-list-item-icon": "awsui_overflow-menu-list-item-icon_k5dlb_k9i6n_536",
+  "overflow-menu-list-item-text": "awsui_overflow-menu-list-item-text_k5dlb_k9i6n_539",
+  "overflow-menu-list-item-submenu": "awsui_overflow-menu-list-item-submenu_k5dlb_k9i6n_548",
+  "overflow-menu-list-item-dropdown-menu": "awsui_overflow-menu-list-item-dropdown-menu_k5dlb_k9i6n_554",
+  "overflow-menu-list-item-expandable": "awsui_overflow-menu-list-item-expandable_k5dlb_k9i6n_558",
+  "icon": "awsui_icon_k5dlb_k9i6n_563",
+  "icon-open": "awsui_icon-open_k5dlb_k9i6n_577"
 };

package/lib/internal/template/tree-view/tree-item/index.js CHANGED Viewed

@@ -30,7 +30,7 @@ const InternalTreeItem = ({ item, index, level, i18nStrings, expandedItems = [],
             ? content
             : '';
     return (React.createElement("li", { role: "treeitem", id: id, className: clsx(styles.treeitem, testUtilStyles.treeitem, level > 1 && styles.offset, isExpandable && [testUtilStyles.expandable], isExpanded && [testUtilStyles.expanded]), "aria-expanded": isExpandable ? isExpanded : undefined, "aria-level": level, "data-testid": `awsui-treeitem-${id}`, "data-awsui-tree-item-index": allVisibleItemsIndices[id] },
-        React.createElement("div", { className: clsx(styles['treeitem-content-wrapper']) },
+        React.createElement("div", { className: clsx(styles['treeitem-content-wrapper'], icon && styles['with-icon']) },
             React.createElement("div", { className: styles['expand-toggle-wrapper'] },
                 React.createElement("div", { className: styles.toggle }, isExpandable ? (React.createElement(ExpandToggleButton, { isExpanded: isExpanded, customIcon: customIcon, expandButtonLabel: joinStrings(i18n('i18nStrings.expandButtonLabel', (_a = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.expandButtonLabel) === null || _a === void 0 ? void 0 : _a.call(i18nStrings, item)), itemLabelToAnnounce), collapseButtonLabel: joinStrings(i18n('i18nStrings.collapseButtonLabel', (_b = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.collapseButtonLabel) === null || _b === void 0 ? void 0 : _b.call(i18nStrings, item)), itemLabelToAnnounce), onExpandableItemToggle: () => onItemToggle({ id, item, expanded: !isExpanded }), className: styles['tree-item-focus-target'], disableFocusHighlight: true })) : (React.createElement(FocusTarget, { ariaLabel: itemLabelToAnnounce })))),
             showVerticalConnectorLines && React.createElement(VerticalConnector, { variant: "grid" }),

package/lib/internal/template/tree-view/tree-item/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/tree-view/tree-item/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AACpF,OAAO,sBAAsB,MAAM,2CAA2C,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAE3D,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AACtD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAsBrC,MAAM,gBAAgB,GAAG,CAAK,EAC5B,IAAI,EACJ,KAAK,EACL,KAAK,EACL,WAAW,EACX,aAAa,GAAG,EAAE,EAClB,cAAc,EACd,oBAAoB,EACpB,UAAU,EACV,SAAS,EACT,eAAe,EACf,YAAY,EACZ,sBAAsB,GACG,EAAE,EAAE;;IAC7B,MAAM,IAAI,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;IAE1C,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,iBAAiB,EAAE,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAChG,MAAM,EAAE,GAAG,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAClC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;IACpD,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IACzC,MAAM,UAAU,GAAG,YAAY,IAAI,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC9D,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;IAE5B,MAAM,0BAA0B,GAAG,cAAc,KAAK,UAAU,IAAI,UAAU,CAAC;IAE/E,IAAI,UAAU,GAAgC,SAAS,CAAC;IACxD,IAAI,YAAY,IAAI,oBAAoB,EAAE,CAAC;QACzC,UAAU,GAAG,oBAAoB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC;IAC9D,CAAC;IAED,MAAM,mBAAmB,GAAG,iBAAiB;QAC3C,CAAC,CAAC,iBAAiB;QACnB,CAAC,CAAC,OAAO,OAAO,KAAK,QAAQ;YAC3B,CAAC,CAAE,OAAkB;YACrB,CAAC,CAAC,EAAE,CAAC;IAET,OAAO,CACL,4BACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,QAAQ,EACf,cAAc,CAAC,QAAQ,EACvB,KAAK,GAAG,CAAC,IAAI,MAAM,CAAC,MAAM,EAC1B,YAAY,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,EAC3C,UAAU,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CACxC,mBACc,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,gBACxC,KAAK,iBACJ,kBAAkB,EAAE,EAAE,gCACP,sBAAsB,CAAC,EAAE,CAAC;QAEtD,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC;~~YACtD~~,6BAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC;gBAC7C,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAC1B,YAAY,CAAC,CAAC,CAAC,CACd,oBAAC,kBAAkB,IACjB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,WAAW,CAC5B,IAAI,CAAC,+BAA+B,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,4DAAG,IAAI,CAAC,CAAC,EAC7E,mBAAmB,CACpB,EACD,mBAAmB,EAAE,WAAW,CAC9B,IAAI,CAAC,iCAAiC,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,4DAAG,IAAI,CAAC,CAAC,EACjF,mBAAmB,CACpB,EACD,sBAAsB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,UAAU,EAAE,CAAC,EAC/E,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC,EAC3C,qBAAqB,EAAE,IAAI,GAC3B,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,WAAW,IAAC,SAAS,EAAE,mBAAmB,GAAI,CAChD,CACG,CACF;YAEL,0BAA0B,IAAI,oBAAC,iBAAiB,IAAC,OAAO,EAAC,MAAM,GAAG;YAEnE,6BAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC;gBAC/C,oBAAC,sBAAsB,IACrB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,KAAK,EAClB,SAAS,EAAE,MAAM,CAAC,2BAA2B,CAAC,GAC9C,CACE,CACF;QAEL,UAAU,IAAI,QAAQ,CAAC,MAAM,IAAI,CAChC,4BAAI,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;YACjD,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBAC7B,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;gBACvC,OAAO,CACL,oBAAC,gBAAgB,IACf,IAAI,EAAE,KAAK,EACX,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,oBAAoB,EAAE,oBAAoB,EAC1C,sBAAsB,EAAE,sBAAsB,EAC9C,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC;YACJ,CAAC,CAAC;YAED,0BAA0B,IAAI,oBAAC,iBAAiB,IAAC,OAAO,EAAC,UAAU,GAAG,CACpE,CACN,CACE,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../../i18n/context';\nimport { ExpandToggleButton } from '../../internal/components/expand-toggle-button';\nimport InternalStructuredItem from '../../internal/components/structured-item';\nimport { joinStrings } from '../../internal/utils/strings';\nimport { TreeViewProps } from '../interfaces';\nimport VerticalConnector from '../vertical-connector';\nimport FocusTarget from './focus-target';\n\nimport testUtilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface InternalTreeItemProps<T>\n extends Pick<\n TreeViewProps,\n \| 'expandedItems'\n \| 'renderItem'\n \| 'getItemId'\n \| 'getItemChildren'\n \| 'renderItemToggleIcon'\n \| 'i18nStrings'\n \| 'connectorLines'\n > {\n item: T;\n index: number;\n level: number;\n onItemToggle: (detail: TreeViewProps.ItemToggleDetail<T>) => void;\n allVisibleItemsIndices: {\n [key: string]: number;\n };\n}\n\nconst InternalTreeItem = <T,>({\n item,\n index,\n level,\n i18nStrings,\n expandedItems = [],\n connectorLines,\n renderItemToggleIcon,\n renderItem,\n getItemId,\n getItemChildren,\n onItemToggle,\n allVisibleItemsIndices,\n}: InternalTreeItemProps<T>) => {\n const i18n = useInternalI18n('tree-view');\n\n const { icon, content, secondaryContent, actions, announcementLabel } = renderItem(item, index);\n const id = getItemId(item, index);\n const children = getItemChildren(item, index) \|\| [];\n const isExpandable = children.length > 0;\n const isExpanded = isExpandable && expandedItems.includes(id);\n const nextLevel = level + 1;\n\n const showVerticalConnectorLines = connectorLines === 'vertical' && isExpanded;\n\n let customIcon: React.ReactNode \| undefined = undefined;\n if (isExpandable && renderItemToggleIcon) {\n customIcon = renderItemToggleIcon({ expanded: isExpanded });\n }\n\n const itemLabelToAnnounce = announcementLabel\n ? announcementLabel\n : typeof content === 'string'\n ? (content as string)\n : '';\n\n return (\n <li\n role=\"treeitem\"\n id={id}\n className={clsx(\n styles.treeitem,\n testUtilStyles.treeitem,\n level > 1 && styles.offset,\n isExpandable && [testUtilStyles.expandable],\n isExpanded && [testUtilStyles.expanded]\n )}\n aria-expanded={isExpandable ? isExpanded : undefined}\n aria-level={level}\n data-testid={`awsui-treeitem-${id}`}\n data-awsui-tree-item-index={allVisibleItemsIndices[id]}\n >\n <div className={clsx(styles['treeitem-content-wrapper'])}>\n <div className={styles['expand-toggle-wrapper']}>\n <div className={styles.toggle}>\n {isExpandable ? (\n <ExpandToggleButton\n isExpanded={isExpanded}\n customIcon={customIcon}\n expandButtonLabel={joinStrings(\n i18n('i18nStrings.expandButtonLabel', i18nStrings?.expandButtonLabel?.(item)),\n itemLabelToAnnounce\n )}\n collapseButtonLabel={joinStrings(\n i18n('i18nStrings.collapseButtonLabel', i18nStrings?.collapseButtonLabel?.(item)),\n itemLabelToAnnounce\n )}\n onExpandableItemToggle={() => onItemToggle({ id, item, expanded: !isExpanded })}\n className={styles['tree-item-focus-target']}\n disableFocusHighlight={true}\n />\n ) : (\n <FocusTarget ariaLabel={itemLabelToAnnounce} />\n )}\n </div>\n </div>\n\n {showVerticalConnectorLines && <VerticalConnector variant=\"grid\" />}\n\n <div className={styles['structured-item-wrapper']}>\n <InternalStructuredItem\n icon={icon}\n content={content}\n secondaryContent={secondaryContent}\n actions={actions}\n wrapActions={false}\n className={styles['tree-item-structured-item']}\n />\n </div>\n </div>\n\n {isExpanded && children.length && (\n <ul role=\"group\" className={styles['treeitem-group']}>\n {children.map((child, index) => {\n const itemId = getItemId(child, index);\n return (\n <InternalTreeItem<T>\n item={child}\n index={index}\n key={itemId}\n level={nextLevel}\n expandedItems={expandedItems}\n i18nStrings={i18nStrings}\n onItemToggle={onItemToggle}\n renderItem={renderItem}\n getItemId={getItemId}\n getItemChildren={getItemChildren}\n renderItemToggleIcon={renderItemToggleIcon}\n allVisibleItemsIndices={allVisibleItemsIndices}\n connectorLines={connectorLines}\n />\n );\n })}\n\n {showVerticalConnectorLines && <VerticalConnector variant=\"absolute\" />}\n </ul>\n )}\n </li>\n );\n};\n\nexport default InternalTreeItem;\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/tree-view/tree-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 from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../../i18n/context';\nimport { ExpandToggleButton } from '../../internal/components/expand-toggle-button';\nimport InternalStructuredItem from '../../internal/components/structured-item';\nimport { joinStrings } from '../../internal/utils/strings';\nimport { TreeViewProps } from '../interfaces';\nimport VerticalConnector from '../vertical-connector';\nimport FocusTarget from './focus-target';\n\nimport testUtilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface InternalTreeItemProps<T>\n extends Pick<\n TreeViewProps,\n \| 'expandedItems'\n \| 'renderItem'\n \| 'getItemId'\n \| 'getItemChildren'\n \| 'renderItemToggleIcon'\n \| 'i18nStrings'\n \| 'connectorLines'\n > {\n item: T;\n index: number;\n level: number;\n onItemToggle: (detail: TreeViewProps.ItemToggleDetail<T>) => void;\n allVisibleItemsIndices: {\n [key: string]: number;\n };\n}\n\nconst InternalTreeItem = <T,>({\n item,\n index,\n level,\n i18nStrings,\n expandedItems = [],\n connectorLines,\n renderItemToggleIcon,\n renderItem,\n getItemId,\n getItemChildren,\n onItemToggle,\n allVisibleItemsIndices,\n}: InternalTreeItemProps<T>) => {\n const i18n = useInternalI18n('tree-view');\n\n const { icon, content, secondaryContent, actions, announcementLabel } = renderItem(item, index);\n const id = getItemId(item, index);\n const children = getItemChildren(item, index) \|\| [];\n const isExpandable = children.length > 0;\n const isExpanded = isExpandable && expandedItems.includes(id);\n const nextLevel = level + 1;\n\n const showVerticalConnectorLines = connectorLines === 'vertical' && isExpanded;\n\n let customIcon: React.ReactNode \| undefined = undefined;\n if (isExpandable && renderItemToggleIcon) {\n customIcon = renderItemToggleIcon({ expanded: isExpanded });\n }\n\n const itemLabelToAnnounce = announcementLabel\n ? announcementLabel\n : typeof content === 'string'\n ? (content as string)\n : '';\n\n return (\n <li\n role=\"treeitem\"\n id={id}\n className={clsx(\n styles.treeitem,\n testUtilStyles.treeitem,\n level > 1 && styles.offset,\n isExpandable && [testUtilStyles.expandable],\n isExpanded && [testUtilStyles.expanded]\n )}\n aria-expanded={isExpandable ? isExpanded : undefined}\n aria-level={level}\n data-testid={`awsui-treeitem-${id}`}\n data-awsui-tree-item-index={allVisibleItemsIndices[id]}\n >\n <div className={clsx(styles['treeitem-content-wrapper'], icon && styles['with-icon'])}>\n <div className={styles['expand-toggle-wrapper']}>\n <div className={styles.toggle}>\n {isExpandable ? (\n <ExpandToggleButton\n isExpanded={isExpanded}\n customIcon={customIcon}\n expandButtonLabel={joinStrings(\n i18n('i18nStrings.expandButtonLabel', i18nStrings?.expandButtonLabel?.(item)),\n itemLabelToAnnounce\n )}\n collapseButtonLabel={joinStrings(\n i18n('i18nStrings.collapseButtonLabel', i18nStrings?.collapseButtonLabel?.(item)),\n itemLabelToAnnounce\n )}\n onExpandableItemToggle={() => onItemToggle({ id, item, expanded: !isExpanded })}\n className={styles['tree-item-focus-target']}\n disableFocusHighlight={true}\n />\n ) : (\n <FocusTarget ariaLabel={itemLabelToAnnounce} />\n )}\n </div>\n </div>\n\n {showVerticalConnectorLines && <VerticalConnector variant=\"grid\" />}\n\n <div className={styles['structured-item-wrapper']}>\n <InternalStructuredItem\n icon={icon}\n content={content}\n secondaryContent={secondaryContent}\n actions={actions}\n wrapActions={false}\n className={styles['tree-item-structured-item']}\n />\n </div>\n </div>\n\n {isExpanded && children.length && (\n <ul role=\"group\" className={styles['treeitem-group']}>\n {children.map((child, index) => {\n const itemId = getItemId(child, index);\n return (\n <InternalTreeItem<T>\n item={child}\n index={index}\n key={itemId}\n level={nextLevel}\n expandedItems={expandedItems}\n i18nStrings={i18nStrings}\n onItemToggle={onItemToggle}\n renderItem={renderItem}\n getItemId={getItemId}\n getItemChildren={getItemChildren}\n renderItemToggleIcon={renderItemToggleIcon}\n allVisibleItemsIndices={allVisibleItemsIndices}\n connectorLines={connectorLines}\n />\n );\n })}\n\n {showVerticalConnectorLines && <VerticalConnector variant=\"absolute\" />}\n </ul>\n )}\n </li>\n );\n};\n\nexport default InternalTreeItem;\n"]}

package/lib/internal/template/tree-view/tree-item/styles.css.js CHANGED Viewed

@@ -1,14 +1,15 @@
     import './styles.scoped.css';
     export default {
-  "treeitem-group": "awsui_treeitem-group_1agpu_1cr4z_189",
-  "treeitem": "awsui_treeitem_1agpu_1cr4z_189",
-  "offset": "awsui_offset_1agpu_1cr4z_206",
-  "treeitem-content-wrapper": "awsui_treeitem-content-wrapper_1agpu_1cr4z_209",
-  "tree-item-focus-target": "awsui_tree-item-focus-target_1agpu_1cr4z_214",
-  "expand-toggle-wrapper": "awsui_expand-toggle-wrapper_1agpu_1cr4z_235",
-  "toggle": "awsui_toggle_1agpu_1cr4z_240",
-  "structured-item-wrapper": "awsui_structured-item-wrapper_1agpu_1cr4z_253",
-  "tree-item-structured-item": "awsui_tree-item-structured-item_1agpu_1cr4z_260"
+  "treeitem-group": "awsui_treeitem-group_1agpu_1j7qz_189",
+  "treeitem": "awsui_treeitem_1agpu_1j7qz_189",
+  "offset": "awsui_offset_1agpu_1j7qz_206",
+  "treeitem-content-wrapper": "awsui_treeitem-content-wrapper_1agpu_1j7qz_209",
+  "tree-item-focus-target": "awsui_tree-item-focus-target_1agpu_1j7qz_214",
+  "expand-toggle-wrapper": "awsui_expand-toggle-wrapper_1agpu_1j7qz_235",
+  "toggle": "awsui_toggle_1agpu_1j7qz_240",
+  "with-icon": "awsui_with-icon_1agpu_1j7qz_253",
+  "structured-item-wrapper": "awsui_structured-item-wrapper_1agpu_1j7qz_259",
+  "tree-item-structured-item": "awsui_tree-item-structured-item_1agpu_1j7qz_266"
 };