@cloudscape-design/components-themeable 3.0.1164 → 3.0.1166

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs/styles.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { SYSTEM } from '../internal/environment';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { TabsProps } from './interfaces';\n\nexport function getTabStyles(style: TabsProps['style']) {\n  if (SYSTEM !== 'core') {\n    return undefined;\n  }\n\n  return {\n    borderRadius: style?.tab?.borderRadius,\n    borderWidth: style?.tab?.borderWidth,\n    fontSize: style?.tab?.fontSize,\n    fontWeight: style?.tab?.fontWeight,\n    paddingBlock: style?.tab?.paddingBlock,\n    paddingInline: style?.tab?.paddingInline,\n    [customCssProps.styleBackgroundActive]: style?.tab?.backgroundColor?.active,\n    [customCssProps.styleBackgroundDefault]: style?.tab?.backgroundColor?.default,\n    [customCssProps.styleBackgroundDisabled]: style?.tab?.backgroundColor?.disabled,\n    [customCssProps.styleBackgroundHover]: style?.tab?.backgroundColor?.hover,\n    [customCssProps.styleBorderColorActive]: style?.tab?.borderColor?.active,\n    [customCssProps.styleBorderColorDefault]: style?.tab?.borderColor?.default,\n    [customCssProps.styleBorderColorDisabled]: style?.tab?.borderColor?.disabled,\n    [customCssProps.styleBorderColorHover]: style?.tab?.borderColor?.hover,\n    [customCssProps.styleColorActive]: style?.tab?.color?.active,\n    [customCssProps.styleColorDefault]: style?.tab?.color?.default,\n    [customCssProps.styleColorDisabled]: style?.tab?.color?.disabled,\n    [customCssProps.styleColorHover]: style?.tab?.color?.hover,\n    [customCssProps.styleFocusRingBorderColor]: style?.tab?.focusRing?.borderColor,\n    [customCssProps.styleFocusRingBorderRadius]: style?.tab?.focusRing?.borderRadius,\n    [customCssProps.styleFocusRingBorderWidth]: style?.tab?.focusRing?.borderWidth,\n  };\n}\n\nexport function getTabContainerStyles(style: TabsProps['style']) {\n  if (SYSTEM !== 'core') {\n    return undefined;\n  }\n\n  return {\n    [customCssProps.styleTabsActiveIndicatorColor]: style?.tab?.activeIndicator?.color,\n    [customCssProps.styleTabsActiveIndicatorWidth]: style?.tab?.activeIndicator?.width,\n    [customCssProps.styleTabsActiveIndicatorBorderRadius]: style?.tab?.activeIndicator?.borderRadius,\n    [customCssProps.styleTabsSeparatorColor]: style?.tabSeparator?.color,\n    [customCssProps.styleTabsSeparatorWidth]: style?.tabSeparator?.width,\n  };\n}\n"]}

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

@@ -151,7 +151,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_1n7hy_154:not(#\9) {
+.awsui_tabs-header_14rmt_ldrjk_154:not(#\9) {
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
@@ -160,13 +160,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   flex-wrap: wrap;
 }
 
-.awsui_tab-header-scroll-container_14rmt_1n7hy_163:not(#\9) {
+.awsui_tab-header-scroll-container_14rmt_ldrjk_163:not(#\9) {
   display: flex;
   flex-grow: 1;
   max-inline-size: 100%;
 }
 
-.awsui_tabs-header-list_14rmt_1n7hy_169:not(#\9) {
+.awsui_tabs-header-list_14rmt_ldrjk_169:not(#\9) {
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
@@ -179,33 +179,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   scroll-snap-type: inline proximity;
   scrollbar-width: none; /* Firefox */
 }
-.awsui_tabs-header-list_14rmt_1n7hy_169:not(#\9)::-webkit-scrollbar {
+.awsui_tabs-header-list_14rmt_ldrjk_169:not(#\9)::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
 
-.awsui_pagination-button_14rmt_1n7hy_186:not(#\9) {
+.awsui_pagination-button_14rmt_ldrjk_186:not(#\9) {
   margin-block: var(--space-scaled-s-gjhvjd, 12px);
   margin-inline: 0;
   padding-block: 0;
   padding-inline: var(--space-xxs-jnczic, 4px);
   display: flex;
 }
-.awsui_pagination-button-left_14rmt_1n7hy_193:not(#\9) {
+.awsui_pagination-button-left_14rmt_ldrjk_193:not(#\9) {
   border-inline-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-control-disabled-c9dn39, #d5dbdb);
 }
-.awsui_pagination-button-left-scrollable_14rmt_1n7hy_196:not(#\9) {
+.awsui_pagination-button-left-scrollable_14rmt_ldrjk_196:not(#\9) {
   z-index: 1;
   box-shadow: 5px 0px 4px -3px var(--color-border-tabs-shadow-ya1u83, #eaeded), 1px 0px 0px 0px var(--color-border-tabs-shadow-ya1u83, #eaeded);
 }
-.awsui_pagination-button-right_14rmt_1n7hy_200:not(#\9) {
+.awsui_pagination-button-right_14rmt_ldrjk_200:not(#\9) {
   border-inline-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-control-disabled-c9dn39, #d5dbdb);
 }
-.awsui_pagination-button-right-scrollable_14rmt_1n7hy_203:not(#\9) {
+.awsui_pagination-button-right-scrollable_14rmt_ldrjk_203:not(#\9) {
   z-index: 1;
   box-shadow: -5px 0px 4px -3px var(--color-border-tabs-shadow-ya1u83, #eaeded), -1px 0px 0px 0 var(--color-border-tabs-shadow-ya1u83, #eaeded);
 }
 
-.awsui_actions-container_14rmt_1n7hy_208:not(#\9) {
+.awsui_actions-container_14rmt_ldrjk_208:not(#\9) {
   flex-shrink: 0;
   align-self: center;
   padding-block: var(--space-xs-kw7k3v, 8px);
@@ -213,7 +213,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline-start: auto;
 }
 
-.awsui_tabs-tab_14rmt_1n7hy_216:not(#\9) {
+.awsui_tabs-tab_14rmt_ldrjk_216:not(#\9) {
   list-style: none;
   padding-block: 0;
   padding-inline: 0;
@@ -223,7 +223,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   scroll-snap-align: start;
 }
 
-.awsui_tabs-tab-label_14rmt_1n7hy_226:not(#\9) {
+.awsui_tabs-tab-label_14rmt_ldrjk_226:not(#\9) {
   display: flex;
   align-items: center;
   padding-inline: var(--space-xs-kw7k3v, 8px);
@@ -234,7 +234,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-break: break-word;
 }
 
-.awsui_tabs-tab-header-container_14rmt_1n7hy_237:not(#\9) {
+.awsui_tabs-tab-header-container_14rmt_ldrjk_237:not(#\9) {
   position: relative;
   border-block: var(--border-divider-section-width-sznrdy, 1px) solid transparent;
   border-inline: var(--border-divider-section-width-sznrdy, 1px) solid transparent;
@@ -242,61 +242,58 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
   align-items: stretch;
 }
-.awsui_tabs-tab-header-container_14rmt_1n7hy_237:not(#\9), .awsui_tabs-tab-header-container_14rmt_1n7hy_237 > button:not(#\9) {
-  background-color: transparent;
-}
-.awsui_tabs-tab-header-container_14rmt_1n7hy_237 > .awsui_tabs-tab-dismiss_14rmt_1n7hy_248:not(#\9), .awsui_tabs-tab-header-container_14rmt_1n7hy_237 > .awsui_tabs-tab-action_14rmt_1n7hy_248:not(#\9) {
+.awsui_tabs-tab-header-container_14rmt_ldrjk_237 > .awsui_tabs-tab-dismiss_14rmt_ldrjk_245:not(#\9), .awsui_tabs-tab-header-container_14rmt_ldrjk_237 > .awsui_tabs-tab-action_14rmt_ldrjk_245:not(#\9) {
   position: relative;
   display: flex;
   align-items: center;
 }
-.awsui_tabs-tab-header-container_14rmt_1n7hy_237.awsui_refresh_14rmt_1n7hy_253 > span:not(#\9):first-of-type {
+.awsui_tabs-tab-header-container_14rmt_ldrjk_237.awsui_refresh_14rmt_ldrjk_250 > span:not(#\9):first-of-type {
   margin-inline-start: calc(-1 * var(--space-scaled-xs-sppte9, 8px));
 }
 
-.awsui_tabs-tab-header-container_14rmt_1n7hy_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1n7hy_257):after {
+.awsui_tabs-tab-header-container_14rmt_ldrjk_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ldrjk_254):after {
   content: "";
   position: absolute;
   inset-inline-start: 0;
   inline-size: calc(100% - 1px);
   inset-block-end: calc(-1 * var(--border-divider-section-width-sznrdy, 1px));
-  block-size: var(--border-active-width-vglvq7, 2px);
-  border-start-start-radius: var(--border-radius-tabs-focus-ring-ciyqfm, 0px);
-  border-start-end-radius: var(--border-radius-tabs-focus-ring-ciyqfm, 0px);
-  border-end-start-radius: var(--border-radius-tabs-focus-ring-ciyqfm, 0px);
-  border-end-end-radius: var(--border-radius-tabs-focus-ring-ciyqfm, 0px);
-  background: var(--color-border-tabs-underline-gpe7rp, #16191f);
+  block-size: var(--awsui-style-tabs-active-indicator-width-rhu47t, var(--border-active-width-vglvq7, 2px));
+  border-start-start-radius: var(--awsui-style-tabs-active-indicator-border-radius-rhu47t, var(--border-radius-tabs-focus-ring-ciyqfm, 0px));
+  border-start-end-radius: var(--awsui-style-tabs-active-indicator-border-radius-rhu47t, var(--border-radius-tabs-focus-ring-ciyqfm, 0px));
+  border-end-start-radius: var(--awsui-style-tabs-active-indicator-border-radius-rhu47t, var(--border-radius-tabs-focus-ring-ciyqfm, 0px));
+  border-end-end-radius: var(--awsui-style-tabs-active-indicator-border-radius-rhu47t, var(--border-radius-tabs-focus-ring-ciyqfm, 0px));
+  background: var(--awsui-style-tabs-active-indicator-color-rhu47t, var(--color-border-tabs-underline-gpe7rp, #16191f));
   opacity: 0;
 }
-.awsui_tabs-tab-header-container_14rmt_1n7hy_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1n7hy_257).awsui_refresh_14rmt_1n7hy_253:after {
+.awsui_tabs-tab-header-container_14rmt_ldrjk_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ldrjk_254).awsui_refresh_14rmt_ldrjk_250:after {
   transition: opacity var(--motion-duration-refresh-only-medium-h3wrr6, 0ms) var(--motion-easing-refresh-only-c-r5v2kx, cubic-bezier(0.84, 0, 0.16, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_tabs-tab-header-container_14rmt_1n7hy_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1n7hy_257).awsui_refresh_14rmt_1n7hy_253:after {
+  .awsui_tabs-tab-header-container_14rmt_ldrjk_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ldrjk_254).awsui_refresh_14rmt_ldrjk_250:after {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_tabs-tab-header-container_14rmt_1n7hy_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1n7hy_257).awsui_refresh_14rmt_1n7hy_253:after, .awsui-mode-entering .awsui_tabs-tab-header-container_14rmt_1n7hy_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1n7hy_257).awsui_refresh_14rmt_1n7hy_253:after {
+.awsui-motion-disabled .awsui_tabs-tab-header-container_14rmt_ldrjk_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ldrjk_254).awsui_refresh_14rmt_ldrjk_250:after, .awsui-mode-entering .awsui_tabs-tab-header-container_14rmt_ldrjk_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ldrjk_254).awsui_refresh_14rmt_ldrjk_250:after {
   animation: none;
   transition: none;
 }
 
-.awsui_tabs-tab_14rmt_1n7hy_216:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1n7hy_237 {
+.awsui_tabs-tab_14rmt_ldrjk_216:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_ldrjk_237 {
   margin-inline-end: calc(-1 * var(--border-divider-section-width-sznrdy, 1px));
 }
-.awsui_tabs-tab_14rmt_1n7hy_216:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1n7hy_237:before {
+.awsui_tabs-tab_14rmt_ldrjk_216:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_ldrjk_237:before {
   content: "";
   position: absolute;
-  border-inline-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-tabs-divider-uu65wu, #aab7b8);
+  border-inline-end: var(--awsui-style-tabs-separator-width-rhu47t, var(--border-divider-section-width-sznrdy, 1px)) solid var(--awsui-style-tabs-separator-color-rhu47t, var(--color-border-tabs-divider-uu65wu, #aab7b8));
   inset: var(--space-scaled-s-gjhvjd, 12px) 0;
   opacity: 1;
 }
-.awsui_tabs-tab_14rmt_1n7hy_216:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1n7hy_237.awsui_refresh_14rmt_1n7hy_253:before {
+.awsui_tabs-tab_14rmt_ldrjk_216:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_ldrjk_237.awsui_refresh_14rmt_ldrjk_250:before {
   inset: calc(var(--space-static-s-8me5rn, 12px) - var(--border-active-width-vglvq7, 2px)) 0;
 }
 
-.awsui_tabs-tab-link_14rmt_1n7hy_299:not(#\9) {
+.awsui_tabs-tab-link_14rmt_ldrjk_296:not(#\9) {
   position: relative;
   display: flex;
   align-items: stretch;
@@ -306,38 +303,40 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block-end: calc(var(--space-scaled-s-gjhvjd, 12px) - 1px);
   padding-inline: 0;
   margin-block-start: 1px;
-  border-block: var(--border-divider-section-width-sznrdy, 1px) solid transparent;
-  border-inline: var(--border-divider-section-width-sznrdy, 1px) solid transparent;
+  border-block: var(--border-divider-section-width-sznrdy, 1px) solid var(--awsui-style-border-color-default-rhu47t, transparent);
+  border-inline: var(--border-divider-section-width-sznrdy, 1px) solid var(--awsui-style-border-color-default-rhu47t, transparent);
   font-size: var(--font-tabs-size-cgkf8e, 14px);
   line-height: var(--font-tabs-line-height-60v8rh, 22px);
   font-weight: var(--font-wayfinding-link-active-weight-lhxtkr, 700);
-  color: var(--color-text-interactive-default-qwoe3g, #545b64);
+  color: var(--awsui-style-color-default-rhu47t, var(--color-text-interactive-default-qwoe3g, #545b64));
+  background-color: var(--awsui-style-background-default-rhu47t, transparent);
   padding-inline-start: calc(var(--space-xxs-jnczic, 4px) - 1px);
   padding-inline-end: var(--space-xxs-jnczic, 4px);
   -webkit-font-smoothing: var(--font-smoothing-webkit-px4az4, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
 }
-.awsui_tabs-tab-link_14rmt_1n7hy_299.awsui_refresh_14rmt_1n7hy_253:not(#\9) {
+.awsui_tabs-tab-link_14rmt_ldrjk_296.awsui_refresh_14rmt_ldrjk_250:not(#\9) {
   padding-block-start: calc(var(--space-static-xs-4gq40t, 8px) - 1px);
   padding-block-end: calc(var(--space-static-xs-4gq40t, 8px) - 1px);
   margin-block-start: 0;
 }
-.awsui_tabs-tab-link_14rmt_1n7hy_299:not(#\9):hover {
-  color: var(--color-text-accent-rvq171, #0073bb);
+.awsui_tabs-tab-link_14rmt_ldrjk_296:not(#\9):hover {
+  color: var(--awsui-style-color-hover-rhu47t, var(--color-text-accent-rvq171, #0073bb));
+  border-color: var(--awsui-style-border-color-hover-rhu47t, var(--awsui-style-border-color-default-rhu47t, transparent));
+  background-color: var(--awsui-style-background-hover-rhu47t, var(--awsui-style-background-default-rhu47t, transparent));
 }
-.awsui_tabs-tab-link_14rmt_1n7hy_299:not(#\9):focus {
+.awsui_tabs-tab-link_14rmt_ldrjk_296:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1n7hy_299:not(#\9):focus {
-  z-index: 1;
-  border-inline-end-color: transparent;
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_ldrjk_296:not(#\9):focus {
+  --awsui-style-focus-ring-box-shadow-rhu47t: 0 0 0 var(--awsui-style-focus-ring-border-width-rhu47t, 2px) var(--awsui-style-focus-ring-border-color-rhu47t, var(--color-border-item-focused-r5f6xl, #0073bb));
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1n7hy_299:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_ldrjk_296:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-tabs-focus-outline-gutter-7tqwip, 0px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1n7hy_299:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_ldrjk_296:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -345,55 +344,60 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1n7hy_299:not(#\9
   inset-block-start: calc(-1 * var(--space-tabs-focus-outline-gutter-7tqwip, 0px));
   inline-size: calc(100% + var(--space-tabs-focus-outline-gutter-7tqwip, 0px) + var(--space-tabs-focus-outline-gutter-7tqwip, 0px));
   block-size: calc(100% + var(--space-tabs-focus-outline-gutter-7tqwip, 0px) + var(--space-tabs-focus-outline-gutter-7tqwip, 0px));
-  border-start-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  border-start-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  border-end-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
+  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-rhu47t, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-rhu47t, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-rhu47t, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-rhu47t, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  box-shadow: var(--awsui-style-focus-ring-box-shadow-rhu47t);
+  z-index: 1;
 }
 
-.awsui_tabs-tab_14rmt_1n7hy_216:not(#\9):first-child {
+.awsui_tabs-tab_14rmt_ldrjk_216:not(#\9):first-child {
   margin-inline-start: 1px;
   scroll-margin-inline-start: 1px;
 }
-.awsui_tabs-tab_14rmt_1n7hy_216:not(#\9):first-child > .awsui_tabs-tab-header-container_14rmt_1n7hy_237 {
+.awsui_tabs-tab_14rmt_ldrjk_216:not(#\9):first-child > .awsui_tabs-tab-header-container_14rmt_ldrjk_237 {
   padding-inline-start: calc(var(--space-xs-kw7k3v, 8px) - 1px);
 }
 
-.awsui_tabs-tab_14rmt_1n7hy_216:not(#\9):last-child {
+.awsui_tabs-tab_14rmt_ldrjk_216:not(#\9):last-child {
   margin-inline-end: 1px;
   scroll-margin-inline-end: 1px;
 }
-.awsui_tabs-tab_14rmt_1n7hy_216:not(#\9):last-child > .awsui_tabs-tab-header-container_14rmt_1n7hy_237 {
+.awsui_tabs-tab_14rmt_ldrjk_216:not(#\9):last-child > .awsui_tabs-tab-header-container_14rmt_ldrjk_237 {
   padding-inline-end: calc(var(--space-xs-kw7k3v, 8px) - 1px);
 }
 
-.awsui_tabs-tab-disabled_14rmt_1n7hy_257:not(#\9), .awsui_tabs-tab-disabled_14rmt_1n7hy_257:not(#\9):hover {
+.awsui_tabs-tab-disabled_14rmt_ldrjk_254:not(#\9), .awsui_tabs-tab-disabled_14rmt_ldrjk_254:not(#\9):hover {
   cursor: default;
-  color: var(--color-text-interactive-disabled-xwt2jl, #aab7b8);
+  color: var(--awsui-style-color-disabled-rhu47t, var(--color-text-interactive-disabled-xwt2jl, #aab7b8));
+  border-color: var(--awsui-style-border-color-disabled-rhu47t, transparent);
+  background-color: var(--awsui-style-background-disabled-rhu47t, transparent);
   font-weight: var(--font-tabs-disabled-weight-co27a7, 400);
 }
 
-.awsui_tabs-tab-active_14rmt_1n7hy_377:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1n7hy_257) {
-  color: var(--color-text-accent-rvq171, #0073bb);
+.awsui_tabs-tab-active_14rmt_ldrjk_379:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ldrjk_254) {
+  color: var(--awsui-style-color-active-rhu47t, var(--color-text-accent-rvq171, #0073bb));
+  border-color: var(--awsui-style-border-color-active-rhu47t, transparent);
+  background-color: var(--awsui-style-background-active-rhu47t, transparent);
 }
-.awsui_tabs-tab-active_14rmt_1n7hy_377:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1n7hy_257):after {
+.awsui_tabs-tab-active_14rmt_ldrjk_379:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ldrjk_254):after {
   opacity: 1;
 }
 
-.awsui_tabs-header-with-divider_14rmt_1n7hy_384:not(#\9) {
+.awsui_tabs-header-with-divider_14rmt_ldrjk_388:not(#\9) {
   border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-tabs-divider-uu65wu, #aab7b8);
 }
 
-.awsui_tabs-tab-focusable_14rmt_1n7hy_388:not(#\9) {
+.awsui_tabs-tab-focusable_14rmt_ldrjk_392:not(#\9) {
   /* used to manage focusable logic */
 }
 
-.awsui_root_14rmt_1n7hy_392:not(#\9) {
+.awsui_root_14rmt_ldrjk_396:not(#\9) {
   /* used in test-utils or tests */
 }
 
-.awsui_tabs_14rmt_1n7hy_154:not(#\9) {
+.awsui_tabs_14rmt_ldrjk_154:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -427,21 +431,21 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1n7hy_299:not(#\9
   inline-size: 100%;
 }
 
-.awsui_tabs-content_14rmt_1n7hy_430:not(#\9) {
+.awsui_tabs-content_14rmt_ldrjk_434:not(#\9) {
   display: none;
 }
 
-.awsui_fit-height_14rmt_1n7hy_434:not(#\9) {
+.awsui_fit-height_14rmt_ldrjk_438:not(#\9) {
   display: flex;
   flex-direction: column;
   block-size: 100%;
 }
 
-.awsui_tabs-content-active_14rmt_1n7hy_440:not(#\9) {
+.awsui_tabs-content-active_14rmt_ldrjk_444:not(#\9) {
   display: block;
   flex: 1;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_1n7hy_440:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_ldrjk_444:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-start-start-radius: var(--border-radius-container-l30zxy, 0px);
@@ -451,32 +455,32 @@ body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_1n7hy_440:n
   box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
 }
 
-.awsui_tabs-content-wrapper_14rmt_1n7hy_454.awsui_with-paddings_14rmt_1n7hy_454 > .awsui_tabs-content_14rmt_1n7hy_430:not(#\9) {
+.awsui_tabs-content-wrapper_14rmt_ldrjk_458.awsui_with-paddings_14rmt_ldrjk_458 > .awsui_tabs-content_14rmt_ldrjk_434:not(#\9) {
   padding-block: var(--space-scaled-m-sw9kcx, 16px);
   padding-inline: 0;
 }
-.awsui_fit-height_14rmt_1n7hy_434 > .awsui_tabs-content-wrapper_14rmt_1n7hy_454:not(#\9) {
+.awsui_fit-height_14rmt_ldrjk_438 > .awsui_tabs-content-wrapper_14rmt_ldrjk_458:not(#\9) {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: auto;
 }
 
-.awsui_fit-height_14rmt_1n7hy_434 > .awsui_tabs-content-wrapper_14rmt_1n7hy_454 > .awsui_tabs-container-content-wrapper_14rmt_1n7hy_465:not(#\9) {
+.awsui_fit-height_14rmt_ldrjk_438 > .awsui_tabs-content-wrapper_14rmt_ldrjk_458 > .awsui_tabs-container-content-wrapper_14rmt_ldrjk_469:not(#\9) {
   block-size: 100%;
   display: flex;
   flex-direction: column;
 }
-.awsui_tabs-container-content-wrapper_14rmt_1n7hy_465.awsui_with-paddings_14rmt_1n7hy_454 > .awsui_tabs-content_14rmt_1n7hy_430:not(#\9) {
+.awsui_tabs-container-content-wrapper_14rmt_ldrjk_469.awsui_with-paddings_14rmt_ldrjk_458 > .awsui_tabs-content_14rmt_ldrjk_434:not(#\9) {
   padding-block-start: var(--space-tabs-content-top-i5vuz0, 16px);
   padding-block-end: var(--space-scaled-l-66n9sr, 20px);
   padding-inline: var(--space-container-horizontal-ipmk0e, 20px);
 }
 
-.awsui_disabled-reason-tooltip_14rmt_1n7hy_476:not(#\9) {
+.awsui_disabled-reason-tooltip_14rmt_ldrjk_480:not(#\9) {
   /* used in test-utils or tests */
 }
 
-.awsui_tabs-tab-focused_14rmt_1n7hy_480:not(#\9) {
+.awsui_tabs-tab-focused_14rmt_ldrjk_484:not(#\9) {
   /* used to manage focusable state for disabled with reason tabs */
 }

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

@@ -2,35 +2,35 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "tabs-header": "awsui_tabs-header_14rmt_1n7hy_154",
-  "tab-header-scroll-container": "awsui_tab-header-scroll-container_14rmt_1n7hy_163",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_1n7hy_169",
-  "pagination-button": "awsui_pagination-button_14rmt_1n7hy_186",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_1n7hy_193",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1n7hy_196",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_1n7hy_200",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1n7hy_203",
-  "actions-container": "awsui_actions-container_14rmt_1n7hy_208",
-  "tabs-tab": "awsui_tabs-tab_14rmt_1n7hy_216",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1n7hy_226",
-  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_1n7hy_237",
-  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_1n7hy_248",
-  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_1n7hy_248",
-  "refresh": "awsui_refresh_14rmt_1n7hy_253",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1n7hy_257",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1n7hy_299",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1n7hy_377",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1n7hy_384",
-  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_1n7hy_388",
-  "root": "awsui_root_14rmt_1n7hy_392",
-  "tabs": "awsui_tabs_14rmt_1n7hy_154",
-  "tabs-content": "awsui_tabs-content_14rmt_1n7hy_430",
-  "fit-height": "awsui_fit-height_14rmt_1n7hy_434",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_1n7hy_440",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1n7hy_454",
-  "with-paddings": "awsui_with-paddings_14rmt_1n7hy_454",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1n7hy_465",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_1n7hy_476",
-  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_1n7hy_480"
+  "tabs-header": "awsui_tabs-header_14rmt_ldrjk_154",
+  "tab-header-scroll-container": "awsui_tab-header-scroll-container_14rmt_ldrjk_163",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_ldrjk_169",
+  "pagination-button": "awsui_pagination-button_14rmt_ldrjk_186",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_ldrjk_193",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_ldrjk_196",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_ldrjk_200",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_ldrjk_203",
+  "actions-container": "awsui_actions-container_14rmt_ldrjk_208",
+  "tabs-tab": "awsui_tabs-tab_14rmt_ldrjk_216",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_ldrjk_226",
+  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_ldrjk_237",
+  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_ldrjk_245",
+  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_ldrjk_245",
+  "refresh": "awsui_refresh_14rmt_ldrjk_250",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_ldrjk_254",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_ldrjk_296",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_ldrjk_379",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_ldrjk_388",
+  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_ldrjk_392",
+  "root": "awsui_root_14rmt_ldrjk_396",
+  "tabs": "awsui_tabs_14rmt_ldrjk_154",
+  "tabs-content": "awsui_tabs-content_14rmt_ldrjk_434",
+  "fit-height": "awsui_fit-height_14rmt_ldrjk_438",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_ldrjk_444",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_ldrjk_458",
+  "with-paddings": "awsui_with-paddings_14rmt_ldrjk_458",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_ldrjk_469",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_ldrjk_480",
+  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_ldrjk_484"
 };
   

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

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

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":"AAiCA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AA0CzC,UAAU,iBAAiB;IACzB,QAAQ,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,YAAY,KAAK,IAAI,CAAC;IACzD,WAAW,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACtC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IACpC,sBAAsB,EAAE,QAAQ,CAAC,SAAS,CAAC,wBAAwB,CAAC,CAAC,CAAC;IACtE,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,OAAO,GACR,EAAE,iBAAiB,eAqbnB;AA6ED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,UAEzF"}
+{"version":3,"file":"tab-header-bar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.tsx"],"names":[],"mappings":"AAiCA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AA2CzC,UAAU,iBAAiB;IACzB,QAAQ,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,YAAY,KAAK,IAAI,CAAC;IACzD,WAAW,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACtC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IACpC,sBAAsB,EAAE,QAAQ,CAAC,SAAS,CAAC,wBAAwB,CAAC,CAAC,CAAC;IACtE,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,OAAO,EACP,KAAK,GACN,EAAE,iBAAiB,eA6bnB;AA+ED,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

@@ -18,6 +18,7 @@ import { circleIndex } from '../internal/utils/circle-index';
 import { isHTMLElement } from '../internal/utils/dom';
 import handleKey from '../internal/utils/handle-key';
 import { hasHorizontalOverflow, hasInlineEndOverflow, hasInlineStartOverflow, onPaginationClick, scrollIntoView, } from './scroll-utils';
+import { getTabContainerStyles, getTabStyles } from './styles';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
@@ -27,7 +28,7 @@ const focusableTabSelector = `.${styles['tabs-tab-focusable']}`;
 function dismissButton({ dismissLabel, dismissDisabled, onDismiss, tabId, }) {
     return (React.createElement(InternalButton, { onClick: onDismiss, variant: "icon", iconName: "close", formAction: "none", ariaLabel: dismissLabel, disabled: dismissDisabled, className: clsx(testUtilStyles['tab-dismiss-button'], analyticsSelectors['tab-dismiss-button']), "data-testid": `awsui-tab-dismiss-button-${tabId}` }));
 }
-export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace, ariaLabel, ariaLabelledby, i18nStrings, keyboardActivationMode, actions, }) {
+export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace, ariaLabel, ariaLabelledby, i18nStrings, keyboardActivationMode, actions, style, }) {
     const headerBarRef = useRef(null);
     const activeTabHeaderRef = useRef(null);
     const inlineStartOverflowButton = useRef(null);
@@ -364,13 +365,13 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
             },
         };
         return (React.createElement(TabItem, { ref: (element) => tabRefs.current.set(tab.id, element), className: styles['tabs-tab'], role: "presentation", key: tab.id },
-            React.createElement("div", { className: tabHeaderContainerClasses, ...tabHeaderContainerAriaProps, ...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadataInnerContext }) },
-                React.createElement(TabTrigger, { ref: setElement, tab: tab, elementProps: commonProps, activeTabId: activeTabId, index: index }),
+            React.createElement("div", { className: tabHeaderContainerClasses, ...tabHeaderContainerAriaProps, ...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadataInnerContext }), style: getTabContainerStyles(style) },
+                React.createElement(TabTrigger, { ref: setElement, tab: tab, elementProps: commonProps, activeTabId: activeTabId, index: index, style: style }),
                 action && React.createElement("span", { className: tabActionClasses }, action),
                 dismissible && (React.createElement("span", { className: styles['tabs-tab-dismiss'], ...getAnalyticsMetadataAttribute(analyticsDismissMetadata) }, dismissButton({ dismissLabel, dismissDisabled, onDismiss: handleDismiss, tabId: tab.id }))))));
     }
 }
-const TabTrigger = forwardRef(({ tab, elementProps, activeTabId, index }, ref) => {
+const TabTrigger = forwardRef(({ tab, elementProps, activeTabId, index, style }, ref) => {
     const refObject = useRef(null);
     const tabLabelRefObject = useRef(null);
     const mergedRef = useMergeRefs(refObject, ref);
@@ -405,6 +406,7 @@ const TabTrigger = forwardRef(({ tab, elementProps, activeTabId, index }, ref) =
         ...(isDisabledWithReason ? handlers : {}),
         ref: mergedRef,
         tabIndex: tabIndex,
+        style: { ...elementProps.style, ...getTabStyles(style) },
         ...(tab.disabled || tab.id === activeTabId ? {} : getAnalyticsMetadataAttribute(analyticsSelectMetadata)),
     };
     return tab.href ? (React.createElement("a", { ...commonProps, href: tab.href }, children)) : (React.createElement("button", { ...commonProps, type: "button", disabled: tab.disabled && !isDisabledWithReason }, children));