@cloudscape-design/components-themeable 3.0.270 → 3.0.272

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

@@ -1,28 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "content-enter": "awsui_content-enter_gwq0h_9z7os_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_9z7os_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_9z7os_119",
-  "icon": "awsui_icon_gwq0h_9z7os_133",
-  "root": "awsui_root_gwq0h_9z7os_151",
-  "expanded": "awsui_expanded_gwq0h_9z7os_171",
-  "icon-container": "awsui_icon-container_gwq0h_9z7os_175",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_9z7os_180",
-  "trigger": "awsui_trigger_gwq0h_9z7os_119",
-  "trigger-default": "awsui_trigger-default_gwq0h_9z7os_193",
-  "trigger-footer": "awsui_trigger-footer_gwq0h_9z7os_196",
-  "trigger-navigation": "awsui_trigger-navigation_gwq0h_9z7os_202",
-  "trigger-container": "awsui_trigger-container_gwq0h_9z7os_216",
-  "header": "awsui_header_gwq0h_9z7os_226",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_9z7os_229",
-  "header-container": "awsui_header-container_gwq0h_9z7os_236",
-  "header-container-button": "awsui_header-container-button_gwq0h_9z7os_251",
-  "header-navigation": "awsui_header-navigation_gwq0h_9z7os_259",
-  "content": "awsui_content_gwq0h_9z7os_97",
-  "content-default": "awsui_content-default_gwq0h_9z7os_295",
-  "content-footer": "awsui_content-footer_gwq0h_9z7os_298",
-  "content-expanded": "awsui_content-expanded_gwq0h_9z7os_301",
-  "focusable": "awsui_focusable_gwq0h_9z7os_305"
+  "content-enter": "awsui_content-enter_gwq0h_z4mam_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_z4mam_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_z4mam_119",
+  "icon": "awsui_icon_gwq0h_z4mam_133",
+  "root": "awsui_root_gwq0h_z4mam_151",
+  "expanded": "awsui_expanded_gwq0h_z4mam_171",
+  "icon-container": "awsui_icon-container_gwq0h_z4mam_175",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_z4mam_180",
+  "trigger": "awsui_trigger_gwq0h_z4mam_119",
+  "trigger-default": "awsui_trigger-default_gwq0h_z4mam_193",
+  "trigger-footer": "awsui_trigger-footer_gwq0h_z4mam_196",
+  "trigger-navigation": "awsui_trigger-navigation_gwq0h_z4mam_202",
+  "trigger-container": "awsui_trigger-container_gwq0h_z4mam_216",
+  "header": "awsui_header_gwq0h_z4mam_226",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_z4mam_229",
+  "header-button": "awsui_header-button_gwq0h_z4mam_236",
+  "header-container": "awsui_header-container_gwq0h_z4mam_258",
+  "header-container-button": "awsui_header-container-button_gwq0h_z4mam_273",
+  "header-navigation": "awsui_header-navigation_gwq0h_z4mam_281",
+  "content": "awsui_content_gwq0h_z4mam_97",
+  "content-default": "awsui_content-default_gwq0h_z4mam_317",
+  "content-footer": "awsui_content-footer_gwq0h_z4mam_320",
+  "content-expanded": "awsui_content-expanded_gwq0h_z4mam_323",
+  "focusable": "awsui_focusable_gwq0h_z4mam_327"
 };
   

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

@@ -94,10 +94,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_9z7os_97:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_gwq0h_9z7os_1 var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
+.awsui_content-enter_gwq0h_z4mam_97:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_gwq0h_z4mam_1 var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_gwq0h_9z7os_1 {
+@keyframes awsui_awsui-motion-fade-in_gwq0h_z4mam_1 {
   from {
     opacity: 0.2;
   }
@@ -106,40 +106,40 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_content-enter_gwq0h_9z7os_97:not(#\9) {
+  .awsui_content-enter_gwq0h_z4mam_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_content-enter_gwq0h_9z7os_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_9z7os_97:not(#\9) {
+.awsui-motion-disabled .awsui_content-enter_gwq0h_z4mam_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_z4mam_97:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_trigger-expanded_gwq0h_9z7os_119:not(#\9) {
+.awsui_trigger-expanded_gwq0h_z4mam_119:not(#\9) {
   transition: border-bottom-color var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_trigger-expanded_gwq0h_9z7os_119:not(#\9) {
+  .awsui_trigger-expanded_gwq0h_z4mam_119:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_9z7os_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_9z7os_119:not(#\9) {
+.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_z4mam_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_z4mam_119:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_icon_gwq0h_9z7os_133:not(#\9) {
+.awsui_icon_gwq0h_z4mam_133:not(#\9) {
   transition: transform var(--motion-duration-rotate-90-ux18sr, 135ms) var(--motion-easing-rotate-90-eoew89, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_icon_gwq0h_9z7os_133:not(#\9) {
+  .awsui_icon_gwq0h_z4mam_133:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_icon_gwq0h_9z7os_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_9z7os_133:not(#\9) {
+.awsui-motion-disabled .awsui_icon_gwq0h_z4mam_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_z4mam_133:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -148,7 +148,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_root_gwq0h_9z7os_151:not(#\9) {
+.awsui_root_gwq0h_z4mam_151:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -191,23 +191,23 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: block;
 }
 
-.awsui_icon_gwq0h_9z7os_133:not(#\9) {
+.awsui_icon_gwq0h_z4mam_133:not(#\9) {
   transform: rotate(-90deg);
 }
-.awsui_icon_gwq0h_9z7os_133.awsui_expanded_gwq0h_9z7os_171:not(#\9) {
+.awsui_icon_gwq0h_z4mam_133.awsui_expanded_gwq0h_z4mam_171:not(#\9) {
   transform: rotate(0deg);
 }
 
-.awsui_icon-container_gwq0h_9z7os_175:not(#\9) {
+.awsui_icon-container_gwq0h_z4mam_175:not(#\9) {
   position: relative;
   margin-left: calc((var(--font-body-m-line-height-i7xxvv, 22px) - var(--size-icon-normal-j1z5fn, 16px)) / -2);
   margin-right: calc(var(--space-xxs-ynfts5, 4px) + var(--border-divider-list-width-hacikr, 1px));
 }
-.awsui_icon-container-container_gwq0h_9z7os_180:not(#\9) {
+.awsui_icon-container-container_gwq0h_z4mam_180:not(#\9) {
   margin-right: var(--space-xs-rsr2qu, 8px);
 }
 
-.awsui_trigger_gwq0h_9z7os_119:not(#\9) {
+.awsui_trigger_gwq0h_z4mam_119:not(#\9) {
   cursor: pointer;
   box-sizing: border-box;
   display: flex;
@@ -216,19 +216,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
   text-align: left;
 }
-.awsui_trigger-default_gwq0h_9z7os_193:not(#\9) {
+.awsui_trigger-default_gwq0h_z4mam_193:not(#\9) {
   padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-xxs-ynfts5, 4px);
 }
-.awsui_trigger-footer_gwq0h_9z7os_196:not(#\9) {
+.awsui_trigger-footer_gwq0h_z4mam_196:not(#\9) {
   padding: var(--space-scaled-xxs-95dhkm, 4px) 0;
 }
-.awsui_trigger-default_gwq0h_9z7os_193:not(#\9), .awsui_trigger-footer_gwq0h_9z7os_196:not(#\9) {
+.awsui_trigger-default_gwq0h_z4mam_193:not(#\9), .awsui_trigger-footer_gwq0h_z4mam_196:not(#\9) {
   border: var(--border-divider-section-width-5a4cv1, 1px) solid transparent;
 }
-.awsui_trigger-navigation_gwq0h_9z7os_202:not(#\9) {
+.awsui_trigger-navigation_gwq0h_z4mam_202:not(#\9) {
   border-left: var(--border-divider-section-width-5a4cv1, 1px) solid transparent;
 }
-.awsui_trigger-default_gwq0h_9z7os_193:not(#\9), .awsui_trigger-navigation_gwq0h_9z7os_202:not(#\9), .awsui_trigger-footer_gwq0h_9z7os_196:not(#\9) {
+.awsui_trigger-default_gwq0h_z4mam_193:not(#\9), .awsui_trigger-navigation_gwq0h_z4mam_202:not(#\9), .awsui_trigger-footer_gwq0h_z4mam_196:not(#\9) {
   color: var(--color-text-expandable-section-default-muap7v, #545b64);
   font-weight: var(--font-heading-s-weight-1ygwuy, 700);
   -webkit-font-smoothing: var(--font-smoothing-webkit-aglr0j, auto);
@@ -236,36 +236,58 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-size: var(--font-expandable-heading-size-6cp6jd, 14px);
   letter-spacing: var(--font-heading-s-letter-spacing-i014lh, normal);
 }
-.awsui_trigger-default_gwq0h_9z7os_193:not(#\9):hover, .awsui_trigger-navigation_gwq0h_9z7os_202:not(#\9):hover, .awsui_trigger-footer_gwq0h_9z7os_196:not(#\9):hover {
+.awsui_trigger-default_gwq0h_z4mam_193:not(#\9):hover, .awsui_trigger-navigation_gwq0h_z4mam_202:not(#\9):hover, .awsui_trigger-footer_gwq0h_z4mam_196:not(#\9):hover {
   color: var(--color-text-expandable-section-hover-fhlqd8, #16191f);
 }
-.awsui_trigger-container_gwq0h_9z7os_216:not(#\9) {
+.awsui_trigger-container_gwq0h_z4mam_216:not(#\9) {
   padding: var(--space-container-header-vertical-0bd19u, 12px) var(--space-container-horizontal-tlw03i, 20px);
 }
-body[data-awsui-focus-visible=true] .awsui_trigger-container_gwq0h_9z7os_216:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_trigger-container_gwq0h_z4mam_216:not(#\9):focus {
   padding: calc(var(--space-scaled-s-cu1hzn, 12px) - var(--border-divider-section-width-5a4cv1, 1px)) calc(var(--space-l-4vl6xu, 20px) - var(--border-divider-section-width-5a4cv1, 1px));
 }
-.awsui_trigger-default_gwq0h_9z7os_193.awsui_trigger-expanded_gwq0h_9z7os_119:not(#\9) {
+.awsui_trigger-default_gwq0h_z4mam_193.awsui_trigger-expanded_gwq0h_z4mam_119:not(#\9) {
   border-bottom-color: var(--color-border-divider-default-k96bks, #eaeded);
 }
 
-.awsui_header_gwq0h_9z7os_226:not(#\9) {
+.awsui_header_gwq0h_z4mam_226:not(#\9) {
   display: flex;
 }
-.awsui_header-wrapper_gwq0h_9z7os_229:not(#\9) {
+.awsui_header-wrapper_gwq0h_z4mam_229:not(#\9) {
   font-weight: inherit;
   font-size: inherit;
   letter-spacing: inherit;
   margin: 0;
   padding: 0;
 }
-.awsui_header-container_gwq0h_9z7os_236:not(#\9) {
+.awsui_header-button_gwq0h_z4mam_236:not(#\9) {
+  box-sizing: border-box;
+  display: flex;
+}
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_z4mam_236:not(#\9):focus {
+  position: relative;
+}
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_z4mam_236:not(#\9):focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(0px - 1px);
+}
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_z4mam_236:not(#\9):focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: calc(-1 * 0px);
+  top: calc(-1 * 0px);
+  width: calc(100% + 2 * 0px);
+  height: calc(100% + 2 * 0px);
+  border-radius: var(--border-radius-control-default-focus-ring-hekmgc, 2px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
+}
+.awsui_header-container_gwq0h_z4mam_258:not(#\9) {
   width: 100%;
 }
-.awsui_header-container_gwq0h_9z7os_236 > .awsui_icon-container_gwq0h_9z7os_175:not(#\9) {
+.awsui_header-container_gwq0h_z4mam_258 > .awsui_icon-container_gwq0h_z4mam_175:not(#\9) {
   margin-top: var(--space-expandable-section-icon-offset-top-jo3eu8, 8px);
 }
-.awsui_header-container_gwq0h_9z7os_236[data-awsui-focus-visible=true]:not(#\9):focus-within {
+body[data-awsui-focus-visible=true] .awsui_header-container_gwq0h_z4mam_258:not(#\9):focus-within {
   outline: none;
   text-decoration: none;
   padding: calc(var(--space-scaled-s-cu1hzn, 12px) - var(--border-divider-section-width-5a4cv1, 1px)) calc(var(--space-l-4vl6xu, 20px) - var(--border-divider-section-width-5a4cv1, 1px));
@@ -274,15 +296,15 @@ body[data-awsui-focus-visible=true] .awsui_trigger-container_gwq0h_9z7os_216:not
   border-radius: var(--border-radius-control-default-focus-ring-hekmgc, 2px);
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-glnuoy, 1px) var(--color-border-item-focused-n5kd8g, #0073bb);
 }
-.awsui_header-container-button_gwq0h_9z7os_251:not(#\9) {
+.awsui_header-container-button_gwq0h_z4mam_273:not(#\9) {
   box-sizing: border-box;
   display: flex;
 }
-.awsui_header-container-button_gwq0h_9z7os_251:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_z4mam_273:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-.awsui_header-navigation_gwq0h_9z7os_259 > .awsui_icon-container_gwq0h_9z7os_175:not(#\9) {
+.awsui_header-navigation_gwq0h_z4mam_281 > .awsui_icon-container_gwq0h_z4mam_175:not(#\9) {
   display: inline-flex;
   cursor: pointer;
   color: var(--color-text-expandable-section-navigation-icon-default-xyvmb6, #879596);
@@ -293,17 +315,17 @@ body[data-awsui-focus-visible=true] .awsui_trigger-container_gwq0h_9z7os_216:not
   text-decoration: none;
   flex-direction: column;
 }
-.awsui_header-navigation_gwq0h_9z7os_259 > .awsui_icon-container_gwq0h_9z7os_175:not(#\9):hover {
+.awsui_header-navigation_gwq0h_z4mam_281 > .awsui_icon-container_gwq0h_z4mam_175:not(#\9):hover {
   color: var(--color-text-expandable-section-hover-fhlqd8, #16191f);
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_9z7os_259 > .awsui_icon-container_gwq0h_9z7os_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_z4mam_281 > .awsui_icon-container_gwq0h_z4mam_175:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_9z7os_259 > .awsui_icon-container_gwq0h_9z7os_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_z4mam_281 > .awsui_icon-container_gwq0h_z4mam_175:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_9z7os_259 > .awsui_icon-container_gwq0h_9z7os_175:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_z4mam_281 > .awsui_icon-container_gwq0h_z4mam_175:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -315,24 +337,24 @@ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_9z7os_259 > .
   box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
 }
 
-.awsui_content_gwq0h_9z7os_97:not(#\9) {
+.awsui_content_gwq0h_z4mam_97:not(#\9) {
   display: none;
 }
-.awsui_content-default_gwq0h_9z7os_295:not(#\9) {
+.awsui_content-default_gwq0h_z4mam_317:not(#\9) {
   padding: var(--space-scaled-xs-6859qs, 8px) 0;
 }
-.awsui_content-footer_gwq0h_9z7os_298:not(#\9) {
+.awsui_content-footer_gwq0h_z4mam_320:not(#\9) {
   padding: var(--space-xs-rsr2qu, 8px) 0;
 }
-.awsui_content-expanded_gwq0h_9z7os_301:not(#\9) {
+.awsui_content-expanded_gwq0h_z4mam_323:not(#\9) {
   display: block;
 }
 
-.awsui_focusable_gwq0h_9z7os_305:not(#\9):focus {
+.awsui_focusable_gwq0h_z4mam_327:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_9z7os_305:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_z4mam_327:not(#\9):focus {
   outline: 2px dotted transparent;
   border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-item-focused-n5kd8g, #0073bb);
   border-radius: var(--border-radius-control-default-focus-ring-hekmgc, 2px);

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

@@ -2,28 +2,29 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "content-enter": "awsui_content-enter_gwq0h_9z7os_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_9z7os_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_9z7os_119",
-  "icon": "awsui_icon_gwq0h_9z7os_133",
-  "root": "awsui_root_gwq0h_9z7os_151",
-  "expanded": "awsui_expanded_gwq0h_9z7os_171",
-  "icon-container": "awsui_icon-container_gwq0h_9z7os_175",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_9z7os_180",
-  "trigger": "awsui_trigger_gwq0h_9z7os_119",
-  "trigger-default": "awsui_trigger-default_gwq0h_9z7os_193",
-  "trigger-footer": "awsui_trigger-footer_gwq0h_9z7os_196",
-  "trigger-navigation": "awsui_trigger-navigation_gwq0h_9z7os_202",
-  "trigger-container": "awsui_trigger-container_gwq0h_9z7os_216",
-  "header": "awsui_header_gwq0h_9z7os_226",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_9z7os_229",
-  "header-container": "awsui_header-container_gwq0h_9z7os_236",
-  "header-container-button": "awsui_header-container-button_gwq0h_9z7os_251",
-  "header-navigation": "awsui_header-navigation_gwq0h_9z7os_259",
-  "content": "awsui_content_gwq0h_9z7os_97",
-  "content-default": "awsui_content-default_gwq0h_9z7os_295",
-  "content-footer": "awsui_content-footer_gwq0h_9z7os_298",
-  "content-expanded": "awsui_content-expanded_gwq0h_9z7os_301",
-  "focusable": "awsui_focusable_gwq0h_9z7os_305"
+  "content-enter": "awsui_content-enter_gwq0h_z4mam_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_z4mam_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_z4mam_119",
+  "icon": "awsui_icon_gwq0h_z4mam_133",
+  "root": "awsui_root_gwq0h_z4mam_151",
+  "expanded": "awsui_expanded_gwq0h_z4mam_171",
+  "icon-container": "awsui_icon-container_gwq0h_z4mam_175",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_z4mam_180",
+  "trigger": "awsui_trigger_gwq0h_z4mam_119",
+  "trigger-default": "awsui_trigger-default_gwq0h_z4mam_193",
+  "trigger-footer": "awsui_trigger-footer_gwq0h_z4mam_196",
+  "trigger-navigation": "awsui_trigger-navigation_gwq0h_z4mam_202",
+  "trigger-container": "awsui_trigger-container_gwq0h_z4mam_216",
+  "header": "awsui_header_gwq0h_z4mam_226",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_z4mam_229",
+  "header-button": "awsui_header-button_gwq0h_z4mam_236",
+  "header-container": "awsui_header-container_gwq0h_z4mam_258",
+  "header-container-button": "awsui_header-container-button_gwq0h_z4mam_273",
+  "header-navigation": "awsui_header-navigation_gwq0h_z4mam_281",
+  "content": "awsui_content_gwq0h_z4mam_97",
+  "content-default": "awsui_content-default_gwq0h_z4mam_317",
+  "content-footer": "awsui_content-footer_gwq0h_z4mam_320",
+  "content-expanded": "awsui_content-expanded_gwq0h_z4mam_323",
+  "focusable": "awsui_focusable_gwq0h_z4mam_327"
 };
   

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["file-upload/file-input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAMtF,OAAO,EAAE,+BAA+B,EAAE,MAAM,2CAA2C,CAAC;AAG5F,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGhD,UAAU,cAAe,SAAQ,+BAA+B;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;;AAED,wBAA2C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["file-upload/file-input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAMtF,OAAO,EAAE,+BAA+B,EAAE,MAAM,2CAA2C,CAAC;AAG5F,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIhD,UAAU,cAAe,SAAQ,+BAA+B;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;;AAED,wBAA2C"}

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

@@ -9,6 +9,7 @@ import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import { joinStrings } from '../../internal/utils/strings';
 import ScreenreaderOnly from '../../internal/components/screenreader-only';
 import useForwardFocus from '../../internal/hooks/forward-focus';
+import clsx from 'clsx';
 export default React.forwardRef(FileInput);
 function FileInput(_a, ref) {
     var _b;
@@ -49,7 +50,7 @@ function FileInput(_a, ref) {
     }, [value]);
     return (React.createElement("div", { className: styles['file-input-container'] },
         React.createElement("input", Object.assign({ id: controlId, ref: uploadInputRef, type: "file", hidden: false, multiple: multiple, accept: accept, onChange: onUploadInputChange, onFocus: onUploadInputFocus, onBlur: onUploadInputBlur, className: styles['upload-input'] }, nativeAttributes)),
-        React.createElement(InternalButton, { iconName: "upload", formAction: "none", onClick: onUploadButtonClick, className: styles['upload-button'], __nativeAttributes: { tabIndex: -1, 'aria-hidden': true }, __forcedFocusState: isFocused ? 'focused' : undefined }, children),
+        React.createElement(InternalButton, { iconName: "upload", formAction: "none", onClick: onUploadButtonClick, className: clsx(styles['upload-button'], isFocused && styles['force-focus-outline']), __nativeAttributes: { tabIndex: -1, 'aria-hidden': true } }, children),
         React.createElement(ScreenreaderOnly, { id: uploadButtonLabelId }, children)));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/file-upload/file-input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["file-upload/file-input/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtF,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,gBAAgB,MAAM,6CAA6C,CAAC;AAE3E,OAAO,eAAe,MAAM,oCAAoC,CAAC;AAWjE,eAAe,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;AAE3C,SAAS,SAAS,CAChB,EAA2F,EAC3F,GAAsC;;QADtC,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,OAAgC,EAA3B,SAAS,cAAzE,uEAA2E,CAAF;IAGzE,MAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACtD,MAAM,mBAAmB,GAAG,WAAW,CAAC,qBAAqB,CAAC,CAAC;IAC/D,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,WAAW,CAAC,cAAc,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,MAAA,gBAAgB,CAAC,SAAS,mCAAI,aAAa,CAAC;IAE9D,eAAe,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC;IAErC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,mBAAmB,GAAG,GAAG,EAAE,WAAC,OAAA,MAAA,cAAc,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,CAAC;IAElE,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAEpD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,mBAAmB,GAAG,CAAC,EAAE,MAAM,EAAiC,EAAE,EAAE;QACxE,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAwB;QAC5C,iBAAiB,EAAE,WAAW,CAAC,gBAAgB,CAAC,cAAc,EAAE,mBAAmB,CAAC;QACpF,kBAAkB,EAAE,gBAAgB,CAAC,eAAe;KACrD,CAAC;IACF,IAAI,gBAAgB,CAAC,OAAO,EAAE;QAC5B,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;KACzC;IACD,IAAI,YAAY,EAAE;QAChB,gBAAgB,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC;KAC1C;IAED,oEAAoE;IACpE,SAAS,CAAC,GAAG,EAAE;QACb,8CAA8C;QAC9C,IAAI,MAAM,CAAC,YAAY,EAAE;YACvB,MAAM,YAAY,GAAG,IAAI,YAAY,EAAE,CAAC;YACxC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;aAC9B;YACD,cAAc,CAAC,OAAQ,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;SACpD;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC;QAG5C,6CACE,EAAE,EAAE,SAAS,EACb,GAAG,EAAE,cAAc,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,mBAAmB,EAC7B,OAAO,EAAE,kBAAkB,EAC3B,MAAM,EAAE,iBAAiB,EACzB,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,IAC7B,gBAAgB,EACpB;QAIF,oBAAC,cAAc,IACb,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAClC,kBAAkB,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,EACzD,kBAAkB,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAEpD,QAAQ,CACM;QAGjB,oBAAC,gBAAgB,IAAC,EAAE,EAAE,mBAAmB,IAAG,QAAQ,CAAoB,CACpE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { ChangeEvent, ForwardedRef, useEffect, useRef, useState } from 'react';\n\nimport InternalButton from '../../button/internal';\nimport styles from './styles.css.js';\nimport { useFormFieldContext } from '../../contexts/form-field';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { FormFieldValidationControlProps } from '../../internal/context/form-field-context';\nimport { joinStrings } from '../../internal/utils/strings';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only';\nimport { FileUploadProps } from '../interfaces';\nimport useForwardFocus from '../../internal/hooks/forward-focus';\n\ninterface FileInputProps extends FormFieldValidationControlProps {\n  accept?: string;\n  ariaRequired?: boolean;\n  multiple: boolean;\n  value: readonly File[];\n  onChange: (files: File[]) => void;\n  children: React.ReactNode;\n}\n\nexport default React.forwardRef(FileInput);\n\nfunction FileInput(\n  { accept, ariaRequired, multiple, value, onChange, children, ...restProps }: FileInputProps,\n  ref: ForwardedRef<FileUploadProps.Ref>\n) {\n  const uploadInputRef = useRef<HTMLInputElement>(null);\n  const uploadButtonLabelId = useUniqueId('upload-button-label');\n  const formFieldContext = useFormFieldContext(restProps);\n  const selfControlId = useUniqueId('upload-input');\n  const controlId = formFieldContext.controlId ?? selfControlId;\n\n  useForwardFocus(ref, uploadInputRef);\n\n  const [isFocused, setIsFocused] = useState(false);\n\n  const onUploadButtonClick = () => uploadInputRef.current?.click();\n\n  const onUploadInputFocus = () => setIsFocused(true);\n\n  const onUploadInputBlur = () => setIsFocused(false);\n\n  const onUploadInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {\n    onChange(target.files ? Array.from(target.files) : []);\n  };\n\n  const nativeAttributes: Record<string, any> = {\n    'aria-labelledby': joinStrings(formFieldContext.ariaLabelledby, uploadButtonLabelId),\n    'aria-describedby': formFieldContext.ariaDescribedby,\n  };\n  if (formFieldContext.invalid) {\n    nativeAttributes['aria-invalid'] = true;\n  }\n  if (ariaRequired) {\n    nativeAttributes['aria-required'] = true;\n  }\n\n  // Synchronizing component's value with the native file input state.\n  useEffect(() => {\n    // The DataTransfer is not available in jsdom.\n    if (window.DataTransfer) {\n      const dataTransfer = new DataTransfer();\n      for (const file of value) {\n        dataTransfer.items.add(file);\n      }\n      uploadInputRef.current!.files = dataTransfer.files;\n    }\n  }, [value]);\n\n  return (\n    <div className={styles['file-input-container']}>\n      {/* This is the actual interactive and accessible file-upload element. */}\n      {/* It is visually hidden to achieve the desired UX design. */}\n      <input\n        id={controlId}\n        ref={uploadInputRef}\n        type=\"file\"\n        hidden={false}\n        multiple={multiple}\n        accept={accept}\n        onChange={onUploadInputChange}\n        onFocus={onUploadInputFocus}\n        onBlur={onUploadInputBlur}\n        className={styles['upload-input']}\n        {...nativeAttributes}\n      />\n\n      {/* The button is decorative. It dispatches clicks to the file input and is ARIA-hidden. */}\n      {/* When the input is focused the focus outline is forced on the button. */}\n      <InternalButton\n        iconName=\"upload\"\n        formAction=\"none\"\n        onClick={onUploadButtonClick}\n        className={styles['upload-button']}\n        __nativeAttributes={{ tabIndex: -1, 'aria-hidden': true }}\n        __forcedFocusState={isFocused ? 'focused' : undefined}\n      >\n        {children}\n      </InternalButton>\n\n      {/* The file input needs to be labelled with provided content. Can't use the button because it is ARIA-hidden. */}\n      <ScreenreaderOnly id={uploadButtonLabelId}>{children}</ScreenreaderOnly>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["file-upload/file-input/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\n\nimport React, { ChangeEvent, ForwardedRef, useEffect, useRef, useState } from 'react';\n\nimport InternalButton from '../../button/internal';\nimport styles from './styles.css.js';\nimport { useFormFieldContext } from '../../contexts/form-field';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { FormFieldValidationControlProps } from '../../internal/context/form-field-context';\nimport { joinStrings } from '../../internal/utils/strings';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only';\nimport { FileUploadProps } from '../interfaces';\nimport useForwardFocus from '../../internal/hooks/forward-focus';\nimport clsx from 'clsx';\n\ninterface FileInputProps extends FormFieldValidationControlProps {\n  accept?: string;\n  ariaRequired?: boolean;\n  multiple: boolean;\n  value: readonly File[];\n  onChange: (files: File[]) => void;\n  children: React.ReactNode;\n}\n\nexport default React.forwardRef(FileInput);\n\nfunction FileInput(\n  { accept, ariaRequired, multiple, value, onChange, children, ...restProps }: FileInputProps,\n  ref: ForwardedRef<FileUploadProps.Ref>\n) {\n  const uploadInputRef = useRef<HTMLInputElement>(null);\n  const uploadButtonLabelId = useUniqueId('upload-button-label');\n  const formFieldContext = useFormFieldContext(restProps);\n  const selfControlId = useUniqueId('upload-input');\n  const controlId = formFieldContext.controlId ?? selfControlId;\n\n  useForwardFocus(ref, uploadInputRef);\n\n  const [isFocused, setIsFocused] = useState(false);\n\n  const onUploadButtonClick = () => uploadInputRef.current?.click();\n\n  const onUploadInputFocus = () => setIsFocused(true);\n\n  const onUploadInputBlur = () => setIsFocused(false);\n\n  const onUploadInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {\n    onChange(target.files ? Array.from(target.files) : []);\n  };\n\n  const nativeAttributes: Record<string, any> = {\n    'aria-labelledby': joinStrings(formFieldContext.ariaLabelledby, uploadButtonLabelId),\n    'aria-describedby': formFieldContext.ariaDescribedby,\n  };\n  if (formFieldContext.invalid) {\n    nativeAttributes['aria-invalid'] = true;\n  }\n  if (ariaRequired) {\n    nativeAttributes['aria-required'] = true;\n  }\n\n  // Synchronizing component's value with the native file input state.\n  useEffect(() => {\n    // The DataTransfer is not available in jsdom.\n    if (window.DataTransfer) {\n      const dataTransfer = new DataTransfer();\n      for (const file of value) {\n        dataTransfer.items.add(file);\n      }\n      uploadInputRef.current!.files = dataTransfer.files;\n    }\n  }, [value]);\n\n  return (\n    <div className={styles['file-input-container']}>\n      {/* This is the actual interactive and accessible file-upload element. */}\n      {/* It is visually hidden to achieve the desired UX design. */}\n      <input\n        id={controlId}\n        ref={uploadInputRef}\n        type=\"file\"\n        hidden={false}\n        multiple={multiple}\n        accept={accept}\n        onChange={onUploadInputChange}\n        onFocus={onUploadInputFocus}\n        onBlur={onUploadInputBlur}\n        className={styles['upload-input']}\n        {...nativeAttributes}\n      />\n\n      {/* The button is decorative. It dispatches clicks to the file input and is ARIA-hidden. */}\n      {/* When the input is focused the focus outline is forced on the button. */}\n      <InternalButton\n        iconName=\"upload\"\n        formAction=\"none\"\n        onClick={onUploadButtonClick}\n        className={clsx(styles['upload-button'], isFocused && styles['force-focus-outline'])}\n        __nativeAttributes={{ tabIndex: -1, 'aria-hidden': true }}\n      >\n        {children}\n      </InternalButton>\n\n      {/* The file input needs to be labelled with provided content. Can't use the button because it is ARIA-hidden. */}\n      <ScreenreaderOnly id={uploadButtonLabelId}>{children}</ScreenreaderOnly>\n    </div>\n  );\n}\n"]}

package/lib/internal/template/file-upload/file-input/styles.css.js

@@ -1,8 +1,9 @@
 
     import './styles.scoped.css';
     export default {
-  "upload-button": "awsui_upload-button_4xu1k_1753t_9",
-  "upload-input": "awsui_upload-input_4xu1k_1753t_10",
-  "file-input-container": "awsui_file-input-container_4xu1k_1753t_14"
+  "upload-button": "awsui_upload-button_4xu1k_1bqj8_93",
+  "upload-input": "awsui_upload-input_4xu1k_1bqj8_94",
+  "file-input-container": "awsui_file-input-container_4xu1k_1bqj8_98",
+  "force-focus-outline": "awsui_force-focus-outline_4xu1k_1bqj8_107"
 };
   

package/lib/internal/template/file-upload/file-input/styles.scoped.css

@@ -6,16 +6,119 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_upload-button_4xu1k_1753t_9:not(#\9),
-.awsui_upload-input_4xu1k_1753t_10:not(#\9) {
+/*
+ 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
+*/
+/*
+ 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
+*/
+/*
+ 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
+*/
+/*
+ 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
+*/
+/*
+ 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
+*/
+/*
+ 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
+*/
+/*
+ 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
+*/
+/*
+ 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
+*/
+/*
+ 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 */
+/*
+ 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
+*/
+.awsui_upload-button_4xu1k_1bqj8_93:not(#\9),
+.awsui_upload-input_4xu1k_1bqj8_94:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_file-input-container_4xu1k_1753t_14:not(#\9) {
+.awsui_file-input-container_4xu1k_1bqj8_98:not(#\9) {
   position: relative;
 }
 
-.awsui_upload-input_4xu1k_1753t_10:not(#\9) {
+.awsui_upload-input_4xu1k_1bqj8_94:not(#\9) {
   position: absolute;
   clip: rect(0, 0, 0, 0);
+}
+
+body[data-awsui-focus-visible=true] .awsui_upload-button_4xu1k_1bqj8_93.awsui_force-focus-outline_4xu1k_1bqj8_107:not(#\9) {
+  position: relative;
+}
+body[data-awsui-focus-visible=true] .awsui_upload-button_4xu1k_1bqj8_93.awsui_force-focus-outline_4xu1k_1bqj8_107:not(#\9) {
+  outline: 2px dotted transparent;
+  outline-offset: calc(var(--space-button-focus-outline-gutter-znvbd3, 3px) - 1px);
+}
+body[data-awsui-focus-visible=true] .awsui_upload-button_4xu1k_1bqj8_93.awsui_force-focus-outline_4xu1k_1bqj8_107:not(#\9)::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: calc(-1 * var(--space-button-focus-outline-gutter-znvbd3, 3px));
+  top: calc(-1 * var(--space-button-focus-outline-gutter-znvbd3, 3px));
+  width: calc(100% + 2 * var(--space-button-focus-outline-gutter-znvbd3, 3px));
+  height: calc(100% + 2 * var(--space-button-focus-outline-gutter-znvbd3, 3px));
+  border-radius: var(--border-radius-control-default-focus-ring-hekmgc, 2px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
 }

package/lib/internal/template/file-upload/file-input/styles.selectors.js

@@ -2,8 +2,9 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "upload-button": "awsui_upload-button_4xu1k_1753t_9",
-  "upload-input": "awsui_upload-input_4xu1k_1753t_10",
-  "file-input-container": "awsui_file-input-container_4xu1k_1753t_14"
+  "upload-button": "awsui_upload-button_4xu1k_1bqj8_93",
+  "upload-input": "awsui_upload-input_4xu1k_1bqj8_94",
+  "file-input-container": "awsui_file-input-container_4xu1k_1bqj8_98",
+  "force-focus-outline": "awsui_force-focus-outline_4xu1k_1bqj8_107"
 };
   

package/lib/internal/template/internal/components/autosuggest-input/index.js

@@ -149,7 +149,7 @@ const AutosuggestInput = React.forwardRef((_a, ref) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
     return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef }),
-        React.createElement(Dropdown, { minWidth: dropdownWidth, stretchWidth: !dropdownWidth, contentKey: dropdownContentKey, onFocus: handleFocus, onBlur: handleBlur, trigger: React.createElement(InternalInput, Object.assign({ type: "visualSearch", value: value, onChange: event => handleChange(event.detail.value), __onDelayedInput: event => handleDelayedInput(event.detail.value), onKeyDown: handleKeyDown, onKeyUp: onKeyUp, disabled: disabled, disableBrowserAutocorrect: disableBrowserAutocorrect, readOnly: readOnly, ariaRequired: ariaRequired, clearAriaLabel: clearAriaLabel, ref: inputRef, autoComplete: false, __nativeAttributes: nativeAttributes }, formFieldContext)), onMouseDown: handleDropdownMouseDown, open: open, footer: dropdownFooterRef && (React.createElement("div", { ref: dropdownFooterRef, className: styles['dropdown-footer'] }, dropdownFooter)), expandToViewport: expandToViewport, loopFocus: loopFocus }, open && dropdownContent ? (React.createElement("div", { ref: dropdownContentRef, className: styles['dropdown-content'] }, dropdownContent)) : null)));
+        React.createElement(Dropdown, { minWidth: dropdownWidth, stretchWidth: !dropdownWidth, contentKey: dropdownContentKey, onFocus: handleFocus, onBlur: handleBlur, trigger: React.createElement(InternalInput, Object.assign({ type: "visualSearch", value: value, onChange: event => handleChange(event.detail.value), __onDelayedInput: event => handleDelayedInput(event.detail.value), onKeyDown: handleKeyDown, onKeyUp: onKeyUp, disabled: disabled, disableBrowserAutocorrect: disableBrowserAutocorrect, readOnly: readOnly, ariaRequired: ariaRequired, clearAriaLabel: clearAriaLabel, ref: inputRef, autoComplete: false, __nativeAttributes: nativeAttributes }, formFieldContext)), onMouseDown: handleDropdownMouseDown, open: open && !!dropdownContent, footer: dropdownFooterRef && (React.createElement("div", { ref: dropdownFooterRef, className: styles['dropdown-footer'] }, dropdownFooter)), expandToViewport: expandToViewport, loopFocus: loopFocus }, open && dropdownContent ? (React.createElement("div", { ref: dropdownContentRef, className: styles['dropdown-content'] }, dropdownContent)) : null)));
 });
 export default AutosuggestInput;
 //# sourceMappingURL=index.js.map