npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.695 → 3.0.697 - Mend

@cloudscape-design/components-themeable 3.0.695 → 3.0.697

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (258) hide show

package/lib/internal/template/tabs/styles.scoped.css CHANGED Viewed

@@ -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_104vw_194:not(#\9) {
+.awsui_tabs-header_14rmt_l7dlm_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_104vw_202:not(#\9) {
+.awsui_tabs-header-list_14rmt_l7dlm_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_104vw_202:not(#\9)::-webkit-scrollbar {
+.awsui_tabs-header-list_14rmt_l7dlm_202:not(#\9)::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
-.awsui_pagination-button_14rmt_104vw_219:not(#\9) {
+.awsui_pagination-button_14rmt_l7dlm_219:not(#\9) {
   margin-block: var(--space-scaled-s-9q8n2q, 12px);
   margin-inline: 0;
   padding-block: 0;
   padding-inline: var(--space-xxs-9rrxti, 4px);
   display: flex;
 }
-.awsui_pagination-button-left_14rmt_104vw_226:not(#\9) {
+.awsui_pagination-button-left_14rmt_l7dlm_226:not(#\9) {
   border-inline-end: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-control-disabled-4hz3mo, #d5dbdb);
 }
-.awsui_pagination-button-left-scrollable_14rmt_104vw_229:not(#\9) {
+.awsui_pagination-button-left-scrollable_14rmt_l7dlm_229:not(#\9) {
   z-index: 1;
   box-shadow: 5px 0px 4px -3px var(--color-border-tabs-shadow-vlaodw, #eaeded), 1px 0px 0px 0px var(--color-border-tabs-shadow-vlaodw, #eaeded);
 }
-.awsui_pagination-button-right_14rmt_104vw_233:not(#\9) {
+.awsui_pagination-button-right_14rmt_l7dlm_233:not(#\9) {
   border-inline-start: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-control-disabled-4hz3mo, #d5dbdb);
 }
-.awsui_pagination-button-right-scrollable_14rmt_104vw_236:not(#\9) {
+.awsui_pagination-button-right-scrollable_14rmt_l7dlm_236:not(#\9) {
   z-index: 1;
   box-shadow: -5px 0px 4px -3px var(--color-border-tabs-shadow-vlaodw, #eaeded), -1px 0px 0px 0 var(--color-border-tabs-shadow-vlaodw, #eaeded);
 }
-.awsui_tabs-tab_14rmt_104vw_241:not(#\9) {
+.awsui_tabs-tab_14rmt_l7dlm_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-xu1x80, 20px));
 }
-.awsui_tabs-tab-label_14rmt_104vw_250:not(#\9) {
+.awsui_tabs-tab-label_14rmt_l7dlm_250:not(#\9) {
   display: flex;
   align-items: center;
   padding-inline: var(--space-xs-xf5ch3, 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_104vw_261:not(#\9),
-.awsui_tabs-tab-action_14rmt_104vw_262:not(#\9) {
+.awsui_tabs-tab-dismiss_14rmt_l7dlm_261:not(#\9),
+.awsui_tabs-tab-action_14rmt_l7dlm_262:not(#\9) {
   /* Used as a selector for tests */
 }
-.awsui_tabs-tab-header-container_14rmt_104vw_266:not(#\9) {
+.awsui_tabs-tab-header-container_14rmt_l7dlm_266:not(#\9) {
   position: relative;
   border-block: var(--border-divider-section-width-wl9k66, 1px) solid transparent;
   border-inline: var(--border-divider-section-width-wl9k66, 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_104vw_266:not(#\9), .awsui_tabs-tab-header-container_14rmt_104vw_266 > button:not(#\9) {
+.awsui_tabs-tab-header-container_14rmt_l7dlm_266:not(#\9), .awsui_tabs-tab-header-container_14rmt_l7dlm_266 > button:not(#\9) {
   background-color: transparent;
 }
-.awsui_tabs-tab-header-container_14rmt_104vw_266 > .awsui_tabs-tab-dismiss_14rmt_104vw_261:not(#\9), .awsui_tabs-tab-header-container_14rmt_104vw_266 > .awsui_tabs-tab-action_14rmt_104vw_262:not(#\9) {
+.awsui_tabs-tab-header-container_14rmt_l7dlm_266 > .awsui_tabs-tab-dismiss_14rmt_l7dlm_261:not(#\9), .awsui_tabs-tab-header-container_14rmt_l7dlm_266 > .awsui_tabs-tab-action_14rmt_l7dlm_262:not(#\9) {
   display: flex;
   align-items: center;
 }
-.awsui_tabs-tab-header-container_14rmt_104vw_266.awsui_refresh_14rmt_104vw_281 > span:not(#\9):first-of-type {
+.awsui_tabs-tab-header-container_14rmt_l7dlm_266.awsui_refresh_14rmt_l7dlm_281 > span:not(#\9):first-of-type {
   margin-inline-start: calc(-1 * var(--space-scaled-xs-x91h81, 8px));
 }
-.awsui_tabs-tab-header-container_14rmt_104vw_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_104vw_285):after {
+.awsui_tabs-tab-header-container_14rmt_l7dlm_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_l7dlm_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-vxhq31, #16191f);
   opacity: 0;
 }
-.awsui_tabs-tab-header-container_14rmt_104vw_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_104vw_285).awsui_refresh_14rmt_104vw_281:after {
+.awsui_tabs-tab-header-container_14rmt_l7dlm_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_l7dlm_285).awsui_refresh_14rmt_l7dlm_281:after {
   transition: opacity var(--motion-duration-refresh-only-medium-0rwzu1, 165ms) var(--motion-easing-refresh-only-c-2mltoq, cubic-bezier(0.84, 0, 0.16, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_tabs-tab-header-container_14rmt_104vw_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_104vw_285).awsui_refresh_14rmt_104vw_281:after {
+  .awsui_tabs-tab-header-container_14rmt_l7dlm_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_l7dlm_285).awsui_refresh_14rmt_l7dlm_281:after {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_tabs-tab-header-container_14rmt_104vw_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_104vw_285).awsui_refresh_14rmt_104vw_281:after, .awsui-mode-entering .awsui_tabs-tab-header-container_14rmt_104vw_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_104vw_285).awsui_refresh_14rmt_104vw_281:after {
+.awsui-motion-disabled .awsui_tabs-tab-header-container_14rmt_l7dlm_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_l7dlm_285).awsui_refresh_14rmt_l7dlm_281:after, .awsui-mode-entering .awsui_tabs-tab-header-container_14rmt_l7dlm_266:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_l7dlm_285).awsui_refresh_14rmt_l7dlm_281:after {
   animation: none;
   transition: none;
 }
-.awsui_tabs-tab_14rmt_104vw_241:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_104vw_266 {
+.awsui_tabs-tab_14rmt_l7dlm_241:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_l7dlm_266 {
   margin-inline-end: calc(-1 * var(--border-divider-section-width-wl9k66, 1px));
 }
-.awsui_tabs-tab_14rmt_104vw_241:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_104vw_266:before {
+.awsui_tabs-tab_14rmt_l7dlm_241:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_l7dlm_266:before {
   content: "";
   position: absolute;
   border-inline-end: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-tabs-divider-xzqbyc, #aab7b8);
   inset: calc(var(--space-scaled-s-9q8n2q, 12px)) 0;
   opacity: 1;
 }
-.awsui_tabs-tab_14rmt_104vw_241:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_104vw_266.awsui_refresh_14rmt_104vw_281:before {
+.awsui_tabs-tab_14rmt_l7dlm_241:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_l7dlm_266.awsui_refresh_14rmt_l7dlm_281:before {
   inset: calc(var(--space-scaled-s-9q8n2q, 12px) - var(--border-active-width-lk35x8, 2px)) 0;
 }
-.awsui_tabs-tab-link_14rmt_104vw_327:not(#\9) {
+.awsui_tabs-tab-link_14rmt_l7dlm_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-8fiijr, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-fw8n0n, auto);
 }
-.awsui_tabs-tab-link_14rmt_104vw_327.awsui_refresh_14rmt_104vw_281:not(#\9) {
+.awsui_tabs-tab-link_14rmt_l7dlm_327.awsui_refresh_14rmt_l7dlm_281:not(#\9) {
   padding-block-start: calc(var(--space-static-xs-fdj8ix, 8px) - 1px);
   padding-block-end: calc(var(--space-static-xs-fdj8ix, 8px) - 1px);
   margin-block-start: 0;
 }
-.awsui_tabs-tab-link_14rmt_104vw_327:not(#\9):hover {
+.awsui_tabs-tab-link_14rmt_l7dlm_327:not(#\9):hover {
   color: var(--color-text-accent-yy9054, #0073bb);
 }
-.awsui_tabs-tab-link_14rmt_104vw_327:not(#\9):focus {
+.awsui_tabs-tab-link_14rmt_l7dlm_327:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_104vw_327:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_l7dlm_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_104vw_327:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_l7dlm_327:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-tabs-focus-outline-gutter-2tu8wb, 0px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_104vw_327:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_l7dlm_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_104vw_327:not(#\9
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_tabs-tab_14rmt_104vw_241:not(#\9):first-child {
+.awsui_tabs-tab_14rmt_l7dlm_241:not(#\9):first-child {
   margin-inline-start: 1px;
 }
-.awsui_tabs-tab_14rmt_104vw_241:not(#\9):first-child > .awsui_tabs-tab-header-container_14rmt_104vw_266 {
+.awsui_tabs-tab_14rmt_l7dlm_241:not(#\9):first-child > .awsui_tabs-tab-header-container_14rmt_l7dlm_266 {
   padding-inline-start: calc(var(--space-xs-xf5ch3, 8px) - 1px);
 }
-.awsui_tabs-tab_14rmt_104vw_241:not(#\9):last-child {
+.awsui_tabs-tab_14rmt_l7dlm_241:not(#\9):last-child {
   margin-inline-end: 1px;
 }
-.awsui_tabs-tab_14rmt_104vw_241:not(#\9):last-child > .awsui_tabs-tab-header-container_14rmt_104vw_266 {
+.awsui_tabs-tab_14rmt_l7dlm_241:not(#\9):last-child > .awsui_tabs-tab-header-container_14rmt_l7dlm_266 {
   padding-inline-end: calc(var(--space-xs-xf5ch3, 8px) - 1px);
 }
-.awsui_tabs-tab-disabled_14rmt_104vw_285:not(#\9), .awsui_tabs-tab-disabled_14rmt_104vw_285:not(#\9):hover {
-  pointer-events: none;
+.awsui_tabs-tab-disabled_14rmt_l7dlm_285:not(#\9), .awsui_tabs-tab-disabled_14rmt_l7dlm_285:not(#\9):hover {
   cursor: default;
   color: var(--color-text-interactive-disabled-e23z4j, #aab7b8);
   font-weight: var(--font-tabs-disabled-weight-uew17o, 400);
 }
-.awsui_tabs-tab-active_14rmt_104vw_404:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_104vw_285) {
+.awsui_tabs-tab-active_14rmt_l7dlm_403:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_l7dlm_285) {
   color: var(--color-text-accent-yy9054, #0073bb);
 }
-.awsui_tabs-tab-active_14rmt_104vw_404:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_104vw_285):after {
+.awsui_tabs-tab-active_14rmt_l7dlm_403:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_l7dlm_285):after {
   opacity: 1;
 }
-.awsui_tabs-header-with-divider_14rmt_104vw_411:not(#\9) {
+.awsui_tabs-header-with-divider_14rmt_l7dlm_410:not(#\9) {
   border-block-end: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-tabs-divider-xzqbyc, #aab7b8);
 }
-.awsui_root_14rmt_104vw_415:not(#\9) {
+.awsui_tabs-tab-focusable_14rmt_l7dlm_414:not(#\9) {
+  /* used to manage focusable logic */
+}
+.awsui_root_14rmt_l7dlm_418:not(#\9) {
   /* used in test-utils or tests */
 }
-.awsui_tabs_14rmt_104vw_194:not(#\9) {
+.awsui_tabs_14rmt_l7dlm_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_104vw_327:not(#\9
   inline-size: 100%;
 }
-.awsui_tabs-content_14rmt_104vw_456:not(#\9) {
+.awsui_tabs-content_14rmt_l7dlm_459:not(#\9) {
   display: none;
 }
-.awsui_fit-height_14rmt_104vw_460:not(#\9) {
+.awsui_fit-height_14rmt_l7dlm_463:not(#\9) {
   display: flex;
   flex-direction: column;
   block-size: 100%;
 }
-.awsui_tabs-content-active_14rmt_104vw_466:not(#\9) {
+.awsui_tabs-content-active_14rmt_l7dlm_469:not(#\9) {
   display: block;
   flex: 1;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_104vw_466:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_l7dlm_469:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-start-start-radius: var(--border-radius-container-jm6teg, 0px);
@@ -478,24 +481,32 @@ body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_104vw_466:n
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_tabs-content-wrapper_14rmt_104vw_480.awsui_with-paddings_14rmt_104vw_480 > .awsui_tabs-content_14rmt_104vw_456:not(#\9) {
+.awsui_tabs-content-wrapper_14rmt_l7dlm_483.awsui_with-paddings_14rmt_l7dlm_483 > .awsui_tabs-content_14rmt_l7dlm_459:not(#\9) {
   padding-block: var(--space-scaled-m-er48cl, 16px);
   padding-inline: 0;
 }
-.awsui_fit-height_14rmt_104vw_460 > .awsui_tabs-content-wrapper_14rmt_104vw_480:not(#\9) {
+.awsui_fit-height_14rmt_l7dlm_463 > .awsui_tabs-content-wrapper_14rmt_l7dlm_483:not(#\9) {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: auto;
 }
-.awsui_fit-height_14rmt_104vw_460 > .awsui_tabs-content-wrapper_14rmt_104vw_480 > .awsui_tabs-container-content-wrapper_14rmt_104vw_491:not(#\9) {
+.awsui_fit-height_14rmt_l7dlm_463 > .awsui_tabs-content-wrapper_14rmt_l7dlm_483 > .awsui_tabs-container-content-wrapper_14rmt_l7dlm_494:not(#\9) {
   block-size: 100%;
   display: flex;
   flex-direction: column;
 }
-.awsui_tabs-container-content-wrapper_14rmt_104vw_491.awsui_with-paddings_14rmt_104vw_480 > .awsui_tabs-content_14rmt_104vw_456:not(#\9) {
+.awsui_tabs-container-content-wrapper_14rmt_l7dlm_494.awsui_with-paddings_14rmt_l7dlm_483 > .awsui_tabs-content_14rmt_l7dlm_459:not(#\9) {
   padding-block-start: var(--space-tabs-content-top-53djlo, 16px);
   padding-block-end: var(--space-scaled-l-08jb88, 20px);
   padding-inline: var(--space-container-horizontal-oebwqe, 20px);
+}
+.awsui_disabled-reason-tooltip_14rmt_l7dlm_505:not(#\9) {
+  /* used in test-utils or tests */
+}
+.awsui_tabs-tab-focused_14rmt_l7dlm_509:not(#\9) {
+  /* used to manage focusable state for disabled with reason tabs */
 }

package/lib/internal/template/tabs/styles.selectors.js CHANGED Viewed

@@ -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_104vw_194",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_104vw_202",
-  "pagination-button": "awsui_pagination-button_14rmt_104vw_219",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_104vw_226",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_104vw_229",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_104vw_233",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_104vw_236",
-  "tabs-tab": "awsui_tabs-tab_14rmt_104vw_241",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_104vw_250",
-  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_104vw_261",
-  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_104vw_262",
-  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_104vw_266",
-  "refresh": "awsui_refresh_14rmt_104vw_281",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_104vw_285",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_104vw_327",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_104vw_404",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_104vw_411",
-  "root": "awsui_root_14rmt_104vw_415",
-  "tabs": "awsui_tabs_14rmt_104vw_194",
-  "tabs-content": "awsui_tabs-content_14rmt_104vw_456",
-  "fit-height": "awsui_fit-height_14rmt_104vw_460",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_104vw_466",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_104vw_480",
-  "with-paddings": "awsui_with-paddings_14rmt_104vw_480",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_104vw_491"
+  "tabs-header": "awsui_tabs-header_14rmt_l7dlm_194",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_l7dlm_202",
+  "pagination-button": "awsui_pagination-button_14rmt_l7dlm_219",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_l7dlm_226",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_l7dlm_229",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_l7dlm_233",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_l7dlm_236",
+  "tabs-tab": "awsui_tabs-tab_14rmt_l7dlm_241",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_l7dlm_250",
+  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_l7dlm_261",
+  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_l7dlm_262",
+  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_l7dlm_266",
+  "refresh": "awsui_refresh_14rmt_l7dlm_281",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_l7dlm_285",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_l7dlm_327",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_l7dlm_403",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_l7dlm_410",
+  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_l7dlm_414",
+  "root": "awsui_root_14rmt_l7dlm_418",
+  "tabs": "awsui_tabs_14rmt_l7dlm_194",
+  "tabs-content": "awsui_tabs-content_14rmt_l7dlm_459",
+  "fit-height": "awsui_fit-height_14rmt_l7dlm_463",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_l7dlm_469",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_l7dlm_483",
+  "with-paddings": "awsui_with-paddings_14rmt_l7dlm_483",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_l7dlm_494",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_l7dlm_505",
+  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_l7dlm_509"
 };

package/lib/internal/template/tabs/tab-header-bar.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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;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/lib/internal/template/tabs/tab-header-bar.js CHANGED Viewed

@@ -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;