@cloudscape-design/components 3.0.674 → 3.0.676

package/tabs/styles.scoped.css

@@ -191,7 +191,7 @@ 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_jrbtu_194:not(#\9) {
+.awsui_tabs-header_14rmt_8vbks_194:not(#\9) {
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
@@ -199,7 +199,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
 }
 
-.awsui_tabs-header-list_14rmt_jrbtu_202:not(#\9) {
+.awsui_tabs-header-list_14rmt_8vbks_202:not(#\9) {
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
@@ -212,33 +212,33 @@ 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_jrbtu_202:not(#\9)::-webkit-scrollbar {
+.awsui_tabs-header-list_14rmt_8vbks_202:not(#\9)::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
 
-.awsui_pagination-button_14rmt_jrbtu_219:not(#\9) {
+.awsui_pagination-button_14rmt_8vbks_219: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_jrbtu_226:not(#\9) {
+.awsui_pagination-button-left_14rmt_8vbks_226:not(#\9) {
   border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-control-disabled-bv2kkn, #d1d5db);
 }
-.awsui_pagination-button-left-scrollable_14rmt_jrbtu_229:not(#\9) {
+.awsui_pagination-button-left-scrollable_14rmt_8vbks_229:not(#\9) {
   z-index: 1;
   box-shadow: 5px 0px 4px -3px var(--color-border-tabs-shadow-w5xpb4, rgba(0, 7, 22, 0.12)), 1px 0px 0px 0px var(--color-border-tabs-shadow-w5xpb4, rgba(0, 7, 22, 0.12));
 }
-.awsui_pagination-button-right_14rmt_jrbtu_233:not(#\9) {
+.awsui_pagination-button-right_14rmt_8vbks_233:not(#\9) {
   border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-control-disabled-bv2kkn, #d1d5db);
 }
-.awsui_pagination-button-right-scrollable_14rmt_jrbtu_236:not(#\9) {
+.awsui_pagination-button-right-scrollable_14rmt_8vbks_236:not(#\9) {
   z-index: 1;
   box-shadow: -5px 0px 4px -3px var(--color-border-tabs-shadow-w5xpb4, rgba(0, 7, 22, 0.12)), -1px 0px 0px 0 var(--color-border-tabs-shadow-w5xpb4, rgba(0, 7, 22, 0.12));
 }
 
-.awsui_tabs-tab_14rmt_jrbtu_241:not(#\9) {
+.awsui_tabs-tab_14rmt_8vbks_241:not(#\9) {
   list-style: none;
   padding-block: 0;
   padding-inline: 0;
@@ -246,34 +246,92 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
   max-inline-size: calc(90% - var(--space-l-t419sm, 20px));
 }
-.awsui_tabs-tab_14rmt_jrbtu_241 > button:not(#\9) {
-  background-color: transparent;
-}
 
-.awsui_tabs-tab-label_14rmt_jrbtu_253:not(#\9) {
+.awsui_tabs-tab-label_14rmt_8vbks_250:not(#\9) {
   display: flex;
   align-items: center;
+  padding-inline: var(--space-xs-zb16t3, 8px);
   padding-block: var(--space-scaled-2x-xxs-7v8ivz, 4px);
-  padding-inline: var(--space-l-t419sm, 20px);
   text-align: start;
   position: relative;
   min-inline-size: 0;
   word-break: break-word;
 }
 
-.awsui_tabs-tab_14rmt_jrbtu_241:not(#\9):not(:last-child) > a > .awsui_tabs-tab-label_14rmt_jrbtu_253, .awsui_tabs-tab_14rmt_jrbtu_241:not(#\9):not(:last-child) > button > .awsui_tabs-tab-label_14rmt_jrbtu_253 {
+.awsui_tabs-tab-dismiss_14rmt_8vbks_261:not(#\9),
+.awsui_tabs-tab-action_14rmt_8vbks_262:not(#\9) {
+  /* Used as a selector for tests */
+}
+
+.awsui_tabs-tab-header-container_14rmt_8vbks_266: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;
+  padding-inline: var(--space-xs-zb16t3, 8px);
+  display: flex;
+  align-items: stretch;
+}
+.awsui_tabs-tab-header-container_14rmt_8vbks_266:not(#\9), .awsui_tabs-tab-header-container_14rmt_8vbks_266 > button:not(#\9) {
+  background-color: transparent;
+}
+.awsui_tabs-tab-header-container_14rmt_8vbks_266 > .awsui_tabs-tab-dismiss_14rmt_8vbks_261:not(#\9), .awsui_tabs-tab-header-container_14rmt_8vbks_266 > .awsui_tabs-tab-action_14rmt_8vbks_262:not(#\9) {
+  display: flex;
+  align-items: center;
+}
+.awsui_tabs-tab-header-container_14rmt_8vbks_266.awsui_refresh_14rmt_8vbks_281 > span:not(#\9):first-of-type {
+  margin-inline-start: calc(-1 * var(--space-scaled-xs-26e2du, 8px));
+}
+
+.awsui_tabs-tab-header-container_14rmt_8vbks_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_8vbks_285):after {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0;
+  inline-size: calc(100% - 1px);
+  inset-block-end: calc(-1 * var(--border-divider-section-width-1061zr, 1px));
+  block-size: var(--border-active-width-9dmqf4, 4px);
+  border-start-start-radius: var(--border-radius-tabs-focus-ring-1q0rjo, 20px);
+  border-start-end-radius: var(--border-radius-tabs-focus-ring-1q0rjo, 20px);
+  border-end-start-radius: var(--border-radius-tabs-focus-ring-1q0rjo, 20px);
+  border-end-end-radius: var(--border-radius-tabs-focus-ring-1q0rjo, 20px);
+  background: var(--color-border-tabs-underline-f1qo5r, #0972d3);
+  opacity: 0;
+}
+.awsui_tabs-tab-header-container_14rmt_8vbks_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_8vbks_285).awsui_refresh_14rmt_8vbks_281: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_8vbks_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_8vbks_285).awsui_refresh_14rmt_8vbks_281:after {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_tabs-tab-header-container_14rmt_8vbks_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_8vbks_285).awsui_refresh_14rmt_8vbks_281:after, .awsui-mode-entering .awsui_tabs-tab-header-container_14rmt_8vbks_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_8vbks_285).awsui_refresh_14rmt_8vbks_281:after {
+  animation: none;
+  transition: none;
+}
+
+.awsui_tabs-tab_14rmt_8vbks_241:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_8vbks_266 {
   margin-inline-end: calc(-1 * var(--border-divider-section-width-1061zr, 1px));
+}
+.awsui_tabs-tab_14rmt_8vbks_241:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_8vbks_266:before {
+  content: "";
+  position: absolute;
   border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-tabs-divider-6vpso4, #b6bec9);
+  inset: calc(var(--space-scaled-s-aqzyko, 12px)) 0;
+  opacity: 1;
+}
+.awsui_tabs-tab_14rmt_8vbks_241:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_8vbks_266.awsui_refresh_14rmt_8vbks_281:before {
+  inset: calc(var(--space-scaled-s-aqzyko, 12px) - var(--border-active-width-9dmqf4, 4px)) 0;
 }
 
-.awsui_tabs-tab-link_14rmt_jrbtu_269:not(#\9) {
+.awsui_tabs-tab-link_14rmt_8vbks_327:not(#\9) {
   position: relative;
   display: flex;
   align-items: stretch;
   text-decoration: none;
   cursor: pointer;
-  padding-block-start: calc(var(--space-scaled-s-aqzyko, 12px) - 1px);
-  padding-block-end: var(--space-scaled-s-aqzyko, 12px);
+  padding-block-start: calc(var(--space-scaled-s-aqzyko, 12px) - 2px);
+  padding-block-end: calc(var(--space-scaled-s-aqzyko, 12px) - 1px);
   padding-inline: 0;
   margin-block-start: 1px;
   border-block: var(--border-divider-section-width-1061zr, 1px) solid transparent;
@@ -282,29 +340,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   line-height: var(--font-tabs-line-height-dzo7k3, 20px);
   font-weight: var(--font-wayfinding-link-active-weight-rbmzei, 700);
   color: var(--color-text-interactive-default-lnx6lk, #414d5c);
+  padding-inline-start: calc(var(--space-xxs-p8yyaw, 4px) - 1px);
+  padding-inline-end: var(--space-xxs-p8yyaw, 4px);
   -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_jrbtu_269.awsui_refresh_14rmt_jrbtu_288:not(#\9) {
+.awsui_tabs-tab-link_14rmt_8vbks_327.awsui_refresh_14rmt_8vbks_281:not(#\9) {
   padding-block-start: calc(var(--space-static-xs-7sfb63, 8px) - 1px);
-  padding-block-end: var(--space-static-xs-7sfb63, 8px);
-  padding-inline: 0;
+  padding-block-end: calc(var(--space-static-xs-7sfb63, 8px) - 1px);
+  margin-block-start: 0;
 }
-.awsui_tabs-tab-link_14rmt_jrbtu_269:not(#\9):hover {
+.awsui_tabs-tab-link_14rmt_8vbks_327:not(#\9):hover {
   color: var(--color-text-accent-n2acxv, #0972d3);
 }
-.awsui_tabs-tab-link_14rmt_jrbtu_269:not(#\9):focus {
+.awsui_tabs-tab-link_14rmt_8vbks_327:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_jrbtu_269:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_8vbks_327:not(#\9):focus {
   z-index: 1;
   position: relative;
+  border-inline-end-color: transparent;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_jrbtu_269:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_8vbks_327: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_jrbtu_269:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_8vbks_327:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -318,75 +379,44 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_jrbtu_269:not(#\9
   border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_jrbtu_269:not(#\9):focus > a > .awsui_tabs-tab-label_14rmt_jrbtu_253, body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_jrbtu_269:not(#\9):focus > button > .awsui_tabs-tab-label_14rmt_jrbtu_253 {
-  border-inline-end-color: transparent;
-}
 
-.awsui_tabs-tab_14rmt_jrbtu_241:not(#\9):first-child {
+.awsui_tabs-tab_14rmt_8vbks_241:not(#\9):first-child {
   margin-inline-start: 1px;
 }
-.awsui_tabs-tab_14rmt_jrbtu_241:not(#\9):first-child > a > .awsui_tabs-tab-label_14rmt_jrbtu_253, .awsui_tabs-tab_14rmt_jrbtu_241:not(#\9):first-child > button > .awsui_tabs-tab-label_14rmt_jrbtu_253 {
-  padding-inline-start: calc(var(--space-l-t419sm, 20px) - 1px);
+.awsui_tabs-tab_14rmt_8vbks_241:not(#\9):first-child > .awsui_tabs-tab-header-container_14rmt_8vbks_266 {
+  padding-inline-start: calc(var(--space-xs-zb16t3, 8px) - 1px);
 }
 
-.awsui_tabs-tab_14rmt_jrbtu_241:not(#\9):last-child {
+.awsui_tabs-tab_14rmt_8vbks_241:not(#\9):last-child {
   margin-inline-end: 1px;
 }
-.awsui_tabs-tab_14rmt_jrbtu_241:not(#\9):last-child > a > .awsui_tabs-tab-label_14rmt_jrbtu_253, .awsui_tabs-tab_14rmt_jrbtu_241:not(#\9):last-child > button > .awsui_tabs-tab-label_14rmt_jrbtu_253 {
-  padding-inline-end: calc(var(--space-l-t419sm, 20px) - 1px);
+.awsui_tabs-tab_14rmt_8vbks_241:not(#\9):last-child > .awsui_tabs-tab-header-container_14rmt_8vbks_266 {
+  padding-inline-end: calc(var(--space-xs-zb16t3, 8px) - 1px);
 }
 
-.awsui_tabs-tab-disabled_14rmt_jrbtu_339:not(#\9), .awsui_tabs-tab-disabled_14rmt_jrbtu_339:not(#\9):hover {
+.awsui_tabs-tab-disabled_14rmt_8vbks_285:not(#\9), .awsui_tabs-tab-disabled_14rmt_8vbks_285:not(#\9):hover {
   pointer-events: none;
   cursor: default;
   color: var(--color-text-interactive-disabled-z7a3t4, #9ba7b6);
   font-weight: var(--font-tabs-disabled-weight-1xcs5l, 700);
 }
 
-.awsui_tabs-tab-link_14rmt_jrbtu_269:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_jrbtu_339):after {
-  content: "";
-  position: absolute;
-  inset-inline-start: 0;
-  inline-size: 100%;
-  inset-block-end: calc(-1 * var(--border-divider-section-width-1061zr, 1px));
-  block-size: var(--border-active-width-9dmqf4, 4px);
-  border-start-start-radius: var(--border-radius-tabs-focus-ring-1q0rjo, 20px);
-  border-start-end-radius: var(--border-radius-tabs-focus-ring-1q0rjo, 20px);
-  border-end-start-radius: var(--border-radius-tabs-focus-ring-1q0rjo, 20px);
-  border-end-end-radius: var(--border-radius-tabs-focus-ring-1q0rjo, 20px);
-  background: var(--color-border-tabs-underline-f1qo5r, #0972d3);
-  opacity: 0;
-}
-.awsui_tabs-tab-link_14rmt_jrbtu_269:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_jrbtu_339).awsui_refresh_14rmt_jrbtu_288: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-link_14rmt_jrbtu_269:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_jrbtu_339).awsui_refresh_14rmt_jrbtu_288:after {
-    animation: none;
-    transition: none;
-  }
-}
-.awsui-motion-disabled .awsui_tabs-tab-link_14rmt_jrbtu_269:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_jrbtu_339).awsui_refresh_14rmt_jrbtu_288:after, .awsui-mode-entering .awsui_tabs-tab-link_14rmt_jrbtu_269:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_jrbtu_339).awsui_refresh_14rmt_jrbtu_288:after {
-  animation: none;
-  transition: none;
-}
-
-.awsui_tabs-tab-active_14rmt_jrbtu_374:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_jrbtu_339) {
+.awsui_tabs-tab-active_14rmt_8vbks_404:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_8vbks_285) {
   color: var(--color-text-accent-n2acxv, #0972d3);
 }
-.awsui_tabs-tab-active_14rmt_jrbtu_374:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_jrbtu_339):after {
+.awsui_tabs-tab-active_14rmt_8vbks_404:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_8vbks_285):after {
   opacity: 1;
 }
 
-.awsui_tabs-header-with-divider_14rmt_jrbtu_381:not(#\9) {
+.awsui_tabs-header-with-divider_14rmt_8vbks_411:not(#\9) {
   border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-tabs-divider-6vpso4, #b6bec9);
 }
 
-.awsui_root_14rmt_jrbtu_385:not(#\9) {
+.awsui_root_14rmt_8vbks_415:not(#\9) {
   /* used in test-utils or tests */
 }
 
-.awsui_tabs_14rmt_jrbtu_194:not(#\9) {
+.awsui_tabs_14rmt_8vbks_194:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -424,21 +454,21 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_jrbtu_269:not(#\9
   inline-size: 100%;
 }
 
-.awsui_tabs-content_14rmt_jrbtu_426:not(#\9) {
+.awsui_tabs-content_14rmt_8vbks_456:not(#\9) {
   display: none;
 }
 
-.awsui_fit-height_14rmt_jrbtu_430:not(#\9) {
+.awsui_fit-height_14rmt_8vbks_460:not(#\9) {
   display: flex;
   flex-direction: column;
   block-size: 100%;
 }
 
-.awsui_tabs-content-active_14rmt_jrbtu_436:not(#\9) {
+.awsui_tabs-content-active_14rmt_8vbks_466:not(#\9) {
   display: block;
   flex: 1;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_jrbtu_436:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_8vbks_466:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
@@ -448,23 +478,23 @@ body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_jrbtu_436:n
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
 
-.awsui_tabs-content-wrapper_14rmt_jrbtu_450.awsui_with-paddings_14rmt_jrbtu_450 > .awsui_tabs-content_14rmt_jrbtu_426:not(#\9) {
+.awsui_tabs-content-wrapper_14rmt_8vbks_480.awsui_with-paddings_14rmt_8vbks_480 > .awsui_tabs-content_14rmt_8vbks_456:not(#\9) {
   padding-block: var(--space-scaled-m-mo5yse, 16px);
   padding-inline: 0;
 }
-.awsui_fit-height_14rmt_jrbtu_430 > .awsui_tabs-content-wrapper_14rmt_jrbtu_450:not(#\9) {
+.awsui_fit-height_14rmt_8vbks_460 > .awsui_tabs-content-wrapper_14rmt_8vbks_480:not(#\9) {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: auto;
 }
 
-.awsui_fit-height_14rmt_jrbtu_430 > .awsui_tabs-content-wrapper_14rmt_jrbtu_450 > .awsui_tabs-container-content-wrapper_14rmt_jrbtu_461:not(#\9) {
+.awsui_fit-height_14rmt_8vbks_460 > .awsui_tabs-content-wrapper_14rmt_8vbks_480 > .awsui_tabs-container-content-wrapper_14rmt_8vbks_491:not(#\9) {
   block-size: 100%;
   display: flex;
   flex-direction: column;
 }
-.awsui_tabs-container-content-wrapper_14rmt_jrbtu_461.awsui_with-paddings_14rmt_jrbtu_450 > .awsui_tabs-content_14rmt_jrbtu_426:not(#\9) {
+.awsui_tabs-container-content-wrapper_14rmt_8vbks_491.awsui_with-paddings_14rmt_8vbks_480 > .awsui_tabs-content_14rmt_8vbks_456: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);

package/tabs/styles.selectors.js

@@ -2,27 +2,30 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "tabs-header": "awsui_tabs-header_14rmt_jrbtu_194",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_jrbtu_202",
-  "pagination-button": "awsui_pagination-button_14rmt_jrbtu_219",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_jrbtu_226",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_jrbtu_229",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_jrbtu_233",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_jrbtu_236",
-  "tabs-tab": "awsui_tabs-tab_14rmt_jrbtu_241",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_jrbtu_253",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_jrbtu_269",
-  "refresh": "awsui_refresh_14rmt_jrbtu_288",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_jrbtu_339",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_jrbtu_374",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_jrbtu_381",
-  "root": "awsui_root_14rmt_jrbtu_385",
-  "tabs": "awsui_tabs_14rmt_jrbtu_194",
-  "tabs-content": "awsui_tabs-content_14rmt_jrbtu_426",
-  "fit-height": "awsui_fit-height_14rmt_jrbtu_430",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_jrbtu_436",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_jrbtu_450",
-  "with-paddings": "awsui_with-paddings_14rmt_jrbtu_450",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_jrbtu_461"
+  "tabs-header": "awsui_tabs-header_14rmt_8vbks_194",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_8vbks_202",
+  "pagination-button": "awsui_pagination-button_14rmt_8vbks_219",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_8vbks_226",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_8vbks_229",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_8vbks_233",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_8vbks_236",
+  "tabs-tab": "awsui_tabs-tab_14rmt_8vbks_241",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_8vbks_250",
+  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_8vbks_261",
+  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_8vbks_262",
+  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_8vbks_266",
+  "refresh": "awsui_refresh_14rmt_8vbks_281",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_8vbks_285",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_8vbks_327",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_8vbks_404",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_8vbks_411",
+  "root": "awsui_root_14rmt_8vbks_415",
+  "tabs": "awsui_tabs_14rmt_8vbks_194",
+  "tabs-content": "awsui_tabs-content_14rmt_8vbks_456",
+  "fit-height": "awsui_fit-height_14rmt_8vbks_460",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_8vbks_466",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_8vbks_480",
+  "with-paddings": "awsui_with-paddings_14rmt_8vbks_480",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_8vbks_491"
 };
   

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":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AA4BzC,MAAM,WAAW,iBAAiB;IAChC,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,eAgRnB;AAqBD,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":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AA8CzC,MAAM,WAAW,iBAAiB;IAChC,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,eA6XnB;AAqBD,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

@@ -14,8 +14,11 @@ import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 import { SingleTabStopNavigationProvider, useSingleTabStopNavigation, } from '../internal/context/single-tab-stop-navigation-context';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { getAllFocusables } from '../internal/components/focus-lock/utils';
-const tabSelector = '[role="tab"]';
-const activeTabSelector = '[role="tab"][aria-selected="true"]';
+import { nodeBelongs } from '../internal/utils/node-belongs';
+const tabSelector = `.${styles['tabs-tab-link']}`;
+function dismissButton(dismissLabel, dismissDisabled, onDismiss) {
+    return (React.createElement(InternalButton, { onClick: onDismiss, variant: "icon", iconName: "close", formAction: "none", ariaLabel: dismissLabel, disabled: dismissDisabled }));
+}
 export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace, ariaLabel, ariaLabelledby, i18nStrings, }) {
     const headerBarRef = useRef(null);
     const activeTabHeaderRef = useRef(null);
@@ -29,6 +32,16 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
     const [horizontalOverflow, setHorizontalOverflow] = useState(false);
     const [inlineStartOverflow, setInlineStartOverflow] = useState(false);
     const [inlineEndOverflow, setInlineEndOverflow] = useState(false);
+    const [previousActiveTabId, setPreviousActiveTabId] = useState(activeTabId);
+    const hasActionOrDismissible = tabs.some(tab => tab.action || tab.dismissible);
+    const tabActionAttributes = hasActionOrDismissible
+        ? {
+            role: 'application',
+            'aria-roledescription': i18n('i18nStrings.tabsWithActionsAriaRoleDescription', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tabsWithActionsAriaRoleDescription),
+        }
+        : {
+            role: 'tablist',
+        };
     useEffect(() => {
         if (headerBarRef.current) {
             setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, inlineStartOverflowButton));
@@ -41,8 +54,8 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
             return;
         }
         const activeTabRef = tabRefs.current.get(activeTabId);
-        if (activeTabRef && activeTabRef.parentElement && headerBarRef.current) {
-            scrollIntoView(activeTabRef.parentElement, headerBarRef.current, smooth);
+        if (activeTabRef && headerBarRef.current) {
+            scrollIntoView(activeTabRef, headerBarRef.current, smooth);
         }
     };
     useEffect(() => {
@@ -99,8 +112,23 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
             return null;
         }
         const tabElements = Array.from(containerObjectRef.current.querySelectorAll(tabSelector));
+        const tabAriaSelector = hasActionOrDismissible ? '[aria-expanded="true"]' : '[aria-selected="true"]';
+        const activeTabSelector = `${tabSelector}${tabAriaSelector}`;
         return (_b = (_a = tabElements.find(tab => tab.matches(activeTabSelector))) !== null && _a !== void 0 ? _a : tabElements.find(tab => !tab.disabled)) !== null && _b !== void 0 ? _b : null;
     }
+    function onUnregisterFocusable(focusableElement) {
+        const isUnregisteringFocusedNode = nodeBelongs(focusableElement, document.activeElement);
+        const isFocusableActionOrDismissible = !focusableElement.classList.contains(styles['tabs-tab-link']);
+        if (isUnregisteringFocusedNode && !isFocusableActionOrDismissible) {
+            // Wait for unmounted node to get removed from the DOM.
+            requestAnimationFrame(() => {
+                var _a;
+                const nextFocusTarget = (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.getFocusTarget();
+                const tabLinkButton = nextFocusTarget === null || nextFocusTarget === void 0 ? void 0 : nextFocusTarget.querySelector(`.${styles['tabs-tab-link']}`);
+                tabLinkButton === null || tabLinkButton === void 0 ? void 0 : tabLinkButton.focus();
+            });
+        }
+    }
     useEffect(() => {
         var _a;
         (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.updateFocusTarget();
@@ -114,9 +142,19 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
         (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.updateFocusTarget();
     }
     function onKeyDown(event) {
-        var _a;
-        const focusTarget = (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.getFocusTarget();
+        const focusTarget = document.activeElement;
         const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];
+        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) {
+            return;
+        }
+        if (event.key === 'Tab' && !event.shiftKey && isDismissOrActionFocused) {
+            event.preventDefault();
+            const panelId = `${idNamespace}-${activeTabId}-panel`;
+            const panel = document.getElementById(panelId);
+            panel === null || panel === void 0 ? void 0 : panel.focus();
+        }
         if (hasModifierKeys(event) || specialKeys.indexOf(event.keyCode) === -1) {
             return;
         }
@@ -125,7 +163,7 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
         }
         event.preventDefault();
         const focusables = getFocusablesFrom(containerObjectRef.current);
-        const activeIndex = focusables.indexOf(focusTarget);
+        const activeIndex = document.activeElement instanceof HTMLElement ? focusables.indexOf(document.activeElement) : -1;
         handleKey(event, {
             onHome: () => focusElement(focusables[0]),
             onEnd: () => focusElement(focusables[focusables.length - 1]),
@@ -140,8 +178,10 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
         element.focus();
         // If focusable element is a tab - fire the onChange for it.
         const tabsById = tabs.reduce((map, tab) => map.set(tab.id, tab), new Map());
-        for (const [tabId, tabTriggerElement] of tabRefs.current.entries()) {
-            if (tabId !== activeTabId && tabTriggerElement === element) {
+        for (const [tabId, focusTargetTabTriggerElement] of tabRefs.current.entries()) {
+            const focusTargetTabLabelElement = focusTargetTabTriggerElement === null || focusTargetTabTriggerElement === void 0 ? void 0 : focusTargetTabTriggerElement.querySelector(`.${styles['tabs-tab-link']}`);
+            if (tabId !== activeTabId && focusTargetTabLabelElement === element) {
+                setPreviousActiveTabId(tabId);
                 onChange({ activeTabId: tabId, activeTabHref: (_a = tabsById.get(tabId)) === null || _a === void 0 ? void 0 : _a.href });
                 break;
             }
@@ -155,22 +195,25 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
         }
         function isElementDisabled(element) {
             if (element instanceof HTMLButtonElement) {
-                return element.disabled && element.getAttribute('aria-selected') !== 'true';
+                return element.disabled || element.closest(`.${styles['tabs-tab-disabled']}`);
             }
             return false;
         }
         return getAllFocusables(target).filter(el => isElementRegistered(el) && !isElementDisabled(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 },
-            React.createElement("ul", { role: "tablist", className: styles['tabs-header-list'], "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ref: headerBarRef, onScroll: onScroll, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur }, tabs.map(renderTabHeader))),
+        React.createElement(SingleTabStopNavigationProvider, { ref: navigationAPI, navigationActive: true, getNextFocusTarget: getNextFocusTarget, onUnregisterFocusable: onUnregisterFocusable },
+            React.createElement(TabList, Object.assign({}, tabActionAttributes, { className: styles['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) })))));
     function renderTabHeader(tab) {
+        const { dismissible, dismissLabel, dismissDisabled, action, onDismiss } = tab;
+        const isActive = activeTabId === tab.id && !tab.disabled;
         const clickTab = (event) => {
             if (tab.disabled) {
                 event.preventDefault();
@@ -194,23 +237,45 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
             if (tab.id === activeTabId) {
                 return;
             }
+            setPreviousActiveTabId(tab.id);
             onChange({ activeTabId: tab.id, activeTabHref: tab.href });
         };
         const classes = clsx({
             [styles['tabs-tab-link']]: true,
             [styles.refresh]: isVisualRefresh,
-            [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,
+            [styles['tabs-tab-active']]: isActive,
+            [styles['tabs-tab-disabled']]: tab.disabled,
+        });
+        const tabHeaderContainerClasses = clsx({
+            [styles['tabs-tab-header-container']]: true,
+            [styles.refresh]: isVisualRefresh,
+            [styles['tabs-tab-active']]: isActive,
             [styles['tabs-tab-disabled']]: tab.disabled,
         });
+        const tabActionClasses = clsx({
+            [styles['tabs-tab-action']]: true,
+            [styles['tabs-tab-active']]: isActive,
+        });
         const commonProps = {
             className: classes,
-            role: 'tab',
-            'aria-selected': tab.id === activeTabId,
             'aria-controls': `${idNamespace}-${tab.id}-panel`,
             'data-testid': tab.id,
             id: getTabElementId({ namespace: idNamespace, tabId: tab.id }),
             children: React.createElement("span", { className: styles['tabs-tab-label'] }, tab.label),
         };
+        const tabHeaderContainerAriaProps = hasActionOrDismissible
+            ? {
+                role: 'group',
+                'aria-labelledby': commonProps.id,
+            }
+            : {};
+        if (!hasActionOrDismissible) {
+            commonProps['aria-selected'] = activeTabId === tab.id;
+            commonProps.role = 'tab';
+        }
+        else {
+            commonProps['aria-expanded'] = activeTabId === tab.id;
+        }
         if (tab.disabled) {
             commonProps['aria-disabled'] = 'true';
         }
@@ -223,8 +288,32 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
             }
             tabRefs.current.set(tab.id, tabElement);
         };
-        return (React.createElement("li", { className: styles['tabs-tab'], role: "presentation", key: tab.id },
-            React.createElement(TabTrigger, { ref: setElement, tab: tab, elementProps: commonProps })));
+        const handleDismiss = event => {
+            if (!containerObjectRef.current || !onDismiss) {
+                return;
+            }
+            const tabElements = getFocusablesFrom(containerObjectRef.current).filter(el => el.classList.contains(styles['tabs-tab-link']));
+            const activeTabIndex = tabElements.findIndex(el => el.dataset.testid === tab.id);
+            tabElements.splice(activeTabIndex, 1);
+            let nextActive;
+            if (previousActiveTabId && previousActiveTabId !== tab.id) {
+                nextActive = tabElements.find(el => el.dataset.testid === previousActiveTabId);
+            }
+            else {
+                nextActive = tabElements[Math.min(tabElements.length - 1, activeTabIndex)];
+            }
+            if (nextActive && nextActive.dataset.testid) {
+                onChange({ activeTabId: nextActive.dataset.testid });
+                nextActive.focus();
+            }
+            onDismiss(event);
+        };
+        const TabItem = hasActionOrDismissible ? 'div' : 'li';
+        return (React.createElement(TabItem, { ref: (element) => tabRefs.current.set(tab.id, element), className: styles['tabs-tab'], role: "presentation", key: tab.id },
+            React.createElement("div", Object.assign({ className: tabHeaderContainerClasses }, tabHeaderContainerAriaProps),
+                React.createElement(TabTrigger, { ref: setElement, tab: tab, elementProps: commonProps }),
+                action && React.createElement("span", { className: tabActionClasses }, action),
+                dismissible && (React.createElement("span", { className: styles['tabs-tab-dismiss'] }, dismissButton(dismissLabel, dismissDisabled, handleDismiss))))));
     }
 }
 const TabTrigger = forwardRef(({ tab, elementProps, }, ref) => {