@cloudscape-design/components-themeable 3.0.744 → 3.0.745

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

@@ -279,7 +279,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_bz7zp_282:not(#\9) {
+.awsui_tabs-header_14rmt_1kh13_282:not(#\9) {
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
@@ -287,7 +287,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
 }
 
-.awsui_tabs-header-list_14rmt_bz7zp_290:not(#\9) {
+.awsui_tabs-header-list_14rmt_1kh13_290:not(#\9) {
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
@@ -300,33 +300,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_bz7zp_290:not(#\9)::-webkit-scrollbar {
+.awsui_tabs-header-list_14rmt_1kh13_290:not(#\9)::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
 
-.awsui_pagination-button_14rmt_bz7zp_307:not(#\9) {
+.awsui_pagination-button_14rmt_1kh13_307: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_bz7zp_314:not(#\9) {
+.awsui_pagination-button-left_14rmt_1kh13_314: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_bz7zp_317:not(#\9) {
+.awsui_pagination-button-left-scrollable_14rmt_1kh13_317: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_bz7zp_321:not(#\9) {
+.awsui_pagination-button-right_14rmt_1kh13_321: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_bz7zp_324:not(#\9) {
+.awsui_pagination-button-right-scrollable_14rmt_1kh13_324: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_bz7zp_329:not(#\9) {
+.awsui_tabs-tab_14rmt_1kh13_329:not(#\9) {
   list-style: none;
   padding-block: 0;
   padding-inline: 0;
@@ -335,7 +335,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_bz7zp_338:not(#\9) {
+.awsui_tabs-tab-label_14rmt_1kh13_338:not(#\9) {
   display: flex;
   align-items: center;
   padding-inline: var(--space-xs-xf5ch3, 8px);
@@ -346,7 +346,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-break: break-word;
 }
 
-.awsui_tabs-tab-header-container_14rmt_bz7zp_349:not(#\9) {
+.awsui_tabs-tab-header-container_14rmt_1kh13_349: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;
@@ -354,18 +354,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_bz7zp_349:not(#\9), .awsui_tabs-tab-header-container_14rmt_bz7zp_349 > button:not(#\9) {
+.awsui_tabs-tab-header-container_14rmt_1kh13_349:not(#\9), .awsui_tabs-tab-header-container_14rmt_1kh13_349 > button:not(#\9) {
   background-color: transparent;
 }
-.awsui_tabs-tab-header-container_14rmt_bz7zp_349 > .awsui_tabs-tab-dismiss_14rmt_bz7zp_360:not(#\9), .awsui_tabs-tab-header-container_14rmt_bz7zp_349 > .awsui_tabs-tab-action_14rmt_bz7zp_360:not(#\9) {
+.awsui_tabs-tab-header-container_14rmt_1kh13_349 > .awsui_tabs-tab-dismiss_14rmt_1kh13_360:not(#\9), .awsui_tabs-tab-header-container_14rmt_1kh13_349 > .awsui_tabs-tab-action_14rmt_1kh13_360:not(#\9) {
   display: flex;
   align-items: center;
 }
-.awsui_tabs-tab-header-container_14rmt_bz7zp_349.awsui_refresh_14rmt_bz7zp_364 > span:not(#\9):first-of-type {
+.awsui_tabs-tab-header-container_14rmt_1kh13_349.awsui_refresh_14rmt_1kh13_364 > span:not(#\9):first-of-type {
   margin-inline-start: calc(-1 * var(--space-scaled-xs-x91h81, 8px));
 }
 
-.awsui_tabs-tab-header-container_14rmt_bz7zp_349:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_bz7zp_368):after {
+.awsui_tabs-tab-header-container_14rmt_1kh13_349:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1kh13_368):after {
   content: "";
   position: absolute;
   inset-inline-start: 0;
@@ -379,35 +379,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_bz7zp_349:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_bz7zp_368).awsui_refresh_14rmt_bz7zp_364: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));
+.awsui_tabs-tab-header-container_14rmt_1kh13_349:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1kh13_368).awsui_refresh_14rmt_1kh13_364:after {
+  transition: opacity var(--motion-duration-refresh-only-medium-i6gkfs, 0ms) 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_bz7zp_349:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_bz7zp_368).awsui_refresh_14rmt_bz7zp_364:after {
+  .awsui_tabs-tab-header-container_14rmt_1kh13_349:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1kh13_368).awsui_refresh_14rmt_1kh13_364:after {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_tabs-tab-header-container_14rmt_bz7zp_349:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_bz7zp_368).awsui_refresh_14rmt_bz7zp_364:after, .awsui-mode-entering .awsui_tabs-tab-header-container_14rmt_bz7zp_349:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_bz7zp_368).awsui_refresh_14rmt_bz7zp_364:after {
+.awsui-motion-disabled .awsui_tabs-tab-header-container_14rmt_1kh13_349:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1kh13_368).awsui_refresh_14rmt_1kh13_364:after, .awsui-mode-entering .awsui_tabs-tab-header-container_14rmt_1kh13_349:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1kh13_368).awsui_refresh_14rmt_1kh13_364:after {
   animation: none;
   transition: none;
 }
 
-.awsui_tabs-tab_14rmt_bz7zp_329:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_bz7zp_349 {
+.awsui_tabs-tab_14rmt_1kh13_329:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1kh13_349 {
   margin-inline-end: calc(-1 * var(--border-divider-section-width-wl9k66, 1px));
 }
-.awsui_tabs-tab_14rmt_bz7zp_329:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_bz7zp_349:before {
+.awsui_tabs-tab_14rmt_1kh13_329:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1kh13_349:before {
   content: "";
   position: absolute;
   border-inline-end: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-tabs-divider-xzqbyc, #aab7b8);
   inset: var(--space-scaled-s-9q8n2q, 12px) 0;
   opacity: 1;
 }
-.awsui_tabs-tab_14rmt_bz7zp_329:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_bz7zp_349.awsui_refresh_14rmt_bz7zp_364:before {
+.awsui_tabs-tab_14rmt_1kh13_329:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1kh13_349.awsui_refresh_14rmt_1kh13_364:before {
   inset: calc(var(--space-static-s-8wszr2, 12px) - var(--border-active-width-lk35x8, 2px)) 0;
 }
 
-.awsui_tabs-tab-link_14rmt_bz7zp_410:not(#\9) {
+.awsui_tabs-tab-link_14rmt_1kh13_410:not(#\9) {
   position: relative;
   display: flex;
   align-items: stretch;
@@ -428,27 +428,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_bz7zp_410.awsui_refresh_14rmt_bz7zp_364:not(#\9) {
+.awsui_tabs-tab-link_14rmt_1kh13_410.awsui_refresh_14rmt_1kh13_364: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_bz7zp_410:not(#\9):hover {
+.awsui_tabs-tab-link_14rmt_1kh13_410:not(#\9):hover {
   color: var(--color-text-accent-yy9054, #0073bb);
 }
-.awsui_tabs-tab-link_14rmt_bz7zp_410:not(#\9):focus {
+.awsui_tabs-tab-link_14rmt_1kh13_410:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_bz7zp_410:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1kh13_410:not(#\9):focus {
   z-index: 1;
   position: relative;
   border-inline-end-color: transparent;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_bz7zp_410:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1kh13_410: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_bz7zp_410:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1kh13_410:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -463,46 +463,46 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_bz7zp_410:not(#\9
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
 
-.awsui_tabs-tab_14rmt_bz7zp_329:not(#\9):first-child {
+.awsui_tabs-tab_14rmt_1kh13_329:not(#\9):first-child {
   margin-inline-start: 1px;
 }
-.awsui_tabs-tab_14rmt_bz7zp_329:not(#\9):first-child > .awsui_tabs-tab-header-container_14rmt_bz7zp_349 {
+.awsui_tabs-tab_14rmt_1kh13_329:not(#\9):first-child > .awsui_tabs-tab-header-container_14rmt_1kh13_349 {
   padding-inline-start: calc(var(--space-xs-xf5ch3, 8px) - 1px);
 }
 
-.awsui_tabs-tab_14rmt_bz7zp_329:not(#\9):last-child {
+.awsui_tabs-tab_14rmt_1kh13_329:not(#\9):last-child {
   margin-inline-end: 1px;
 }
-.awsui_tabs-tab_14rmt_bz7zp_329:not(#\9):last-child > .awsui_tabs-tab-header-container_14rmt_bz7zp_349 {
+.awsui_tabs-tab_14rmt_1kh13_329:not(#\9):last-child > .awsui_tabs-tab-header-container_14rmt_1kh13_349 {
   padding-inline-end: calc(var(--space-xs-xf5ch3, 8px) - 1px);
 }
 
-.awsui_tabs-tab-disabled_14rmt_bz7zp_368:not(#\9), .awsui_tabs-tab-disabled_14rmt_bz7zp_368:not(#\9):hover {
+.awsui_tabs-tab-disabled_14rmt_1kh13_368:not(#\9), .awsui_tabs-tab-disabled_14rmt_1kh13_368: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_bz7zp_486:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_bz7zp_368) {
+.awsui_tabs-tab-active_14rmt_1kh13_486:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1kh13_368) {
   color: var(--color-text-accent-yy9054, #0073bb);
 }
-.awsui_tabs-tab-active_14rmt_bz7zp_486:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_bz7zp_368):after {
+.awsui_tabs-tab-active_14rmt_1kh13_486:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1kh13_368):after {
   opacity: 1;
 }
 
-.awsui_tabs-header-with-divider_14rmt_bz7zp_493:not(#\9) {
+.awsui_tabs-header-with-divider_14rmt_1kh13_493:not(#\9) {
   border-block-end: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-tabs-divider-xzqbyc, #aab7b8);
 }
 
-.awsui_tabs-tab-focusable_14rmt_bz7zp_497:not(#\9) {
+.awsui_tabs-tab-focusable_14rmt_1kh13_497:not(#\9) {
   /* used to manage focusable logic */
 }
 
-.awsui_root_14rmt_bz7zp_501:not(#\9) {
+.awsui_root_14rmt_1kh13_501:not(#\9) {
   /* used in test-utils or tests */
 }
 
-.awsui_tabs_14rmt_bz7zp_282:not(#\9) {
+.awsui_tabs_14rmt_1kh13_282:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -540,21 +540,21 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_bz7zp_410:not(#\9
   inline-size: 100%;
 }
 
-.awsui_tabs-content_14rmt_bz7zp_542:not(#\9) {
+.awsui_tabs-content_14rmt_1kh13_542:not(#\9) {
   display: none;
 }
 
-.awsui_fit-height_14rmt_bz7zp_546:not(#\9) {
+.awsui_fit-height_14rmt_1kh13_546:not(#\9) {
   display: flex;
   flex-direction: column;
   block-size: 100%;
 }
 
-.awsui_tabs-content-active_14rmt_bz7zp_552:not(#\9) {
+.awsui_tabs-content-active_14rmt_1kh13_552:not(#\9) {
   display: block;
   flex: 1;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_bz7zp_552:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_1kh13_552:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-start-start-radius: var(--border-radius-container-jm6teg, 0px);
@@ -564,32 +564,32 @@ body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_bz7zp_552:n
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
 
-.awsui_tabs-content-wrapper_14rmt_bz7zp_566.awsui_with-paddings_14rmt_bz7zp_566 > .awsui_tabs-content_14rmt_bz7zp_542:not(#\9) {
+.awsui_tabs-content-wrapper_14rmt_1kh13_566.awsui_with-paddings_14rmt_1kh13_566 > .awsui_tabs-content_14rmt_1kh13_542:not(#\9) {
   padding-block: var(--space-scaled-m-er48cl, 16px);
   padding-inline: 0;
 }
-.awsui_fit-height_14rmt_bz7zp_546 > .awsui_tabs-content-wrapper_14rmt_bz7zp_566:not(#\9) {
+.awsui_fit-height_14rmt_1kh13_546 > .awsui_tabs-content-wrapper_14rmt_1kh13_566:not(#\9) {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: auto;
 }
 
-.awsui_fit-height_14rmt_bz7zp_546 > .awsui_tabs-content-wrapper_14rmt_bz7zp_566 > .awsui_tabs-container-content-wrapper_14rmt_bz7zp_577:not(#\9) {
+.awsui_fit-height_14rmt_1kh13_546 > .awsui_tabs-content-wrapper_14rmt_1kh13_566 > .awsui_tabs-container-content-wrapper_14rmt_1kh13_577:not(#\9) {
   block-size: 100%;
   display: flex;
   flex-direction: column;
 }
-.awsui_tabs-container-content-wrapper_14rmt_bz7zp_577.awsui_with-paddings_14rmt_bz7zp_566 > .awsui_tabs-content_14rmt_bz7zp_542:not(#\9) {
+.awsui_tabs-container-content-wrapper_14rmt_1kh13_577.awsui_with-paddings_14rmt_1kh13_566 > .awsui_tabs-content_14rmt_1kh13_542: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_bz7zp_588:not(#\9) {
+.awsui_disabled-reason-tooltip_14rmt_1kh13_588:not(#\9) {
   /* used in test-utils or tests */
 }
 
-.awsui_tabs-tab-focused_14rmt_bz7zp_592:not(#\9) {
+.awsui_tabs-tab-focused_14rmt_1kh13_592:not(#\9) {
   /* used to manage focusable state for disabled with reason tabs */
 }

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

@@ -2,33 +2,33 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "tabs-header": "awsui_tabs-header_14rmt_bz7zp_282",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_bz7zp_290",
-  "pagination-button": "awsui_pagination-button_14rmt_bz7zp_307",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_bz7zp_314",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_bz7zp_317",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_bz7zp_321",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_bz7zp_324",
-  "tabs-tab": "awsui_tabs-tab_14rmt_bz7zp_329",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_bz7zp_338",
-  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_bz7zp_349",
-  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_bz7zp_360",
-  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_bz7zp_360",
-  "refresh": "awsui_refresh_14rmt_bz7zp_364",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_bz7zp_368",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_bz7zp_410",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_bz7zp_486",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_bz7zp_493",
-  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_bz7zp_497",
-  "root": "awsui_root_14rmt_bz7zp_501",
-  "tabs": "awsui_tabs_14rmt_bz7zp_282",
-  "tabs-content": "awsui_tabs-content_14rmt_bz7zp_542",
-  "fit-height": "awsui_fit-height_14rmt_bz7zp_546",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_bz7zp_552",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_bz7zp_566",
-  "with-paddings": "awsui_with-paddings_14rmt_bz7zp_566",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_bz7zp_577",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_bz7zp_588",
-  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_bz7zp_592"
+  "tabs-header": "awsui_tabs-header_14rmt_1kh13_282",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_1kh13_290",
+  "pagination-button": "awsui_pagination-button_14rmt_1kh13_307",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_1kh13_314",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1kh13_317",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_1kh13_321",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1kh13_324",
+  "tabs-tab": "awsui_tabs-tab_14rmt_1kh13_329",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1kh13_338",
+  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_1kh13_349",
+  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_1kh13_360",
+  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_1kh13_360",
+  "refresh": "awsui_refresh_14rmt_1kh13_364",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1kh13_368",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1kh13_410",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1kh13_486",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1kh13_493",
+  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_1kh13_497",
+  "root": "awsui_root_14rmt_1kh13_501",
+  "tabs": "awsui_tabs_14rmt_1kh13_282",
+  "tabs-content": "awsui_tabs-content_14rmt_1kh13_542",
+  "fit-height": "awsui_fit-height_14rmt_1kh13_546",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_1kh13_552",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1kh13_566",
+  "with-paddings": "awsui_with-paddings_14rmt_1kh13_566",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1kh13_577",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_1kh13_588",
+  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_1kh13_592"
 };
   

package/lib/internal/template/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":";AAwBA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAyCzC,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,eAgYnB;AAgED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,UAEzF"}
+{"version":3,"file":"tab-header-bar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.tsx"],"names":[],"mappings":";AA8BA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AA0CzC,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,eAuZnB;AA2ED,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

@@ -3,6 +3,7 @@
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import { InternalButton } from '../button/internal';
 import { useInternalI18n } from '../i18n/context';
 import { getAllFocusables } from '../internal/components/focus-lock/utils';
@@ -16,13 +17,14 @@ import { KeyCode } from '../internal/keycode';
 import { circleIndex } from '../internal/utils/circle-index';
 import handleKey from '../internal/utils/handle-key';
 import { hasHorizontalOverflow, hasInlineEndOverflow, hasInlineStartOverflow, onPaginationClick, scrollIntoView, } from './scroll-utils';
+import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
 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, tabId, }) {
-    return (React.createElement(InternalButton, { onClick: onDismiss, variant: "icon", iconName: "close", formAction: "none", ariaLabel: dismissLabel, disabled: dismissDisabled, className: testUtilStyles['tab-dismiss-button'], "data-testid": `awsui-tab-dismiss-button-${tabId}` }));
+    return (React.createElement(InternalButton, { onClick: onDismiss, variant: "icon", iconName: "close", formAction: "none", ariaLabel: dismissLabel, disabled: dismissDisabled, className: clsx(testUtilStyles['tab-dismiss-button'], analyticsSelectors['tab-dismiss-button']), "data-testid": `awsui-tab-dismiss-button-${tabId}` }));
 }
 export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace, ariaLabel, ariaLabelledby, i18nStrings, }) {
     const headerBarRef = useRef(null);
@@ -211,10 +213,10 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
         horizontalOverflow && (React.createElement("span", { ref: inlineStartOverflowButton, className: leftButtonClasses },
             React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-left", disabled: !inlineStartOverflow, __focusable: true, onClick: () => onPaginationClick(headerBarRef, 'backward'), ariaLabel: i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.scrollLeftAriaLabel) }))),
         React.createElement(SingleTabStopNavigationProvider, { ref: navigationAPI, navigationActive: true, getNextFocusTarget: getNextFocusTarget, onUnregisterActive: onUnregisterActive },
-            React.createElement(TabList, Object.assign({}, tabActionAttributes, { className: 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(TabList, Object.assign({}, tabActionAttributes, { className: clsx(styles['tabs-header-list'], analyticsSelectors['tabs-header-list']), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ref: headerBarRef, onScroll: onScroll, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur }), tabs.map(renderTabHeader))),
         horizontalOverflow && (React.createElement("span", { className: rightButtonClasses },
             React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-right", disabled: !inlineEndOverflow, __focusable: true, onClick: () => onPaginationClick(headerBarRef, 'forward'), ariaLabel: i18n('i18nStrings.scrollRightAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.scrollRightAriaLabel) })))));
-    function renderTabHeader(tab) {
+    function renderTabHeader(tab, index) {
         const { dismissible, dismissLabel, dismissDisabled, action, onDismiss } = tab;
         const isActive = activeTabId === tab.id && !tab.disabled;
         const clickTab = (event) => {
@@ -250,6 +252,7 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
             [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,
             [styles['tabs-tab-focused']]: focusedTabId === tab.id,
             [styles['tabs-tab-active']]: isActive,
+            [analyticsSelectors['active-tab-header']]: isActive,
             [styles['tabs-tab-disabled']]: tab.disabled,
             [styles['tabs-tab-focusable']]: !tab.disabled || (tab.disabled && !!tab.disabledReason),
         });
@@ -314,14 +317,29 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
             onDismiss(event);
         };
         const TabItem = hasActionOrDismissible ? 'div' : 'li';
+        const analyticsDismissMetadata = {
+            action: 'dismiss',
+            detail: {
+                id: tab.id,
+                label: `.${analyticsSelectors['tab-dismiss-button']}`,
+                position: `${index + 1}`,
+            },
+        };
+        const analyticsComponentMetadataInnerContext = {
+            innerContext: {
+                tabId: tab.id,
+                tabLabel: `.${analyticsSelectors['tab-label']}`,
+                tabPosition: `${index + 1}`,
+            },
+        };
         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 }),
+            React.createElement("div", Object.assign({ className: tabHeaderContainerClasses }, tabHeaderContainerAriaProps, getAnalyticsMetadataAttribute({ component: analyticsComponentMetadataInnerContext })),
+                React.createElement(TabTrigger, { ref: setElement, tab: tab, elementProps: commonProps, activeTabId: activeTabId, index: index }),
                 action && React.createElement("span", { className: tabActionClasses }, action),
-                dismissible && (React.createElement("span", { className: styles['tabs-tab-dismiss'] }, dismissButton({ dismissLabel, dismissDisabled, onDismiss: handleDismiss, tabId: tab.id }))))));
+                dismissible && (React.createElement("span", Object.assign({ className: styles['tabs-tab-dismiss'] }, getAnalyticsMetadataAttribute(analyticsDismissMetadata)), dismissButton({ dismissLabel, dismissDisabled, onDismiss: handleDismiss, tabId: tab.id }))))));
     }
 }
-const TabTrigger = forwardRef(({ tab, elementProps, }, ref) => {
+const TabTrigger = forwardRef(({ tab, elementProps, activeTabId, index }, ref) => {
     const refObject = useRef(null);
     const tabLabelRefObject = useRef(null);
     const mergedRef = useMergeRefs(refObject, ref);
@@ -330,7 +348,7 @@ const TabTrigger = forwardRef(({ tab, elementProps, }, ref) => {
     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),
+        React.createElement("span", { className: clsx(styles['tabs-tab-label'], analyticsSelectors['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 }))))));
@@ -340,7 +358,16 @@ const TabTrigger = forwardRef(({ tab, elementProps, }, ref) => {
         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 });
+    const analyticsSelectMetadata = {
+        action: 'select',
+        detail: {
+            id: tab.id,
+            label: `.${analyticsSelectors['tab-label']}`,
+            position: `${index + 1}`,
+            originTabId: activeTabId || '',
+        },
+    };
+    const commonProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, elementProps), (isDisabledWithReason ? targetProps : {})), (isDisabledWithReason ? handlers : {})), { ref: mergedRef, tabIndex: tabIndex }), (tab.disabled || tab.id === activeTabId ? {} : getAnalyticsMetadataAttribute(analyticsSelectMetadata)));
     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 }) {