@cloudscape-design/components 3.0.681 → 3.0.682

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_8vbks_194:not(#\9) {
+.awsui_tabs-header_14rmt_1piyt_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_8vbks_202:not(#\9) {
+.awsui_tabs-header-list_14rmt_1piyt_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_8vbks_202:not(#\9)::-webkit-scrollbar {
+.awsui_tabs-header-list_14rmt_1piyt_202:not(#\9)::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
 
-.awsui_pagination-button_14rmt_8vbks_219:not(#\9) {
+.awsui_pagination-button_14rmt_1piyt_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_8vbks_226:not(#\9) {
+.awsui_pagination-button-left_14rmt_1piyt_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_8vbks_229:not(#\9) {
+.awsui_pagination-button-left-scrollable_14rmt_1piyt_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_8vbks_233:not(#\9) {
+.awsui_pagination-button-right_14rmt_1piyt_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_8vbks_236:not(#\9) {
+.awsui_pagination-button-right-scrollable_14rmt_1piyt_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_8vbks_241:not(#\9) {
+.awsui_tabs-tab_14rmt_1piyt_241:not(#\9) {
   list-style: none;
   padding-block: 0;
   padding-inline: 0;
@@ -247,7 +247,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   max-inline-size: calc(90% - var(--space-l-t419sm, 20px));
 }
 
-.awsui_tabs-tab-label_14rmt_8vbks_250:not(#\9) {
+.awsui_tabs-tab-label_14rmt_1piyt_250:not(#\9) {
   display: flex;
   align-items: center;
   padding-inline: var(--space-xs-zb16t3, 8px);
@@ -258,12 +258,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-break: break-word;
 }
 
-.awsui_tabs-tab-dismiss_14rmt_8vbks_261:not(#\9),
-.awsui_tabs-tab-action_14rmt_8vbks_262:not(#\9) {
+.awsui_tabs-tab-dismiss_14rmt_1piyt_261:not(#\9),
+.awsui_tabs-tab-action_14rmt_1piyt_262:not(#\9) {
   /* Used as a selector for tests */
 }
 
-.awsui_tabs-tab-header-container_14rmt_8vbks_266:not(#\9) {
+.awsui_tabs-tab-header-container_14rmt_1piyt_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;
@@ -271,18 +271,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   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) {
+.awsui_tabs-tab-header-container_14rmt_1piyt_266:not(#\9), .awsui_tabs-tab-header-container_14rmt_1piyt_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) {
+.awsui_tabs-tab-header-container_14rmt_1piyt_266 > .awsui_tabs-tab-dismiss_14rmt_1piyt_261:not(#\9), .awsui_tabs-tab-header-container_14rmt_1piyt_266 > .awsui_tabs-tab-action_14rmt_1piyt_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 {
+.awsui_tabs-tab-header-container_14rmt_1piyt_266.awsui_refresh_14rmt_1piyt_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 {
+.awsui_tabs-tab-header-container_14rmt_1piyt_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1piyt_285):after {
   content: "";
   position: absolute;
   inset-inline-start: 0;
@@ -296,35 +296,35 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   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 {
+.awsui_tabs-tab-header-container_14rmt_1piyt_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1piyt_285).awsui_refresh_14rmt_1piyt_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 {
+  .awsui_tabs-tab-header-container_14rmt_1piyt_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1piyt_285).awsui_refresh_14rmt_1piyt_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 {
+.awsui-motion-disabled .awsui_tabs-tab-header-container_14rmt_1piyt_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1piyt_285).awsui_refresh_14rmt_1piyt_281:after, .awsui-mode-entering .awsui_tabs-tab-header-container_14rmt_1piyt_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1piyt_285).awsui_refresh_14rmt_1piyt_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 {
+.awsui_tabs-tab_14rmt_1piyt_241:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1piyt_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 {
+.awsui_tabs-tab_14rmt_1piyt_241:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1piyt_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 {
+.awsui_tabs-tab_14rmt_1piyt_241:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1piyt_266.awsui_refresh_14rmt_1piyt_281:before {
   inset: calc(var(--space-scaled-s-aqzyko, 12px) - var(--border-active-width-9dmqf4, 4px)) 0;
 }
 
-.awsui_tabs-tab-link_14rmt_8vbks_327:not(#\9) {
+.awsui_tabs-tab-link_14rmt_1piyt_327:not(#\9) {
   position: relative;
   display: flex;
   align-items: stretch;
@@ -345,27 +345,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_8vbks_327.awsui_refresh_14rmt_8vbks_281:not(#\9) {
+.awsui_tabs-tab-link_14rmt_1piyt_327.awsui_refresh_14rmt_1piyt_281: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_8vbks_327:not(#\9):hover {
+.awsui_tabs-tab-link_14rmt_1piyt_327:not(#\9):hover {
   color: var(--color-text-accent-n2acxv, #0972d3);
 }
-.awsui_tabs-tab-link_14rmt_8vbks_327:not(#\9):focus {
+.awsui_tabs-tab-link_14rmt_1piyt_327:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_8vbks_327:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1piyt_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_8vbks_327:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1piyt_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_8vbks_327:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1piyt_327:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -380,43 +380,46 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_8vbks_327:not(#\9
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
 
-.awsui_tabs-tab_14rmt_8vbks_241:not(#\9):first-child {
+.awsui_tabs-tab_14rmt_1piyt_241:not(#\9):first-child {
   margin-inline-start: 1px;
 }
-.awsui_tabs-tab_14rmt_8vbks_241:not(#\9):first-child > .awsui_tabs-tab-header-container_14rmt_8vbks_266 {
+.awsui_tabs-tab_14rmt_1piyt_241:not(#\9):first-child > .awsui_tabs-tab-header-container_14rmt_1piyt_266 {
   padding-inline-start: calc(var(--space-xs-zb16t3, 8px) - 1px);
 }
 
-.awsui_tabs-tab_14rmt_8vbks_241:not(#\9):last-child {
+.awsui_tabs-tab_14rmt_1piyt_241:not(#\9):last-child {
   margin-inline-end: 1px;
 }
-.awsui_tabs-tab_14rmt_8vbks_241:not(#\9):last-child > .awsui_tabs-tab-header-container_14rmt_8vbks_266 {
+.awsui_tabs-tab_14rmt_1piyt_241:not(#\9):last-child > .awsui_tabs-tab-header-container_14rmt_1piyt_266 {
   padding-inline-end: calc(var(--space-xs-zb16t3, 8px) - 1px);
 }
 
-.awsui_tabs-tab-disabled_14rmt_8vbks_285:not(#\9), .awsui_tabs-tab-disabled_14rmt_8vbks_285:not(#\9):hover {
-  pointer-events: none;
+.awsui_tabs-tab-disabled_14rmt_1piyt_285:not(#\9), .awsui_tabs-tab-disabled_14rmt_1piyt_285:not(#\9):hover {
   cursor: default;
   color: var(--color-text-interactive-disabled-z7a3t4, #9ba7b6);
   font-weight: var(--font-tabs-disabled-weight-1xcs5l, 700);
 }
 
-.awsui_tabs-tab-active_14rmt_8vbks_404:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_8vbks_285) {
+.awsui_tabs-tab-active_14rmt_1piyt_403:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1piyt_285) {
   color: var(--color-text-accent-n2acxv, #0972d3);
 }
-.awsui_tabs-tab-active_14rmt_8vbks_404:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_8vbks_285):after {
+.awsui_tabs-tab-active_14rmt_1piyt_403:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1piyt_285):after {
   opacity: 1;
 }
 
-.awsui_tabs-header-with-divider_14rmt_8vbks_411:not(#\9) {
+.awsui_tabs-header-with-divider_14rmt_1piyt_410:not(#\9) {
   border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-tabs-divider-6vpso4, #b6bec9);
 }
 
-.awsui_root_14rmt_8vbks_415:not(#\9) {
+.awsui_tabs-tab-focusable_14rmt_1piyt_414:not(#\9) {
+  /* used to manage focusable logic */
+}
+
+.awsui_root_14rmt_1piyt_418:not(#\9) {
   /* used in test-utils or tests */
 }
 
-.awsui_tabs_14rmt_8vbks_194:not(#\9) {
+.awsui_tabs_14rmt_1piyt_194:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -454,21 +457,21 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_8vbks_327:not(#\9
   inline-size: 100%;
 }
 
-.awsui_tabs-content_14rmt_8vbks_456:not(#\9) {
+.awsui_tabs-content_14rmt_1piyt_459:not(#\9) {
   display: none;
 }
 
-.awsui_fit-height_14rmt_8vbks_460:not(#\9) {
+.awsui_fit-height_14rmt_1piyt_463:not(#\9) {
   display: flex;
   flex-direction: column;
   block-size: 100%;
 }
 
-.awsui_tabs-content-active_14rmt_8vbks_466:not(#\9) {
+.awsui_tabs-content-active_14rmt_1piyt_469:not(#\9) {
   display: block;
   flex: 1;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_8vbks_466:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_1piyt_469:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
@@ -478,24 +481,32 @@ body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_8vbks_466:n
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
 
-.awsui_tabs-content-wrapper_14rmt_8vbks_480.awsui_with-paddings_14rmt_8vbks_480 > .awsui_tabs-content_14rmt_8vbks_456:not(#\9) {
+.awsui_tabs-content-wrapper_14rmt_1piyt_483.awsui_with-paddings_14rmt_1piyt_483 > .awsui_tabs-content_14rmt_1piyt_459:not(#\9) {
   padding-block: var(--space-scaled-m-mo5yse, 16px);
   padding-inline: 0;
 }
-.awsui_fit-height_14rmt_8vbks_460 > .awsui_tabs-content-wrapper_14rmt_8vbks_480:not(#\9) {
+.awsui_fit-height_14rmt_1piyt_463 > .awsui_tabs-content-wrapper_14rmt_1piyt_483:not(#\9) {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: auto;
 }
 
-.awsui_fit-height_14rmt_8vbks_460 > .awsui_tabs-content-wrapper_14rmt_8vbks_480 > .awsui_tabs-container-content-wrapper_14rmt_8vbks_491:not(#\9) {
+.awsui_fit-height_14rmt_1piyt_463 > .awsui_tabs-content-wrapper_14rmt_1piyt_483 > .awsui_tabs-container-content-wrapper_14rmt_1piyt_494:not(#\9) {
   block-size: 100%;
   display: flex;
   flex-direction: column;
 }
-.awsui_tabs-container-content-wrapper_14rmt_8vbks_491.awsui_with-paddings_14rmt_8vbks_480 > .awsui_tabs-content_14rmt_8vbks_456:not(#\9) {
+.awsui_tabs-container-content-wrapper_14rmt_1piyt_494.awsui_with-paddings_14rmt_1piyt_483 > .awsui_tabs-content_14rmt_1piyt_459: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_1piyt_505:not(#\9) {
+  /* used in test-utils or tests */
+}
+
+.awsui_tabs-tab-focused_14rmt_1piyt_509:not(#\9) {
+  /* used to manage focusable state for disabled with reason tabs */
 }

package/tabs/styles.selectors.js

@@ -2,30 +2,33 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "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"
+  "tabs-header": "awsui_tabs-header_14rmt_1piyt_194",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_1piyt_202",
+  "pagination-button": "awsui_pagination-button_14rmt_1piyt_219",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_1piyt_226",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1piyt_229",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_1piyt_233",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1piyt_236",
+  "tabs-tab": "awsui_tabs-tab_14rmt_1piyt_241",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1piyt_250",
+  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_1piyt_261",
+  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_1piyt_262",
+  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_1piyt_266",
+  "refresh": "awsui_refresh_14rmt_1piyt_281",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1piyt_285",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1piyt_327",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1piyt_403",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1piyt_410",
+  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_1piyt_414",
+  "root": "awsui_root_14rmt_1piyt_418",
+  "tabs": "awsui_tabs_14rmt_1piyt_194",
+  "tabs-content": "awsui_tabs-content_14rmt_1piyt_459",
+  "fit-height": "awsui_fit-height_14rmt_1piyt_463",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_1piyt_469",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1piyt_483",
+  "with-paddings": "awsui_with-paddings_14rmt_1piyt_483",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1piyt_494",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_1piyt_505",
+  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_1piyt_509"
 };
   

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;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"}
+{"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;AAkDzC,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,eAoYnB;AAgED,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,12 @@ 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';
+import useHiddenDescription from '../internal/hooks/use-hidden-description';
+import Tooltip from '../internal/components/tooltip';
 import { nodeBelongs } from '../internal/utils/node-belongs';
 const tabSelector = `.${styles['tabs-tab-link']}`;
+const focusedTabSelector = `[role="tab"].${styles['tabs-tab-focused']}`;
+const focusableTabSelector = `.${styles['tabs-tab-focusable']}`;
 function dismissButton(dismissLabel, dismissDisabled, onDismiss) {
     return (React.createElement(InternalButton, { onClick: onDismiss, variant: "icon", iconName: "close", formAction: "none", ariaLabel: dismissLabel, disabled: dismissDisabled }));
 }
@@ -32,6 +36,7 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
     const [horizontalOverflow, setHorizontalOverflow] = useState(false);
     const [inlineStartOverflow, setInlineStartOverflow] = useState(false);
     const [inlineEndOverflow, setInlineEndOverflow] = useState(false);
+    const [focusedTabId, setFocusedTabId] = useState(activeTabId);
     const [previousActiveTabId, setPreviousActiveTabId] = useState(activeTabId);
     const hasActionOrDismissible = tabs.some(tab => tab.action || tab.dismissible);
     const tabActionAttributes = hasActionOrDismissible
@@ -112,9 +117,7 @@ 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;
+        return (_b = (_a = tabElements.find(tab => tab.matches(focusedTabSelector))) !== 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);
@@ -174,7 +177,7 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
         });
     }
     function focusElement(element) {
-        var _a;
+        var _a, _b;
         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());
@@ -182,7 +185,10 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
             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 });
+                setFocusedTabId(tabId);
+                if (!((_a = tabsById.get(tabId)) === null || _a === void 0 ? void 0 : _a.disabled)) {
+                    onChange({ activeTabId: tabId, activeTabHref: (_b = tabsById.get(tabId)) === null || _b === void 0 ? void 0 : _b.href });
+                }
                 break;
             }
         }
@@ -193,13 +199,13 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
             var _a, _b;
             return (_b = (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.isRegistered(element)) !== null && _b !== void 0 ? _b : false;
         }
-        function isElementDisabled(element) {
+        function isElementFocusable(element) {
             if (element instanceof HTMLButtonElement) {
-                return element.disabled || element.closest(`.${styles['tabs-tab-disabled']}`);
+                return !element.disabled || element.closest(focusableTabSelector);
             }
-            return false;
+            return element.matches(focusableTabSelector);
         }
-        return getAllFocusables(target).filter(el => isElementRegistered(el) && !isElementDisabled(el));
+        return getAllFocusables(target).filter(el => isElementRegistered(el) && isElementFocusable(el));
     }
     const TabList = hasActionOrDismissible ? 'div' : 'ul';
     return (
@@ -237,20 +243,25 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
             if (tab.id === activeTabId) {
                 return;
             }
+            setFocusedTabId(tab.id);
             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-focused']]: focusedTabId === tab.id,
             [styles['tabs-tab-active']]: isActive,
             [styles['tabs-tab-disabled']]: tab.disabled,
+            [styles['tabs-tab-focusable']]: !tab.disabled || (tab.disabled && !!tab.disabledReason),
         });
         const tabHeaderContainerClasses = clsx({
             [styles['tabs-tab-header-container']]: true,
             [styles.refresh]: isVisualRefresh,
             [styles['tabs-tab-active']]: isActive,
             [styles['tabs-tab-disabled']]: tab.disabled,
+            [styles['tabs-tab-focusable']]: !tab.disabled || (tab.disabled && !!tab.disabledReason),
         });
         const tabActionClasses = clsx({
             [styles['tabs-tab-action']]: true,
@@ -261,7 +272,7 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
             '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),
+            onClick: clickTab,
         };
         const tabHeaderContainerAriaProps = hasActionOrDismissible
             ? {
@@ -279,9 +290,6 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
         if (tab.disabled) {
             commonProps['aria-disabled'] = 'true';
         }
-        else {
-            commonProps.onClick = clickTab;
-        }
         const setElement = (tabElement) => {
             if (tab.id === activeTabId) {
                 activeTabHeaderRef.current = tabElement;
@@ -318,9 +326,25 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
 }
 const TabTrigger = forwardRef(({ tab, elementProps, }, ref) => {
     const refObject = useRef(null);
+    const tabLabelRefObject = useRef(null);
     const mergedRef = useMergeRefs(refObject, ref);
     const { tabIndex } = useSingleTabStopNavigation(refObject);
-    return tab.href ? (React.createElement("a", Object.assign({}, elementProps, { href: tab.href, ref: mergedRef, tabIndex: tabIndex }))) : (React.createElement("button", Object.assign({}, elementProps, { type: "button", disabled: tab.disabled, ref: mergedRef, tabIndex: tabIndex })));
+    const isDisabledWithReason = tab.disabled && !!tab.disabledReason;
+    const [showTooltip, setShowTooltip] = useState(false);
+    const { targetProps, descriptionEl } = useHiddenDescription(tab.disabledReason);
+    const children = (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: styles['tabs-tab-label'], ref: tabLabelRefObject }, tab.label),
+        isDisabledWithReason && (React.createElement(React.Fragment, null,
+            descriptionEl,
+            showTooltip && (React.createElement(Tooltip, { className: styles['disabled-reason-tooltip'], trackRef: tabLabelRefObject, value: tab.disabledReason }))))));
+    const handlers = {
+        onFocus: () => setShowTooltip(true),
+        onBlur: () => setShowTooltip(false),
+        onMouseEnter: () => setShowTooltip(true),
+        onMouseLeave: () => setShowTooltip(false),
+    };
+    const commonProps = Object.assign(Object.assign(Object.assign(Object.assign({}, elementProps), (isDisabledWithReason ? targetProps : {})), (isDisabledWithReason ? handlers : {})), { ref: mergedRef, tabIndex: tabIndex });
+    return tab.href ? (React.createElement("a", Object.assign({}, commonProps, { href: tab.href }), children)) : (React.createElement("button", Object.assign({}, commonProps, { type: "button", disabled: tab.disabled && !isDisabledWithReason }), children));
 });
 export function getTabElementId({ namespace, tabId }) {
     return namespace + '-' + tabId;