@cloudscape-design/components 3.0.901 → 3.0.903

package/tabs/styles.css.js

@@ -1,33 +1,35 @@
 
     import './styles.scoped.css';
     export default {
-  "tabs-header": "awsui_tabs-header_14rmt_1ebqu_290",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_1ebqu_298",
-  "pagination-button": "awsui_pagination-button_14rmt_1ebqu_316",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_1ebqu_323",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1ebqu_326",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_1ebqu_330",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1ebqu_333",
-  "tabs-tab": "awsui_tabs-tab_14rmt_1ebqu_338",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1ebqu_348",
-  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_1ebqu_359",
-  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_1ebqu_370",
-  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_1ebqu_370",
-  "refresh": "awsui_refresh_14rmt_1ebqu_375",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1ebqu_379",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1ebqu_421",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1ebqu_499",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1ebqu_506",
-  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_1ebqu_510",
-  "root": "awsui_root_14rmt_1ebqu_514",
-  "tabs": "awsui_tabs_14rmt_1ebqu_290",
-  "tabs-content": "awsui_tabs-content_14rmt_1ebqu_552",
-  "fit-height": "awsui_fit-height_14rmt_1ebqu_556",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_1ebqu_562",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1ebqu_576",
-  "with-paddings": "awsui_with-paddings_14rmt_1ebqu_576",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1ebqu_587",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_1ebqu_598",
-  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_1ebqu_602"
+  "tabs-header": "awsui_tabs-header_14rmt_11l2w_290",
+  "tab-header-scroll-container": "awsui_tab-header-scroll-container_14rmt_11l2w_299",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_11l2w_305",
+  "pagination-button": "awsui_pagination-button_14rmt_11l2w_323",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_11l2w_330",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_11l2w_333",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_11l2w_337",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_11l2w_340",
+  "actions-container": "awsui_actions-container_14rmt_11l2w_345",
+  "tabs-tab": "awsui_tabs-tab_14rmt_11l2w_353",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_11l2w_363",
+  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_11l2w_374",
+  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_11l2w_385",
+  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_11l2w_385",
+  "refresh": "awsui_refresh_14rmt_11l2w_390",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_11l2w_394",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_11l2w_436",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_11l2w_514",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_11l2w_521",
+  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_11l2w_525",
+  "root": "awsui_root_14rmt_11l2w_529",
+  "tabs": "awsui_tabs_14rmt_11l2w_290",
+  "tabs-content": "awsui_tabs-content_14rmt_11l2w_567",
+  "fit-height": "awsui_fit-height_14rmt_11l2w_571",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_11l2w_577",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_11l2w_591",
+  "with-paddings": "awsui_with-paddings_14rmt_11l2w_591",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_11l2w_602",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_11l2w_613",
+  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_11l2w_617"
 };
   

package/tabs/styles.scoped.css

@@ -287,15 +287,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  SPDX-License-Identifier: Apache-2.0
 */
 /* stylelint-disable selector-max-type */
-.awsui_tabs-header_14rmt_1ebqu_290:not(#\9) {
+.awsui_tabs-header_14rmt_11l2w_290:not(#\9) {
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
   padding-inline: 0;
   display: flex;
+  flex-wrap: wrap;
 }
 
-.awsui_tabs-header-list_14rmt_1ebqu_298:not(#\9) {
+.awsui_tab-header-scroll-container_14rmt_11l2w_299:not(#\9) {
+  display: flex;
+  flex-grow: 1;
+  max-inline-size: 100%;
+}
+
+.awsui_tabs-header-list_14rmt_11l2w_305:not(#\9) {
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
@@ -309,33 +316,41 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -ms-overflow-style: none; /* Internet Explorer 10+ */
   scrollbar-width: none; /* Firefox */
 }
-.awsui_tabs-header-list_14rmt_1ebqu_298:not(#\9)::-webkit-scrollbar {
+.awsui_tabs-header-list_14rmt_11l2w_305:not(#\9)::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
 
-.awsui_pagination-button_14rmt_1ebqu_316:not(#\9) {
+.awsui_pagination-button_14rmt_11l2w_323:not(#\9) {
   margin-block: var(--space-scaled-s-aqzyko, 12px);
   margin-inline: 0;
   padding-block: 0;
   padding-inline: var(--space-xxs-p8yyaw, 4px);
   display: flex;
 }
-.awsui_pagination-button-left_14rmt_1ebqu_323:not(#\9) {
+.awsui_pagination-button-left_14rmt_11l2w_330:not(#\9) {
   border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-control-disabled-qc5csz, #dedee3);
 }
-.awsui_pagination-button-left-scrollable_14rmt_1ebqu_326:not(#\9) {
+.awsui_pagination-button-left-scrollable_14rmt_11l2w_333:not(#\9) {
   z-index: 1;
   box-shadow: 5px 0px 4px -3px var(--color-border-tabs-shadow-enjrr2, rgba(15, 20, 26, 0.12)), 1px 0px 0px 0px var(--color-border-tabs-shadow-enjrr2, rgba(15, 20, 26, 0.12));
 }
-.awsui_pagination-button-right_14rmt_1ebqu_330:not(#\9) {
+.awsui_pagination-button-right_14rmt_11l2w_337:not(#\9) {
   border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-control-disabled-qc5csz, #dedee3);
 }
-.awsui_pagination-button-right-scrollable_14rmt_1ebqu_333:not(#\9) {
+.awsui_pagination-button-right-scrollable_14rmt_11l2w_340:not(#\9) {
   z-index: 1;
   box-shadow: -5px 0px 4px -3px var(--color-border-tabs-shadow-enjrr2, rgba(15, 20, 26, 0.12)), -1px 0px 0px 0 var(--color-border-tabs-shadow-enjrr2, rgba(15, 20, 26, 0.12));
 }
 
-.awsui_tabs-tab_14rmt_1ebqu_338:not(#\9) {
+.awsui_actions-container_14rmt_11l2w_345:not(#\9) {
+  flex-shrink: 0;
+  align-self: center;
+  padding-block: var(--space-xs-zb16t3, 8px);
+  padding-inline: var(--space-xs-zb16t3, 8px);
+  margin-inline-start: auto;
+}
+
+.awsui_tabs-tab_14rmt_11l2w_353:not(#\9) {
   list-style: none;
   padding-block: 0;
   padding-inline: 0;
@@ -345,7 +360,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   scroll-snap-align: start;
 }
 
-.awsui_tabs-tab-label_14rmt_1ebqu_348:not(#\9) {
+.awsui_tabs-tab-label_14rmt_11l2w_363:not(#\9) {
   display: flex;
   align-items: center;
   padding-inline: var(--space-xs-zb16t3, 8px);
@@ -356,7 +371,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-break: break-word;
 }
 
-.awsui_tabs-tab-header-container_14rmt_1ebqu_359:not(#\9) {
+.awsui_tabs-tab-header-container_14rmt_11l2w_374:not(#\9) {
   position: relative;
   border-block: var(--border-divider-section-width-1061zr, 1px) solid transparent;
   border-inline: var(--border-divider-section-width-1061zr, 1px) solid transparent;
@@ -364,19 +379,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
   align-items: stretch;
 }
-.awsui_tabs-tab-header-container_14rmt_1ebqu_359:not(#\9), .awsui_tabs-tab-header-container_14rmt_1ebqu_359 > button:not(#\9) {
+.awsui_tabs-tab-header-container_14rmt_11l2w_374:not(#\9), .awsui_tabs-tab-header-container_14rmt_11l2w_374 > button:not(#\9) {
   background-color: transparent;
 }
-.awsui_tabs-tab-header-container_14rmt_1ebqu_359 > .awsui_tabs-tab-dismiss_14rmt_1ebqu_370:not(#\9), .awsui_tabs-tab-header-container_14rmt_1ebqu_359 > .awsui_tabs-tab-action_14rmt_1ebqu_370:not(#\9) {
+.awsui_tabs-tab-header-container_14rmt_11l2w_374 > .awsui_tabs-tab-dismiss_14rmt_11l2w_385:not(#\9), .awsui_tabs-tab-header-container_14rmt_11l2w_374 > .awsui_tabs-tab-action_14rmt_11l2w_385:not(#\9) {
   position: relative;
   display: flex;
   align-items: center;
 }
-.awsui_tabs-tab-header-container_14rmt_1ebqu_359.awsui_refresh_14rmt_1ebqu_375 > span:not(#\9):first-of-type {
+.awsui_tabs-tab-header-container_14rmt_11l2w_374.awsui_refresh_14rmt_11l2w_390 > span:not(#\9):first-of-type {
   margin-inline-start: calc(-1 * var(--space-scaled-xs-26e2du, 8px));
 }
 
-.awsui_tabs-tab-header-container_14rmt_1ebqu_359:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1ebqu_379):after {
+.awsui_tabs-tab-header-container_14rmt_11l2w_374:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_11l2w_394):after {
   content: "";
   position: absolute;
   inset-inline-start: 0;
@@ -390,35 +405,35 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background: var(--color-border-tabs-underline-a5fmhd, #006ce0);
   opacity: 0;
 }
-.awsui_tabs-tab-header-container_14rmt_1ebqu_359:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1ebqu_379).awsui_refresh_14rmt_1ebqu_375:after {
+.awsui_tabs-tab-header-container_14rmt_11l2w_374:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_11l2w_394).awsui_refresh_14rmt_11l2w_390:after {
   transition: opacity var(--motion-duration-refresh-only-medium-nf6485, 165ms) var(--motion-easing-refresh-only-c-vg1m9h, cubic-bezier(0.84, 0, 0.16, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_tabs-tab-header-container_14rmt_1ebqu_359:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1ebqu_379).awsui_refresh_14rmt_1ebqu_375:after {
+  .awsui_tabs-tab-header-container_14rmt_11l2w_374:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_11l2w_394).awsui_refresh_14rmt_11l2w_390:after {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_tabs-tab-header-container_14rmt_1ebqu_359:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1ebqu_379).awsui_refresh_14rmt_1ebqu_375:after, .awsui-mode-entering .awsui_tabs-tab-header-container_14rmt_1ebqu_359:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1ebqu_379).awsui_refresh_14rmt_1ebqu_375:after {
+.awsui-motion-disabled .awsui_tabs-tab-header-container_14rmt_11l2w_374:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_11l2w_394).awsui_refresh_14rmt_11l2w_390:after, .awsui-mode-entering .awsui_tabs-tab-header-container_14rmt_11l2w_374:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_11l2w_394).awsui_refresh_14rmt_11l2w_390:after {
   animation: none;
   transition: none;
 }
 
-.awsui_tabs-tab_14rmt_1ebqu_338:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1ebqu_359 {
+.awsui_tabs-tab_14rmt_11l2w_353:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_11l2w_374 {
   margin-inline-end: calc(-1 * var(--border-divider-section-width-1061zr, 1px));
 }
-.awsui_tabs-tab_14rmt_1ebqu_338:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1ebqu_359:before {
+.awsui_tabs-tab_14rmt_11l2w_353:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_11l2w_374:before {
   content: "";
   position: absolute;
   border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-tabs-divider-djfdfj, #c6c6cd);
   inset: var(--space-scaled-s-aqzyko, 12px) 0;
   opacity: 1;
 }
-.awsui_tabs-tab_14rmt_1ebqu_338:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1ebqu_359.awsui_refresh_14rmt_1ebqu_375:before {
+.awsui_tabs-tab_14rmt_11l2w_353:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_11l2w_374.awsui_refresh_14rmt_11l2w_390:before {
   inset: calc(var(--space-static-s-n2eb28, 12px) - var(--border-active-width-9dmqf4, 4px)) 0;
 }
 
-.awsui_tabs-tab-link_14rmt_1ebqu_421:not(#\9) {
+.awsui_tabs-tab-link_14rmt_11l2w_436:not(#\9) {
   position: relative;
   display: flex;
   align-items: stretch;
@@ -439,27 +454,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_tabs-tab-link_14rmt_1ebqu_421.awsui_refresh_14rmt_1ebqu_375:not(#\9) {
+.awsui_tabs-tab-link_14rmt_11l2w_436.awsui_refresh_14rmt_11l2w_390:not(#\9) {
   padding-block-start: calc(var(--space-static-xs-7sfb63, 8px) - 1px);
   padding-block-end: calc(var(--space-static-xs-7sfb63, 8px) - 1px);
   margin-block-start: 0;
 }
-.awsui_tabs-tab-link_14rmt_1ebqu_421:not(#\9):hover {
+.awsui_tabs-tab-link_14rmt_11l2w_436:not(#\9):hover {
   color: var(--color-text-accent-fptgkc, #006ce0);
 }
-.awsui_tabs-tab-link_14rmt_1ebqu_421:not(#\9):focus {
+.awsui_tabs-tab-link_14rmt_11l2w_436:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1ebqu_421:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_11l2w_436:not(#\9):focus {
   z-index: 1;
   border-inline-end-color: transparent;
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1ebqu_421:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_11l2w_436:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-tabs-focus-outline-gutter-xm37ly, -8px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1ebqu_421:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_11l2w_436:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -474,48 +489,48 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1ebqu_421:not(#\9
   box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
 }
 
-.awsui_tabs-tab_14rmt_1ebqu_338:not(#\9):first-child {
+.awsui_tabs-tab_14rmt_11l2w_353:not(#\9):first-child {
   margin-inline-start: 1px;
   scroll-margin-inline-start: 1px;
 }
-.awsui_tabs-tab_14rmt_1ebqu_338:not(#\9):first-child > .awsui_tabs-tab-header-container_14rmt_1ebqu_359 {
+.awsui_tabs-tab_14rmt_11l2w_353:not(#\9):first-child > .awsui_tabs-tab-header-container_14rmt_11l2w_374 {
   padding-inline-start: calc(var(--space-xs-zb16t3, 8px) - 1px);
 }
 
-.awsui_tabs-tab_14rmt_1ebqu_338:not(#\9):last-child {
+.awsui_tabs-tab_14rmt_11l2w_353:not(#\9):last-child {
   margin-inline-end: 1px;
   scroll-margin-inline-end: 1px;
 }
-.awsui_tabs-tab_14rmt_1ebqu_338:not(#\9):last-child > .awsui_tabs-tab-header-container_14rmt_1ebqu_359 {
+.awsui_tabs-tab_14rmt_11l2w_353:not(#\9):last-child > .awsui_tabs-tab-header-container_14rmt_11l2w_374 {
   padding-inline-end: calc(var(--space-xs-zb16t3, 8px) - 1px);
 }
 
-.awsui_tabs-tab-disabled_14rmt_1ebqu_379:not(#\9), .awsui_tabs-tab-disabled_14rmt_1ebqu_379:not(#\9):hover {
+.awsui_tabs-tab-disabled_14rmt_11l2w_394:not(#\9), .awsui_tabs-tab-disabled_14rmt_11l2w_394:not(#\9):hover {
   cursor: default;
   color: var(--color-text-interactive-disabled-f5b4z5, #b4b4bb);
   font-weight: var(--font-tabs-disabled-weight-1xcs5l, 700);
 }
 
-.awsui_tabs-tab-active_14rmt_1ebqu_499:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1ebqu_379) {
+.awsui_tabs-tab-active_14rmt_11l2w_514:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_11l2w_394) {
   color: var(--color-text-accent-fptgkc, #006ce0);
 }
-.awsui_tabs-tab-active_14rmt_1ebqu_499:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1ebqu_379):after {
+.awsui_tabs-tab-active_14rmt_11l2w_514:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_11l2w_394):after {
   opacity: 1;
 }
 
-.awsui_tabs-header-with-divider_14rmt_1ebqu_506:not(#\9) {
+.awsui_tabs-header-with-divider_14rmt_11l2w_521:not(#\9) {
   border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-tabs-divider-djfdfj, #c6c6cd);
 }
 
-.awsui_tabs-tab-focusable_14rmt_1ebqu_510:not(#\9) {
+.awsui_tabs-tab-focusable_14rmt_11l2w_525:not(#\9) {
   /* used to manage focusable logic */
 }
 
-.awsui_root_14rmt_1ebqu_514:not(#\9) {
+.awsui_root_14rmt_11l2w_529:not(#\9) {
   /* used in test-utils or tests */
 }
 
-.awsui_tabs_14rmt_1ebqu_290:not(#\9) {
+.awsui_tabs_14rmt_11l2w_290:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -550,21 +565,21 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1ebqu_421:not(#\9
   inline-size: 100%;
 }
 
-.awsui_tabs-content_14rmt_1ebqu_552:not(#\9) {
+.awsui_tabs-content_14rmt_11l2w_567:not(#\9) {
   display: none;
 }
 
-.awsui_fit-height_14rmt_1ebqu_556:not(#\9) {
+.awsui_fit-height_14rmt_11l2w_571:not(#\9) {
   display: flex;
   flex-direction: column;
   block-size: 100%;
 }
 
-.awsui_tabs-content-active_14rmt_1ebqu_562:not(#\9) {
+.awsui_tabs-content-active_14rmt_11l2w_577:not(#\9) {
   display: block;
   flex: 1;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_1ebqu_562:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_11l2w_577:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
@@ -574,32 +589,32 @@ body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_1ebqu_562:n
   box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
 }
 
-.awsui_tabs-content-wrapper_14rmt_1ebqu_576.awsui_with-paddings_14rmt_1ebqu_576 > .awsui_tabs-content_14rmt_1ebqu_552:not(#\9) {
+.awsui_tabs-content-wrapper_14rmt_11l2w_591.awsui_with-paddings_14rmt_11l2w_591 > .awsui_tabs-content_14rmt_11l2w_567:not(#\9) {
   padding-block: var(--space-scaled-m-mo5yse, 16px);
   padding-inline: 0;
 }
-.awsui_fit-height_14rmt_1ebqu_556 > .awsui_tabs-content-wrapper_14rmt_1ebqu_576:not(#\9) {
+.awsui_fit-height_14rmt_11l2w_571 > .awsui_tabs-content-wrapper_14rmt_11l2w_591:not(#\9) {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: auto;
 }
 
-.awsui_fit-height_14rmt_1ebqu_556 > .awsui_tabs-content-wrapper_14rmt_1ebqu_576 > .awsui_tabs-container-content-wrapper_14rmt_1ebqu_587:not(#\9) {
+.awsui_fit-height_14rmt_11l2w_571 > .awsui_tabs-content-wrapper_14rmt_11l2w_591 > .awsui_tabs-container-content-wrapper_14rmt_11l2w_602:not(#\9) {
   block-size: 100%;
   display: flex;
   flex-direction: column;
 }
-.awsui_tabs-container-content-wrapper_14rmt_1ebqu_587.awsui_with-paddings_14rmt_1ebqu_576 > .awsui_tabs-content_14rmt_1ebqu_552:not(#\9) {
+.awsui_tabs-container-content-wrapper_14rmt_11l2w_602.awsui_with-paddings_14rmt_11l2w_591 > .awsui_tabs-content_14rmt_11l2w_567:not(#\9) {
   padding-block-start: var(--space-tabs-content-top-dedu0k, 12px);
   padding-block-end: var(--space-scaled-l-0hpmd7, 20px);
   padding-inline: var(--space-container-horizontal-wfukh3, 20px);
 }
 
-.awsui_disabled-reason-tooltip_14rmt_1ebqu_598:not(#\9) {
+.awsui_disabled-reason-tooltip_14rmt_11l2w_613:not(#\9) {
   /* used in test-utils or tests */
 }
 
-.awsui_tabs-tab-focused_14rmt_1ebqu_602:not(#\9) {
+.awsui_tabs-tab-focused_14rmt_11l2w_617:not(#\9) {
   /* used to manage focusable state for disabled with reason tabs */
 }

package/tabs/styles.selectors.js

@@ -2,33 +2,35 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "tabs-header": "awsui_tabs-header_14rmt_1ebqu_290",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_1ebqu_298",
-  "pagination-button": "awsui_pagination-button_14rmt_1ebqu_316",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_1ebqu_323",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1ebqu_326",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_1ebqu_330",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1ebqu_333",
-  "tabs-tab": "awsui_tabs-tab_14rmt_1ebqu_338",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1ebqu_348",
-  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_1ebqu_359",
-  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_1ebqu_370",
-  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_1ebqu_370",
-  "refresh": "awsui_refresh_14rmt_1ebqu_375",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1ebqu_379",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1ebqu_421",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1ebqu_499",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1ebqu_506",
-  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_1ebqu_510",
-  "root": "awsui_root_14rmt_1ebqu_514",
-  "tabs": "awsui_tabs_14rmt_1ebqu_290",
-  "tabs-content": "awsui_tabs-content_14rmt_1ebqu_552",
-  "fit-height": "awsui_fit-height_14rmt_1ebqu_556",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_1ebqu_562",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1ebqu_576",
-  "with-paddings": "awsui_with-paddings_14rmt_1ebqu_576",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1ebqu_587",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_1ebqu_598",
-  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_1ebqu_602"
+  "tabs-header": "awsui_tabs-header_14rmt_11l2w_290",
+  "tab-header-scroll-container": "awsui_tab-header-scroll-container_14rmt_11l2w_299",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_11l2w_305",
+  "pagination-button": "awsui_pagination-button_14rmt_11l2w_323",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_11l2w_330",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_11l2w_333",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_11l2w_337",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_11l2w_340",
+  "actions-container": "awsui_actions-container_14rmt_11l2w_345",
+  "tabs-tab": "awsui_tabs-tab_14rmt_11l2w_353",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_11l2w_363",
+  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_11l2w_374",
+  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_11l2w_385",
+  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_11l2w_385",
+  "refresh": "awsui_refresh_14rmt_11l2w_390",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_11l2w_394",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_11l2w_436",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_11l2w_514",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_11l2w_521",
+  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_11l2w_525",
+  "root": "awsui_root_14rmt_11l2w_529",
+  "tabs": "awsui_tabs_14rmt_11l2w_290",
+  "tabs-content": "awsui_tabs-content_14rmt_11l2w_567",
+  "fit-height": "awsui_fit-height_14rmt_11l2w_571",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_11l2w_577",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_11l2w_591",
+  "with-paddings": "awsui_with-paddings_14rmt_11l2w_591",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_11l2w_602",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_11l2w_613",
+  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_11l2w_617"
 };
   

package/tabs/tab-header-bar.d.ts

@@ -9,8 +9,10 @@ interface TabHeaderBarProps {
     ariaLabel?: string;
     ariaLabelledby?: string;
     i18nStrings?: TabsProps.I18nStrings;
+    keyboardActivationMode: Required<TabsProps['keyboardActivationMode']>;
+    actions?: TabsProps['actions'];
 }
-export declare function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace, ariaLabel, ariaLabelledby, i18nStrings, }: TabHeaderBarProps): JSX.Element;
+export declare function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace, ariaLabel, ariaLabelledby, i18nStrings, keyboardActivationMode, actions, }: TabHeaderBarProps): JSX.Element;
 export declare function getTabElementId({ namespace, tabId }: {
     namespace: string;
     tabId: string;

package/tabs/tab-header-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-header-bar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.tsx"],"names":[],"mappings":";AA8BA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AA0CzC,UAAU,iBAAiB;IACzB,QAAQ,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,YAAY,KAAK,IAAI,CAAC;IACzD,WAAW,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACtC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,EACd,WAAW,GACZ,EAAE,iBAAiB,eAuZnB;AA6ED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,UAEzF"}
+{"version":3,"file":"tab-header-bar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.tsx"],"names":[],"mappings":";AA8BA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AA0CzC,UAAU,iBAAiB;IACzB,QAAQ,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,YAAY,KAAK,IAAI,CAAC;IACzD,WAAW,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACtC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IACpC,sBAAsB,EAAE,QAAQ,CAAC,SAAS,CAAC,wBAAwB,CAAC,CAAC,CAAC;IACtE,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,OAAO,GACR,EAAE,iBAAiB,eAqanB;AA6ED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,UAEzF"}

package/tabs/tab-header-bar.js

@@ -26,7 +26,7 @@ const focusableTabSelector = `.${styles['tabs-tab-focusable']}`;
 function dismissButton({ dismissLabel, dismissDisabled, onDismiss, tabId, }) {
     return (React.createElement(InternalButton, { onClick: onDismiss, variant: "icon", iconName: "close", formAction: "none", ariaLabel: dismissLabel, disabled: dismissDisabled, className: clsx(testUtilStyles['tab-dismiss-button'], analyticsSelectors['tab-dismiss-button']), "data-testid": `awsui-tab-dismiss-button-${tabId}` }));
 }
-export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace, ariaLabel, ariaLabelledby, i18nStrings, }) {
+export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace, ariaLabel, ariaLabelledby, i18nStrings, keyboardActivationMode, actions, }) {
     const headerBarRef = useRef(null);
     const activeTabHeaderRef = useRef(null);
     const inlineStartOverflowButton = useRef(null);
@@ -145,7 +145,15 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
     }
     function onKeyDown(event) {
         const focusTarget = document.activeElement;
-        const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];
+        const specialKeys = [
+            KeyCode.right,
+            KeyCode.left,
+            KeyCode.end,
+            KeyCode.home,
+            KeyCode.pageUp,
+            KeyCode.pageDown,
+            KeyCode.space,
+        ];
         const isActionOpen = document.querySelector(`.${styles['tabs-tab-action']} [aria-expanded="true"]`);
         const isDismissOrActionFocused = !(focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.classList.contains(styles['tabs-tab-link']));
         if (isActionOpen) {
@@ -173,6 +181,12 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
             onInlineEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),
             onPageDown: () => inlineEndOverflow && onPaginationClick(headerBarRef, 'forward'),
             onPageUp: () => inlineStartOverflow && onPaginationClick(headerBarRef, 'backward'),
+            onActivate: () => {
+                var _a;
+                return focusedTabId &&
+                    focusedTabId !== activeTabId &&
+                    onChange({ activeTabId: focusedTabId, activeTabHref: (_a = tabs.find(tab => tab.id === focusedTabId)) === null || _a === void 0 ? void 0 : _a.href });
+            },
         });
     }
     function focusElement(element) {
@@ -185,7 +199,7 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
             if (tabId !== activeTabId && focusTargetTabLabelElement === element) {
                 setPreviousActiveTabId(tabId);
                 setFocusedTabId(tabId);
-                if (!((_a = tabsById.get(tabId)) === null || _a === void 0 ? void 0 : _a.disabled)) {
+                if (!((_a = tabsById.get(tabId)) === null || _a === void 0 ? void 0 : _a.disabled) && keyboardActivationMode === 'automatic') {
                     onChange({ activeTabId: tabId, activeTabHref: (_b = tabsById.get(tabId)) === null || _b === void 0 ? void 0 : _b.href });
                 }
                 break;
@@ -207,15 +221,15 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
         return getAllFocusables(target).filter(el => isElementRegistered(el) && isElementFocusable(el));
     }
     const TabList = hasActionOrDismissible ? 'div' : 'ul';
-    return (
-    //converted span to div as list should not be a child of span for HTML validation
-    React.createElement("div", { className: classes, ref: containerRef },
-        horizontalOverflow && (React.createElement("span", { ref: inlineStartOverflowButton, className: leftButtonClasses },
-            React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-left", disabled: !inlineStartOverflow, __focusable: true, onClick: () => onPaginationClick(headerBarRef, 'backward'), ariaLabel: i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.scrollLeftAriaLabel) }))),
-        React.createElement(SingleTabStopNavigationProvider, { ref: navigationAPI, navigationActive: true, getNextFocusTarget: getNextFocusTarget, onUnregisterActive: onUnregisterActive },
-            React.createElement(TabList, Object.assign({}, tabActionAttributes, { className: clsx(styles['tabs-header-list'], analyticsSelectors['tabs-header-list']), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ref: headerBarRef, onScroll: onScroll, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur }), tabs.map(renderTabHeader))),
-        horizontalOverflow && (React.createElement("span", { className: rightButtonClasses },
-            React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-right", disabled: !inlineEndOverflow, __focusable: true, onClick: () => onPaginationClick(headerBarRef, 'forward'), ariaLabel: i18n('i18nStrings.scrollRightAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.scrollRightAriaLabel) })))));
+    return (React.createElement("div", { className: classes },
+        React.createElement("div", { className: styles['tab-header-scroll-container'], ref: containerRef },
+            horizontalOverflow && (React.createElement("span", { ref: inlineStartOverflowButton, className: leftButtonClasses },
+                React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-left", disabled: !inlineStartOverflow, __focusable: true, onClick: () => onPaginationClick(headerBarRef, 'backward'), ariaLabel: i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.scrollLeftAriaLabel) }))),
+            React.createElement(SingleTabStopNavigationProvider, { ref: navigationAPI, navigationActive: true, getNextFocusTarget: getNextFocusTarget, onUnregisterActive: onUnregisterActive },
+                React.createElement(TabList, Object.assign({}, tabActionAttributes, { className: clsx(styles['tabs-header-list'], analyticsSelectors['tabs-header-list']), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ref: headerBarRef, onScroll: onScroll, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur }), tabs.map(renderTabHeader))),
+            horizontalOverflow && (React.createElement("span", { className: rightButtonClasses },
+                React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-right", disabled: !inlineEndOverflow, __focusable: true, onClick: () => onPaginationClick(headerBarRef, 'forward'), ariaLabel: i18n('i18nStrings.scrollRightAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.scrollRightAriaLabel) })))),
+        actions && React.createElement("div", { className: styles['actions-container'] }, actions)));
     function renderTabHeader(tab, index) {
         const { dismissible, dismissLabel, dismissDisabled, action, onDismiss } = tab;
         const isActive = activeTabId === tab.id && !tab.disabled;