@cloudscape-design/components-themeable 3.0.852 → 3.0.854

package/lib/internal/template/expandable-section/styles.scoped.css

@@ -136,6 +136,10 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
 /* 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 */
 /*
@@ -154,10 +158,10 @@ 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_content-enter_gwq0h_nmm9x_157:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_gwq0h_nmm9x_1 var(--motion-duration-show-paced-kxd6k3, 180ms) var(--motion-easing-show-paced-2zwyek, ease-out);
+.awsui_content-enter_gwq0h_1nktc_161:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_gwq0h_1nktc_1 var(--motion-duration-show-paced-kxd6k3, 180ms) var(--motion-easing-show-paced-2zwyek, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_gwq0h_nmm9x_1 {
+@keyframes awsui_awsui-motion-fade-in_gwq0h_1nktc_1 {
   from {
     opacity: 0.2;
   }
@@ -166,45 +170,45 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_content-enter_gwq0h_nmm9x_157:not(#\9) {
+  .awsui_content-enter_gwq0h_1nktc_161:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_content-enter_gwq0h_nmm9x_157:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_nmm9x_157:not(#\9) {
+.awsui-motion-disabled .awsui_content-enter_gwq0h_1nktc_161:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_1nktc_161:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_trigger-expanded_gwq0h_nmm9x_179:not(#\9) {
+.awsui_trigger-expanded_gwq0h_1nktc_183:not(#\9) {
   transition: border-bottom-color var(--motion-duration-show-paced-kxd6k3, 180ms) var(--motion-easing-show-paced-2zwyek, ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_trigger-expanded_gwq0h_nmm9x_179:not(#\9) {
+  .awsui_trigger-expanded_gwq0h_1nktc_183:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_nmm9x_179:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_nmm9x_179:not(#\9) {
+.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_1nktc_183:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_1nktc_183:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_icon_gwq0h_nmm9x_193:not(#\9) {
+.awsui_icon_gwq0h_1nktc_197:not(#\9) {
   transition: transform var(--motion-duration-rotate-90-bpnkq9, 135ms) var(--motion-easing-rotate-90-c61wiy, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_icon_gwq0h_nmm9x_193:not(#\9) {
+  .awsui_icon_gwq0h_1nktc_197:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_icon_gwq0h_nmm9x_193:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_nmm9x_193:not(#\9) {
+.awsui-motion-disabled .awsui_icon_gwq0h_1nktc_197:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_1nktc_197:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_gwq0h_nmm9x_207:not(#\9) {
+.awsui_root_gwq0h_1nktc_211:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -240,33 +244,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: block;
 }
 
-.awsui_expand-button_gwq0h_nmm9x_242:not(#\9) {
+.awsui_expand-button_gwq0h_1nktc_246:not(#\9) {
   outline: none;
 }
 
-.awsui_icon_gwq0h_nmm9x_193:not(#\9) {
+.awsui_icon_gwq0h_1nktc_197:not(#\9) {
   transform: rotate(-90deg);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_icon_gwq0h_nmm9x_193.awsui_expanded_gwq0h_nmm9x_250:not(#\9) {
+.awsui_icon_gwq0h_1nktc_197.awsui_expanded_gwq0h_1nktc_254:not(#\9) {
   transform: rotate(0deg);
 }
-.awsui_icon_gwq0h_nmm9x_193:not(#\9):dir(rtl) {
+.awsui_icon_gwq0h_1nktc_197:not(#\9):dir(rtl) {
   transform: rotate(90deg);
 }
-.awsui_icon_gwq0h_nmm9x_193:not(#\9):dir(rtl).awsui_expanded_gwq0h_nmm9x_250 {
+.awsui_icon_gwq0h_1nktc_197:not(#\9):dir(rtl).awsui_expanded_gwq0h_1nktc_254 {
   transform: rotate(0deg);
 }
 
-.awsui_icon-container_gwq0h_nmm9x_260:not(#\9) {
+.awsui_icon-container_gwq0h_1nktc_264:not(#\9) {
   position: relative;
   margin-inline: calc((var(--line-height-body-m-gw0130, 22px) - var(--size-icon-normal-19036g, 16px)) / -2) calc(var(--space-xxs-y2432o, 4px) + var(--border-divider-list-width-x6rz7e, 1px));
 }
-.awsui_icon-container-container_gwq0h_nmm9x_264:not(#\9) {
+.awsui_icon-container-container_gwq0h_1nktc_268:not(#\9) {
   margin-inline-end: var(--space-xs-6dgkww, 8px);
 }
 
-.awsui_wrapper_gwq0h_nmm9x_268:not(#\9) {
+.awsui_wrapper_gwq0h_1nktc_272:not(#\9) {
   box-sizing: border-box;
   border-block: none;
   border-inline: none;
@@ -274,78 +278,78 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   line-height: var(--line-height-body-m-gw0130, 22px);
   text-align: start;
 }
-.awsui_wrapper-default_gwq0h_nmm9x_276:not(#\9), .awsui_wrapper-inline_gwq0h_nmm9x_276:not(#\9), .awsui_wrapper-footer_gwq0h_nmm9x_276:not(#\9) {
+.awsui_wrapper-default_gwq0h_1nktc_280:not(#\9), .awsui_wrapper-inline_gwq0h_1nktc_280:not(#\9), .awsui_wrapper-footer_gwq0h_1nktc_280:not(#\9) {
   border-block: var(--border-divider-section-width-iueskx, 1px) solid transparent;
   border-inline: var(--border-divider-section-width-iueskx, 1px) solid transparent;
 }
-.awsui_wrapper-navigation_gwq0h_nmm9x_280:not(#\9) {
+.awsui_wrapper-navigation_gwq0h_1nktc_284:not(#\9) {
   border-inline-start: var(--border-divider-section-width-iueskx, 1px) solid transparent;
 }
-.awsui_wrapper-navigation_gwq0h_nmm9x_280:not(#\9), .awsui_wrapper-container_gwq0h_nmm9x_283:not(#\9) {
+.awsui_wrapper-navigation_gwq0h_1nktc_284:not(#\9), .awsui_wrapper-container_gwq0h_1nktc_287:not(#\9) {
   display: flex;
   font-weight: var(--font-weight-heading-s-zyfn4j, 700);
 }
-.awsui_wrapper-default_gwq0h_nmm9x_276:not(#\9), .awsui_wrapper-inline_gwq0h_nmm9x_276:not(#\9), .awsui_wrapper-navigation_gwq0h_nmm9x_280:not(#\9), .awsui_wrapper-footer_gwq0h_nmm9x_276:not(#\9), .awsui_wrapper-compact_gwq0h_nmm9x_287:not(#\9) {
+.awsui_wrapper-default_gwq0h_1nktc_280:not(#\9), .awsui_wrapper-inline_gwq0h_1nktc_280:not(#\9), .awsui_wrapper-navigation_gwq0h_1nktc_284:not(#\9), .awsui_wrapper-footer_gwq0h_1nktc_280:not(#\9), .awsui_wrapper-compact_gwq0h_1nktc_291:not(#\9) {
   color: var(--color-text-expandable-section-default-vicj65, #545b64);
   -webkit-font-smoothing: var(--font-smoothing-webkit-trr1e8, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hyxkxc, auto);
 }
-.awsui_wrapper-default_gwq0h_nmm9x_276:not(#\9), .awsui_wrapper-inline_gwq0h_nmm9x_276:not(#\9), .awsui_wrapper-navigation_gwq0h_nmm9x_280:not(#\9), .awsui_wrapper-footer_gwq0h_nmm9x_276:not(#\9) {
+.awsui_wrapper-default_gwq0h_1nktc_280:not(#\9), .awsui_wrapper-inline_gwq0h_1nktc_280:not(#\9), .awsui_wrapper-navigation_gwq0h_1nktc_284:not(#\9), .awsui_wrapper-footer_gwq0h_1nktc_280:not(#\9) {
   font-size: var(--font-expandable-heading-size-1w0ot0, 14px);
   letter-spacing: var(--letter-spacing-heading-s-zr7975, normal);
 }
-.awsui_wrapper-default_gwq0h_nmm9x_276:not(#\9) {
+.awsui_wrapper-default_gwq0h_1nktc_280:not(#\9) {
   padding-block: var(--space-scaled-xxs-krq5fq, 4px);
   padding-inline-end: var(--space-xxs-y2432o, 4px);
 }
-.awsui_wrapper-default_gwq0h_nmm9x_276.awsui_header-deprecated_gwq0h_nmm9x_300:not(#\9) {
+.awsui_wrapper-default_gwq0h_1nktc_280.awsui_header-deprecated_gwq0h_1nktc_304:not(#\9) {
   padding-inline-start: var(--space-xxs-y2432o, 4px);
 }
-.awsui_wrapper-default_gwq0h_nmm9x_276:not(#\9):not(.awsui_header-deprecated_gwq0h_nmm9x_300), .awsui_wrapper-inline_gwq0h_nmm9x_276:not(#\9):not(.awsui_header-deprecated_gwq0h_nmm9x_300) {
+.awsui_wrapper-default_gwq0h_1nktc_280:not(#\9):not(.awsui_header-deprecated_gwq0h_1nktc_304), .awsui_wrapper-inline_gwq0h_1nktc_280:not(#\9):not(.awsui_header-deprecated_gwq0h_1nktc_304) {
   padding-inline-start: calc(var(--size-icon-normal-19036g, 16px) + (var(--line-height-body-m-gw0130, 22px) - var(--size-icon-normal-19036g, 16px)) / -2 + var(--space-xxs-y2432o, 4px) + var(--border-divider-list-width-x6rz7e, 1px));
 }
-.awsui_wrapper-default_gwq0h_nmm9x_276.awsui_wrapper-expanded_gwq0h_nmm9x_306:not(#\9), .awsui_wrapper-inline_gwq0h_nmm9x_276.awsui_wrapper-expanded_gwq0h_nmm9x_306:not(#\9) {
+.awsui_wrapper-default_gwq0h_1nktc_280.awsui_wrapper-expanded_gwq0h_1nktc_310:not(#\9), .awsui_wrapper-inline_gwq0h_1nktc_280.awsui_wrapper-expanded_gwq0h_1nktc_310:not(#\9) {
   padding-block-end: var(--space-scaled-xxs-krq5fq, 4px);
   border-block-end-color: var(--color-border-divider-default-u5ytia, #eaeded);
 }
-.awsui_wrapper-footer_gwq0h_nmm9x_276:not(#\9) {
+.awsui_wrapper-footer_gwq0h_1nktc_280:not(#\9) {
   padding-block: var(--space-scaled-xxs-krq5fq, 4px);
 }
-.awsui_wrapper-footer_gwq0h_nmm9x_276:not(#\9), .awsui_wrapper-compact_gwq0h_nmm9x_287:not(#\9) {
+.awsui_wrapper-footer_gwq0h_1nktc_280:not(#\9), .awsui_wrapper-compact_gwq0h_1nktc_291:not(#\9) {
   padding-inline-end: 0;
 }
-.awsui_wrapper-footer_gwq0h_nmm9x_276.awsui_header-deprecated_gwq0h_nmm9x_300:not(#\9), .awsui_wrapper-compact_gwq0h_nmm9x_287.awsui_header-deprecated_gwq0h_nmm9x_300:not(#\9) {
+.awsui_wrapper-footer_gwq0h_1nktc_280.awsui_header-deprecated_gwq0h_1nktc_304:not(#\9), .awsui_wrapper-compact_gwq0h_1nktc_291.awsui_header-deprecated_gwq0h_1nktc_304:not(#\9) {
   padding-inline-start: 0;
 }
-.awsui_wrapper-footer_gwq0h_nmm9x_276:not(#\9):not(.awsui_header-deprecated_gwq0h_nmm9x_300), .awsui_wrapper-compact_gwq0h_nmm9x_287:not(#\9):not(.awsui_header-deprecated_gwq0h_nmm9x_300) {
+.awsui_wrapper-footer_gwq0h_1nktc_280:not(#\9):not(.awsui_header-deprecated_gwq0h_1nktc_304), .awsui_wrapper-compact_gwq0h_1nktc_291:not(#\9):not(.awsui_header-deprecated_gwq0h_1nktc_304) {
   padding-inline-start: calc(var(--size-icon-normal-19036g, 16px) + (var(--line-height-body-m-gw0130, 22px) - var(--size-icon-normal-19036g, 16px)) / -2 + var(--space-xxs-y2432o, 4px) + var(--border-divider-list-width-x6rz7e, 1px));
 }
-.awsui_wrapper-container_gwq0h_nmm9x_283:not(#\9) {
+.awsui_wrapper-container_gwq0h_1nktc_287:not(#\9) {
   padding-block: var(--space-container-header-top-2yfg3x, 12px) var(--space-container-header-bottom-p6av5y, 12px);
   padding-inline-end: var(--space-container-horizontal-v3575u, 20px);
 }
-.awsui_wrapper-container_gwq0h_nmm9x_283:not(#\9):not(.awsui_wrapper-expanded_gwq0h_nmm9x_306) {
+.awsui_wrapper-container_gwq0h_1nktc_287:not(#\9):not(.awsui_wrapper-expanded_gwq0h_1nktc_310) {
   padding-block-end: var(--space-container-header-top-2yfg3x, 12px);
 }
-.awsui_wrapper-container_gwq0h_nmm9x_283.awsui_header-deprecated_gwq0h_nmm9x_300:not(#\9) {
+.awsui_wrapper-container_gwq0h_1nktc_287.awsui_header-deprecated_gwq0h_1nktc_304:not(#\9) {
   padding-inline-start: var(--space-container-horizontal-v3575u, 20px);
 }
-.awsui_wrapper-container_gwq0h_nmm9x_283:not(#\9):not(.awsui_header-deprecated_gwq0h_nmm9x_300) {
+.awsui_wrapper-container_gwq0h_1nktc_287:not(#\9):not(.awsui_header-deprecated_gwq0h_1nktc_304) {
   padding-inline-start: calc(var(--space-container-horizontal-v3575u, 20px) + calc(var(--size-icon-medium-r52788, 16px) + (var(--line-height-body-m-gw0130, 22px) - var(--size-icon-normal-19036g, 16px)) / -2 + var(--space-xs-6dgkww, 8px)));
 }
-body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_nmm9x_283:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_1nktc_287:not(#\9):focus {
   padding-block: calc(var(--space-scaled-s-8j7izy, 12px) - var(--border-divider-section-width-iueskx, 1px));
   padding-inline: calc(var(--space-l-eenfqd, 20px) - var(--border-divider-section-width-iueskx, 1px));
 }
 
-.awsui_header_gwq0h_nmm9x_300:not(#\9) {
+.awsui_header_gwq0h_1nktc_304:not(#\9) {
   /* used in test-utils */
 }
-.awsui_header-wrapper_gwq0h_nmm9x_343:not(#\9), .awsui_header-deprecated_gwq0h_nmm9x_300:not(#\9) {
+.awsui_header-wrapper_gwq0h_1nktc_347:not(#\9), .awsui_header-deprecated_gwq0h_1nktc_304:not(#\9) {
   display: flex;
   font-weight: var(--font-weight-heading-s-zyfn4j, 700);
 }
-.awsui_header-wrapper_gwq0h_nmm9x_343:not(#\9) {
+.awsui_header-wrapper_gwq0h_1nktc_347:not(#\9) {
   font-size: inherit;
   letter-spacing: inherit;
   margin-block: 0;
@@ -353,20 +357,20 @@ body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_nmm9x_283:not
   padding-block: 0;
   padding-inline: 0;
 }
-.awsui_header-actions-wrapper_gwq0h_nmm9x_355:not(#\9) {
+.awsui_header-actions-wrapper_gwq0h_1nktc_359:not(#\9) {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
 }
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_nmm9x_361:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_nmm9x_361:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1nktc_365:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1nktc_365:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_nmm9x_361:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_nmm9x_361:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1nktc_365:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1nktc_365:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_nmm9x_361:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_nmm9x_361:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1nktc_365:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1nktc_365:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -380,21 +384,21 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_nmm9x_361:not(#\9
   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);
 }
-.awsui_header-button_gwq0h_nmm9x_361:not(#\9) {
+.awsui_header-button_gwq0h_1nktc_365:not(#\9) {
   box-sizing: border-box;
   display: flex;
   margin-inline-start: calc(-1 * calc(var(--size-icon-normal-19036g, 16px) + (var(--line-height-body-m-gw0130, 22px) - var(--size-icon-normal-19036g, 16px)) / -2 + var(--space-xxs-y2432o, 4px) + var(--border-divider-list-width-x6rz7e, 1px)));
 }
-.awsui_header-container-button_gwq0h_nmm9x_361:not(#\9) {
+.awsui_header-container-button_gwq0h_1nktc_365:not(#\9) {
   margin-inline-start: calc(-1 * calc(var(--size-icon-medium-r52788, 16px) + (var(--line-height-body-m-gw0130, 22px) - var(--size-icon-normal-19036g, 16px)) / -2 + var(--space-xs-6dgkww, 8px)));
 }
-.awsui_header-container_gwq0h_nmm9x_361:not(#\9) {
+.awsui_header-container_gwq0h_1nktc_365:not(#\9) {
   inline-size: 100%;
 }
-.awsui_header-container_gwq0h_nmm9x_361 > .awsui_icon-container_gwq0h_nmm9x_260:not(#\9) {
+.awsui_header-container_gwq0h_1nktc_365 > .awsui_icon-container_gwq0h_1nktc_264:not(#\9) {
   margin-block-start: var(--space-expandable-section-icon-offset-top-r1pryk, 8px);
 }
-.awsui_header-navigation_gwq0h_nmm9x_396 > .awsui_icon-container_gwq0h_nmm9x_260:not(#\9) {
+.awsui_header-navigation_gwq0h_1nktc_400 > .awsui_icon-container_gwq0h_1nktc_264:not(#\9) {
   display: inline-flex;
   cursor: pointer;
   color: var(--color-text-expandable-section-navigation-icon-default-lfxrit, #879596);
@@ -407,17 +411,17 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_nmm9x_361:not(#\9
   text-decoration: none;
   flex-direction: column;
 }
-.awsui_header-navigation_gwq0h_nmm9x_396 > .awsui_icon-container_gwq0h_nmm9x_260:not(#\9):hover {
+.awsui_header-navigation_gwq0h_1nktc_400 > .awsui_icon-container_gwq0h_1nktc_264:not(#\9):hover {
   color: var(--color-text-expandable-section-hover-4hvgvf, #16191f);
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_nmm9x_396 > .awsui_icon-container_gwq0h_nmm9x_260:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1nktc_400 > .awsui_icon-container_gwq0h_1nktc_264:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_nmm9x_396 > .awsui_icon-container_gwq0h_nmm9x_260:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1nktc_400 > .awsui_icon-container_gwq0h_1nktc_264:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_nmm9x_396 > .awsui_icon-container_gwq0h_nmm9x_260:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1nktc_400 > .awsui_icon-container_gwq0h_1nktc_264:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -431,39 +435,39 @@ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_nmm9x_396 > .
   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);
 }
-.awsui_header-text_gwq0h_nmm9x_433:not(#\9) {
+.awsui_header-text_gwq0h_1nktc_437:not(#\9) {
   /* used in test-utils */
 }
 
-:not(#\9):not(.awsui_wrapper-compact_gwq0h_nmm9x_287) > .awsui_header-actions-wrapper_gwq0h_nmm9x_355 {
+:not(#\9):not(.awsui_wrapper-compact_gwq0h_1nktc_291) > .awsui_header-actions-wrapper_gwq0h_1nktc_359 {
   flex-wrap: wrap;
   column-gap: var(--space-xs-6dgkww, 8px);
   row-gap: var(--space-scaled-xxxs-6vyqo7, 2px);
 }
 
-.awsui_content_gwq0h_nmm9x_157:not(#\9) {
+.awsui_content_gwq0h_1nktc_161:not(#\9) {
   display: none;
 }
-.awsui_content-default_gwq0h_nmm9x_446:not(#\9), .awsui_content-inline_gwq0h_nmm9x_446:not(#\9) {
+.awsui_content-default_gwq0h_1nktc_450:not(#\9), .awsui_content-inline_gwq0h_1nktc_450:not(#\9) {
   padding-block: var(--space-scaled-xs-t3am3w, 8px);
   padding-inline: 0;
 }
-.awsui_content-footer_gwq0h_nmm9x_450:not(#\9) {
+.awsui_content-footer_gwq0h_1nktc_454:not(#\9) {
   padding-block: var(--space-xs-6dgkww, 8px);
   padding-inline: 0;
 }
-.awsui_content-expanded_gwq0h_nmm9x_454:not(#\9) {
+.awsui_content-expanded_gwq0h_1nktc_458:not(#\9) {
   display: block;
 }
-.awsui_content-compact_gwq0h_nmm9x_457:not(#\9) {
+.awsui_content-compact_gwq0h_1nktc_461:not(#\9) {
   padding-inline-start: calc(var(--size-icon-normal-19036g, 16px) + (var(--line-height-body-m-gw0130, 22px) - var(--size-icon-normal-19036g, 16px)) / -2 + var(--space-xxs-y2432o, 4px) + var(--border-divider-list-width-x6rz7e, 1px));
 }
 
-.awsui_focusable_gwq0h_nmm9x_461:not(#\9):focus {
+.awsui_focusable_gwq0h_1nktc_465:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_nmm9x_461:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_1nktc_465:not(#\9):focus {
   outline: 2px dotted transparent;
   border-block: var(--border-width-field-9kmoac, 1px) solid var(--color-border-item-focused-q68bgg, #0073bb);
   border-inline: var(--border-width-field-9kmoac, 1px) solid var(--color-border-item-focused-q68bgg, #0073bb);
@@ -474,9 +478,9 @@ body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_nmm9x_461:not(#\9):fo
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-kvz439, 1px) var(--color-border-item-focused-q68bgg, #0073bb);
 }
 
-.awsui_click-target_gwq0h_nmm9x_476:not(#\9) {
+.awsui_click-target_gwq0h_1nktc_480:not(#\9) {
   cursor: pointer;
 }
-.awsui_click-target_gwq0h_nmm9x_476:not(#\9):not(.awsui_wrapper-container_gwq0h_nmm9x_283):not(.awsui_header-container-button_gwq0h_nmm9x_361):hover {
+.awsui_click-target_gwq0h_1nktc_480:not(#\9):not(.awsui_wrapper-container_gwq0h_1nktc_287):not(.awsui_header-container-button_gwq0h_1nktc_365):hover {
   color: var(--color-text-expandable-section-hover-4hvgvf, #16191f);
 }

package/lib/internal/template/expandable-section/styles.selectors.js

@@ -2,39 +2,39 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "content-enter": "awsui_content-enter_gwq0h_nmm9x_157",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_nmm9x_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_nmm9x_179",
-  "icon": "awsui_icon_gwq0h_nmm9x_193",
-  "root": "awsui_root_gwq0h_nmm9x_207",
-  "expand-button": "awsui_expand-button_gwq0h_nmm9x_242",
-  "expanded": "awsui_expanded_gwq0h_nmm9x_250",
-  "icon-container": "awsui_icon-container_gwq0h_nmm9x_260",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_nmm9x_264",
-  "wrapper": "awsui_wrapper_gwq0h_nmm9x_268",
-  "wrapper-default": "awsui_wrapper-default_gwq0h_nmm9x_276",
-  "wrapper-inline": "awsui_wrapper-inline_gwq0h_nmm9x_276",
-  "wrapper-footer": "awsui_wrapper-footer_gwq0h_nmm9x_276",
-  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_nmm9x_280",
-  "wrapper-container": "awsui_wrapper-container_gwq0h_nmm9x_283",
-  "wrapper-compact": "awsui_wrapper-compact_gwq0h_nmm9x_287",
-  "header-deprecated": "awsui_header-deprecated_gwq0h_nmm9x_300",
-  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_nmm9x_306",
-  "header": "awsui_header_gwq0h_nmm9x_300",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_nmm9x_343",
-  "header-actions-wrapper": "awsui_header-actions-wrapper_gwq0h_nmm9x_355",
-  "header-button": "awsui_header-button_gwq0h_nmm9x_361",
-  "header-container-button": "awsui_header-container-button_gwq0h_nmm9x_361",
-  "header-container": "awsui_header-container_gwq0h_nmm9x_361",
-  "header-navigation": "awsui_header-navigation_gwq0h_nmm9x_396",
-  "header-text": "awsui_header-text_gwq0h_nmm9x_433",
-  "content": "awsui_content_gwq0h_nmm9x_157",
-  "content-default": "awsui_content-default_gwq0h_nmm9x_446",
-  "content-inline": "awsui_content-inline_gwq0h_nmm9x_446",
-  "content-footer": "awsui_content-footer_gwq0h_nmm9x_450",
-  "content-expanded": "awsui_content-expanded_gwq0h_nmm9x_454",
-  "content-compact": "awsui_content-compact_gwq0h_nmm9x_457",
-  "focusable": "awsui_focusable_gwq0h_nmm9x_461",
-  "click-target": "awsui_click-target_gwq0h_nmm9x_476"
+  "content-enter": "awsui_content-enter_gwq0h_1nktc_161",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1nktc_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_1nktc_183",
+  "icon": "awsui_icon_gwq0h_1nktc_197",
+  "root": "awsui_root_gwq0h_1nktc_211",
+  "expand-button": "awsui_expand-button_gwq0h_1nktc_246",
+  "expanded": "awsui_expanded_gwq0h_1nktc_254",
+  "icon-container": "awsui_icon-container_gwq0h_1nktc_264",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_1nktc_268",
+  "wrapper": "awsui_wrapper_gwq0h_1nktc_272",
+  "wrapper-default": "awsui_wrapper-default_gwq0h_1nktc_280",
+  "wrapper-inline": "awsui_wrapper-inline_gwq0h_1nktc_280",
+  "wrapper-footer": "awsui_wrapper-footer_gwq0h_1nktc_280",
+  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1nktc_284",
+  "wrapper-container": "awsui_wrapper-container_gwq0h_1nktc_287",
+  "wrapper-compact": "awsui_wrapper-compact_gwq0h_1nktc_291",
+  "header-deprecated": "awsui_header-deprecated_gwq0h_1nktc_304",
+  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1nktc_310",
+  "header": "awsui_header_gwq0h_1nktc_304",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_1nktc_347",
+  "header-actions-wrapper": "awsui_header-actions-wrapper_gwq0h_1nktc_359",
+  "header-button": "awsui_header-button_gwq0h_1nktc_365",
+  "header-container-button": "awsui_header-container-button_gwq0h_1nktc_365",
+  "header-container": "awsui_header-container_gwq0h_1nktc_365",
+  "header-navigation": "awsui_header-navigation_gwq0h_1nktc_400",
+  "header-text": "awsui_header-text_gwq0h_1nktc_437",
+  "content": "awsui_content_gwq0h_1nktc_161",
+  "content-default": "awsui_content-default_gwq0h_1nktc_450",
+  "content-inline": "awsui_content-inline_gwq0h_1nktc_450",
+  "content-footer": "awsui_content-footer_gwq0h_1nktc_454",
+  "content-expanded": "awsui_content-expanded_gwq0h_1nktc_458",
+  "content-compact": "awsui_content-compact_gwq0h_1nktc_461",
+  "focusable": "awsui_focusable_gwq0h_1nktc_465",
+  "click-target": "awsui_click-target_gwq0h_1nktc_480"
 };
   

package/lib/internal/template/file-dropzone/styles.css.js

@@ -1,8 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_ptw8i_r1fnu_177",
-  "hovered": "awsui_hovered_ptw8i_r1fnu_190",
-  "content": "awsui_content_ptw8i_r1fnu_197"
+  "root": "awsui_root_ptw8i_shlzu_181",
+  "hovered": "awsui_hovered_ptw8i_shlzu_194",
+  "content": "awsui_content_ptw8i_shlzu_201"
 };
   

package/lib/internal/template/file-dropzone/styles.scoped.css

@@ -134,12 +134,16 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
-/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
@@ -174,7 +178,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_root_ptw8i_r1fnu_177:not(#\9) {
+.awsui_root_ptw8i_shlzu_181:not(#\9) {
   padding-block: var(--space-static-l-xtao5d, 20px);
   padding-inline: var(--space-static-l-xtao5d, 20px);
   border-start-start-radius: var(--border-radius-dropzone-849cem, 0px);
@@ -187,14 +191,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-block: 1px dashed var(--color-dropzone-border-default-9spjwe, #879596);
   border-inline: 1px dashed var(--color-dropzone-border-default-9spjwe, #879596);
 }
-.awsui_root_ptw8i_r1fnu_177.awsui_hovered_ptw8i_r1fnu_190:not(#\9) {
+.awsui_root_ptw8i_shlzu_181.awsui_hovered_ptw8i_shlzu_194:not(#\9) {
   color: var(--color-dropzone-text-hover-r1nuki, #545b64);
   background-color: var(--color-dropzone-background-hover-v8kdg9, #f1faff);
   border-block: 1px dashed var(--color-dropzone-border-hover-1qv9u8, #002b66);
   border-inline: 1px dashed var(--color-dropzone-border-hover-1qv9u8, #002b66);
 }
 
-.awsui_content_ptw8i_r1fnu_197:not(#\9) {
+.awsui_content_ptw8i_shlzu_201:not(#\9) {
   display: flex;
   flex-direction: column;
   gap: var(--space-static-xxs-9qxzo2, 4px);

package/lib/internal/template/file-dropzone/styles.selectors.js

@@ -2,8 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_ptw8i_r1fnu_177",
-  "hovered": "awsui_hovered_ptw8i_r1fnu_190",
-  "content": "awsui_content_ptw8i_r1fnu_197"
+  "root": "awsui_root_ptw8i_shlzu_181",
+  "hovered": "awsui_hovered_ptw8i_shlzu_194",
+  "content": "awsui_content_ptw8i_shlzu_201"
 };
   

package/lib/internal/template/file-input/internal.d.ts

@@ -1,6 +1,10 @@
 import React from 'react';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';
 import { FileInputProps } from './interfaces';
-declare const InternalFileInput: React.ForwardRefExoticComponent<FileInputProps & InternalBaseComponentProps<any> & React.RefAttributes<FileInputProps.Ref>>;
+interface InternalFileInputProps {
+    __inputClassName?: string;
+    __inputNativeAttributes?: React.InputHTMLAttributes<HTMLInputElement> | Record<`data-${string}`, string>;
+}
+declare const InternalFileInput: React.ForwardRefExoticComponent<FileInputProps & InternalBaseComponentProps<any> & InternalFileInputProps & React.RefAttributes<FileInputProps.Ref>>;
 export default InternalFileInput;
 //# sourceMappingURL=internal.d.ts.map

package/lib/internal/template/file-input/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/file-input/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAY7E,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAG3F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9C,QAAA,MAAM,iBAAiB,6HAuGtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/file-input/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAa7E,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAI3F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC;CAC1G;AAED,QAAA,MAAM,iBAAiB,sJAsHtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/internal/template/file-input/internal.js

@@ -8,17 +8,21 @@ import InternalButton from '../button/internal';
 import { useFormFieldContext } from '../contexts/form-field';
 import { getBaseProps } from '../internal/base-component/index.js';
 import ScreenreaderOnly from '../internal/components/screenreader-only';
+import { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';
 import { fireNonCancelableEvent } from '../internal/events';
 import checkControlled from '../internal/hooks/check-controlled';
 import useForwardFocus from '../internal/hooks/forward-focus';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { joinStrings } from '../internal/utils/strings';
 import styles from './styles.css.js';
 const InternalFileInput = React.forwardRef((_a, ref) => {
     var _b;
-    var { accept, ariaRequired, ariaLabel, multiple = false, value, onChange, variant = 'button', children, __internalRootRef = null } = _a, restProps = __rest(_a, ["accept", "ariaRequired", "ariaLabel", "multiple", "value", "onChange", "variant", "children", "__internalRootRef"]);
+    var { accept, ariaRequired, ariaLabel, multiple = false, value, onChange, variant = 'button', children, __internalRootRef = null, __inputClassName, __inputNativeAttributes } = _a, restProps = __rest(_a, ["accept", "ariaRequired", "ariaLabel", "multiple", "value", "onChange", "variant", "children", "__internalRootRef", "__inputClassName", "__inputNativeAttributes"]);
     const baseProps = getBaseProps(restProps);
     const uploadInputRef = useRef(null);
+    const containerRef = useRef(null);
+    const mergedRef = useMergeRefs(__internalRootRef, containerRef);
     const uploadButtonLabelId = useUniqueId('upload-button-label');
     const formFieldContext = useFormFieldContext(restProps);
     const selfControlId = useUniqueId('upload-input');
@@ -26,17 +30,17 @@ const InternalFileInput = React.forwardRef((_a, ref) => {
     useForwardFocus(ref, uploadInputRef);
     const [isFocused, setIsFocused] = useState(false);
     const onUploadButtonClick = () => { var _a; return (_a = uploadInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
-    const onUploadInputFocus = () => setIsFocused(true);
+    const onUploadInputFocus = () => {
+        var _a, _b;
+        setIsFocused(true);
+        (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a);
+    };
     const onUploadInputBlur = () => setIsFocused(false);
     const onUploadInputChange = ({ target }) => {
         fireNonCancelableEvent(onChange, { value: target.files ? Array.from(target.files) : [] });
     };
     checkControlled('FileInput', 'value', value, 'onChange', onChange);
-    const nativeAttributes = {
-        'aria-label': ariaLabel || children,
-        'aria-labelledby': joinStrings(formFieldContext.ariaLabelledby, uploadButtonLabelId),
-        'aria-describedby': formFieldContext.ariaDescribedby,
-    };
+    const nativeAttributes = Object.assign({ 'aria-label': ariaLabel || children, 'aria-labelledby': joinStrings(formFieldContext.ariaLabelledby, uploadButtonLabelId), 'aria-describedby': formFieldContext.ariaDescribedby }, __inputNativeAttributes);
     if (formFieldContext.invalid) {
         nativeAttributes['aria-invalid'] = true;
     }
@@ -60,9 +64,13 @@ const InternalFileInput = React.forwardRef((_a, ref) => {
             uploadInputRef.current.value = ''; // reset value to allow calling onChange when the same file is uploaded again
         }
     }, [value]);
-    return (React.createElement("div", Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx(baseProps.className, styles.root) }),
-        React.createElement("input", Object.assign({ id: controlId, ref: uploadInputRef, type: "file", hidden: false, multiple: multiple, accept: accept, onChange: onUploadInputChange, onFocus: onUploadInputFocus, onBlur: onUploadInputBlur, className: clsx(styles['file-input'], styles.hidden) }, nativeAttributes)),
-        React.createElement(InternalButton, { iconName: "upload", variant: variant === 'icon' ? 'icon' : undefined, formAction: "none", onClick: onUploadButtonClick, className: clsx(styles['file-input-button'], isFocused && styles['force-focus-outline']), __nativeAttributes: { tabIndex: -1, 'aria-hidden': true } }, variant === 'button' && children),
+    const { tabIndex } = useSingleTabStopNavigation(uploadInputRef);
+    return (React.createElement("div", Object.assign({}, baseProps, { ref: mergedRef, className: clsx(baseProps.className, styles.root) }),
+        React.createElement("input", Object.assign({ id: controlId, ref: uploadInputRef, type: "file", hidden: false, multiple: multiple, accept: accept, onChange: onUploadInputChange, onFocus: onUploadInputFocus, onBlur: onUploadInputBlur, className: clsx(styles['file-input'], styles.hidden, __inputClassName), tabIndex: tabIndex }, nativeAttributes)),
+        React.createElement(InternalButton, { iconName: "upload", variant: variant === 'icon' ? 'icon' : undefined, formAction: "none", onClick: onUploadButtonClick, className: clsx(styles['file-input-button'], {
+                [styles['force-focus-outline-button']]: isFocused && variant === 'button',
+                [styles['force-focus-outline-icon']]: isFocused && variant === 'icon',
+            }), __nativeAttributes: { tabIndex: -1, 'aria-hidden': true } }, variant === 'button' && children),
         React.createElement(ScreenreaderOnly, { id: uploadButtonLabelId }, ariaLabel || children)));
 });
 export default InternalFileInput;