@cloudscape-design/components 3.0.1156 → 3.0.1158

package/tabs/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ButtonProps } from '../button/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TabsProps extends BaseComponentProps {\n  /**\n   * Specifies the tabs to display. Each tab object has the following properties:\n   *\n   * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.\n   * - `label` (ReactNode) - Tab label shown in the UI.\n   * - `content` (ReactNode) - (Optional) Tab content to render in the container.\n   * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.\n   * - `disabledReason` (string) - (Optional) Displays tooltip near the tab when disabled. Use to provide additional context.\n   * - `dismissible` (boolean) - (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n   * - `dismissLabel` (boolean) - (Optional) Specifies an aria-label for the dismiss icon button.\n   * - `dismissDisabled` (boolean) - (Optional) Determines whether the dismiss button is disabled.\n   * - `action` (ReactNode) - (Optional) Action for the tab, rendered next to its corresponding label.\n   *    Although it is technically possible to insert any content, our UX guidelines only allow you to add\n   *    an icon button or icon button dropdown.\n   * - `onDismiss` (ButtonProps['onClick']) - (Optional) Called when a user clicks on the dismiss button.\n   * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The\n   *    `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,\n   *    ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,\n   *    if your application routing can handle such deep links. You can manually update routing on the current page\n   *    using the `activeTabHref` property of the `change` event's detail.\n   * - `contentRenderStrategy` (string) - (Optional) Determines when tab content is rendered:\n       - `'active'`: (Default) Only render content when the tab is active.\n   *   - `'eager'`: Always render tab content (hidden when the tab is not active).\n   *   - `'lazy'`: Like 'eager', but content is only rendered after the tab is first activated.\n   */\n  tabs: ReadonlyArray<TabsProps.Tab>;\n\n  /**\n   * Actions for the tabs header, displayed next to the list of tabs.\n   * Use this to add a button or button dropdown that performs actions on the\n   * entire tab list. We recommend a maximum of one interactive element to\n   * minimize the number of keyboard tab stops between the tab list and content.\n   */\n  actions?: React.ReactNode;\n\n  /**\n   * The possible visual variants of tabs are the following:\n   * * `default` - Use in any context.\n   * * `container` - Use this variant to have the tabs displayed within a container header.\n   * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).\n   * @visualrefresh `stacked` variant\n   */\n  variant?: TabsProps.Variant;\n\n  /**\n   * Called whenever the user selects a different tab.\n   * The event's `detail` contains the new `activeTabId`.\n   */\n  onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;\n\n  /**\n   * The `id` of the currently active tab.\n   * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).\n   * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).\n   */\n  activeTabId?: string;\n\n  /**\n   * Provides an `aria-label` to the tab container.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Sets the `aria-labelledby` property on the tab container.\n   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: TabsProps.I18nStrings;\n  /**\n   * Enabling this property makes the tab content fit to the available height.\n   * If the tab content is too short, it will stretch. If the tab content is too long, a vertical scrollbar will be shown.\n   */\n  fitHeight?: boolean;\n  /**\n   * Determines how the active tab is switched when navigating using\n   * the keyboard. The options are:\n   * - 'automatic' (default): the active tab is switched using the arrow keys.\n   * - 'manual': a tab must be explicitly activated using the enter/space key.\n   * We recommend using 'automatic' in most situations to provide consistent\n   * and quick switching between tabs. Use 'manual' only if there is a specific\n   * need to introduce friction to the switching of tabs.\n   */\n  keyboardActivationMode?: 'automatic' | 'manual';\n}\nexport namespace TabsProps {\n  export type Variant = 'default' | 'container' | 'stacked';\n\n  export interface Tab {\n    /**\n     * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.\n     */\n    id: string;\n    /**\n     * Tab label shown in the UI.\n     */\n    label: React.ReactNode;\n    /**\n     * Tab content to render in the container.\n     */\n    content?: React.ReactNode;\n    /**\n     * Whether this tab is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Provides a reason why this tab is disabled.\n     */\n    disabledReason?: string;\n    /**\n     * (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n     * When a user clicks on this button the onDismiss handler is called.\n     */\n    dismissible?: boolean;\n    /**\n     * (Optional) Specifies an aria-label for the dismiss icon button.\n     */\n    dismissLabel?: string;\n    /**\n     * (Optional) Determines whether the dismiss button is disabled.\n     */\n    dismissDisabled?: boolean;\n    /**\n     * (Optional) Action for the tab, rendered next to its corresponding label.\n     * Although it is technically possible to insert any content, our UX guidelines only allow you to add\n     * an icon button or icon button dropdown.\n     */\n    action?: React.ReactNode;\n    /**\n     * (event => void) Called when a user clicks on the dismiss button.\n     */\n    onDismiss?: ButtonProps['onClick'];\n    /**\n     * You can use this parameter to change the default `href` of the internal tab anchor. The\n     * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,\n     * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,\n     * when the routing can handle such deep links. You can manually update routing on the current page\n     * using the `activeTabHref` property of the `change` event's detail.\n     */\n    href?: string;\n    /**\n     * Determines when tab content is rendered:\n     * - 'active' (default): Only render content when the tab is active.\n     * - 'eager': Always render tab content (hidden when the tab is not active).\n     * - 'lazy': Like 'eager', but content is only rendered after the tab is first activated.\n     */\n    contentRenderStrategy?: 'active' | 'eager' | 'lazy';\n  }\n\n  export interface ChangeDetail {\n    /**\n     * The ID of the clicked tab.\n     */\n    activeTabId: string;\n    /**\n     * The `href` attribute of the clicked tab, if defined.\n     */\n    activeTabHref?: string;\n  }\n\n  export interface I18nStrings {\n    /**\n     * ARIA label for the scroll left button that appears when the tab header is wider than the container.\n     */\n    scrollLeftAriaLabel?: string;\n    /**\n     * ARIA label for the scroll right button that appears when the tab header is wider than the container.\n     */\n    scrollRightAriaLabel?: string;\n    /**\n     * ARIA role description for the Tabs component when an action or dismissible prop is in use. This is used\n     * with role=\"application\" to provide further information on the purpose of this component\n     */\n    tabsWithActionsAriaRoleDescription?: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ButtonProps } from '../button/interfaces';\nimport { ContainerProps } from '../container/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FocusRingStyle } from '../internal/types';\n\nexport interface TabsProps extends BaseComponentProps {\n  /**\n   * Specifies the tabs to display. Each tab object has the following properties:\n   *\n   * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.\n   * - `label` (ReactNode) - Tab label shown in the UI.\n   * - `content` (ReactNode) - (Optional) Tab content to render in the container.\n   * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.\n   * - `disabledReason` (string) - (Optional) Displays tooltip near the tab when disabled. Use to provide additional context.\n   * - `dismissible` (boolean) - (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n   * - `dismissLabel` (boolean) - (Optional) Specifies an aria-label for the dismiss icon button.\n   * - `dismissDisabled` (boolean) - (Optional) Determines whether the dismiss button is disabled.\n   * - `action` (ReactNode) - (Optional) Action for the tab, rendered next to its corresponding label.\n   *    Although it is technically possible to insert any content, our UX guidelines only allow you to add\n   *    an icon button or icon button dropdown.\n   * - `onDismiss` (ButtonProps['onClick']) - (Optional) Called when a user clicks on the dismiss button.\n   * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The\n   *    `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,\n   *    ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,\n   *    if your application routing can handle such deep links. You can manually update routing on the current page\n   *    using the `activeTabHref` property of the `change` event's detail.\n   * - `contentRenderStrategy` (string) - (Optional) Determines when tab content is rendered:\n       - `'active'`: (Default) Only render content when the tab is active.\n   *   - `'eager'`: Always render tab content (hidden when the tab is not active).\n   *   - `'lazy'`: Like 'eager', but content is only rendered after the tab is first activated.\n   */\n  tabs: ReadonlyArray<TabsProps.Tab>;\n\n  /**\n   * Actions for the tabs header, displayed next to the list of tabs.\n   * Use this to add a button or button dropdown that performs actions on the\n   * entire tab list. We recommend a maximum of one interactive element to\n   * minimize the number of keyboard tab stops between the tab list and content.\n   */\n  actions?: React.ReactNode;\n\n  /**\n   * The possible visual variants of tabs are the following:\n   * * `default` - Use in any context.\n   * * `container` - Use this variant to have the tabs displayed within a container header.\n   * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).\n   * @visualrefresh `stacked` variant\n   */\n  variant?: TabsProps.Variant;\n\n  /**\n   * Called whenever the user selects a different tab.\n   * The event's `detail` contains the new `activeTabId`.\n   */\n  onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;\n\n  /**\n   * The `id` of the currently active tab.\n   * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).\n   * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).\n   */\n  activeTabId?: string;\n\n  /**\n   * Provides an `aria-label` to the tab container.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Sets the `aria-labelledby` property on the tab container.\n   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: TabsProps.I18nStrings;\n  /**\n   * Enabling this property makes the tab content fit to the available height.\n   * If the tab content is too short, it will stretch. If the tab content is too long, a vertical scrollbar will be shown.\n   */\n  fitHeight?: boolean;\n  /**\n   * Determines how the active tab is switched when navigating using\n   * the keyboard. The options are:\n   * - 'automatic' (default): the active tab is switched using the arrow keys.\n   * - 'manual': a tab must be explicitly activated using the enter/space key.\n   * We recommend using 'automatic' in most situations to provide consistent\n   * and quick switching between tabs. Use 'manual' only if there is a specific\n   * need to introduce friction to the switching of tabs.\n   */\n  keyboardActivationMode?: 'automatic' | 'manual';\n\n  /**\n   * @awsuiSystem core\n   */\n  style?: TabsProps.Style;\n}\nexport namespace TabsProps {\n  export type Variant = 'default' | 'container' | 'stacked';\n\n  export interface Tab {\n    /**\n     * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.\n     */\n    id: string;\n    /**\n     * Tab label shown in the UI.\n     */\n    label: React.ReactNode;\n    /**\n     * Tab content to render in the container.\n     */\n    content?: React.ReactNode;\n    /**\n     * Whether this tab is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Provides a reason why this tab is disabled.\n     */\n    disabledReason?: string;\n    /**\n     * (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n     * When a user clicks on this button the onDismiss handler is called.\n     */\n    dismissible?: boolean;\n    /**\n     * (Optional) Specifies an aria-label for the dismiss icon button.\n     */\n    dismissLabel?: string;\n    /**\n     * (Optional) Determines whether the dismiss button is disabled.\n     */\n    dismissDisabled?: boolean;\n    /**\n     * (Optional) Action for the tab, rendered next to its corresponding label.\n     * Although it is technically possible to insert any content, our UX guidelines only allow you to add\n     * an icon button or icon button dropdown.\n     */\n    action?: React.ReactNode;\n    /**\n     * (event => void) Called when a user clicks on the dismiss button.\n     */\n    onDismiss?: ButtonProps['onClick'];\n    /**\n     * You can use this parameter to change the default `href` of the internal tab anchor. The\n     * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,\n     * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,\n     * when the routing can handle such deep links. You can manually update routing on the current page\n     * using the `activeTabHref` property of the `change` event's detail.\n     */\n    href?: string;\n    /**\n     * Determines when tab content is rendered:\n     * - 'active' (default): Only render content when the tab is active.\n     * - 'eager': Always render tab content (hidden when the tab is not active).\n     * - 'lazy': Like 'eager', but content is only rendered after the tab is first activated.\n     */\n    contentRenderStrategy?: 'active' | 'eager' | 'lazy';\n  }\n\n  export interface ChangeDetail {\n    /**\n     * The ID of the clicked tab.\n     */\n    activeTabId: string;\n    /**\n     * The `href` attribute of the clicked tab, if defined.\n     */\n    activeTabHref?: string;\n  }\n\n  export interface I18nStrings {\n    /**\n     * ARIA label for the scroll left button that appears when the tab header is wider than the container.\n     */\n    scrollLeftAriaLabel?: string;\n    /**\n     * ARIA label for the scroll right button that appears when the tab header is wider than the container.\n     */\n    scrollRightAriaLabel?: string;\n    /**\n     * ARIA role description for the Tabs component when an action or dismissible prop is in use. This is used\n     * with role=\"application\" to provide further information on the purpose of this component\n     */\n    tabsWithActionsAriaRoleDescription?: string;\n  }\n\n  export interface Style {\n    container?: ContainerProps.Style;\n    tab?: {\n      backgroundColor?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      borderColor?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      borderRadius?: string;\n      borderWidth?: string;\n      color?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      fontSize?: string;\n      fontWeight?: string;\n      focusRing?: FocusRingStyle;\n      paddingBlock?: string;\n      paddingInline?: string;\n      activeIndicator?: {\n        color?: string;\n        width?: string;\n        borderRadius?: string;\n      };\n    };\n    tabSeparator?: {\n      color?: string;\n      width?: string;\n    };\n  }\n}\n"]}

package/tabs/styles.css.js

@@ -1,35 +1,35 @@
 
     import './styles.scoped.css';
     export default {
-  "tabs-header": "awsui_tabs-header_14rmt_1l8w6_154",
-  "tab-header-scroll-container": "awsui_tab-header-scroll-container_14rmt_1l8w6_163",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_1l8w6_169",
-  "pagination-button": "awsui_pagination-button_14rmt_1l8w6_186",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_1l8w6_193",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1l8w6_196",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_1l8w6_200",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1l8w6_203",
-  "actions-container": "awsui_actions-container_14rmt_1l8w6_208",
-  "tabs-tab": "awsui_tabs-tab_14rmt_1l8w6_216",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1l8w6_226",
-  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_1l8w6_237",
-  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_1l8w6_248",
-  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_1l8w6_248",
-  "refresh": "awsui_refresh_14rmt_1l8w6_253",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1l8w6_257",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1l8w6_299",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1l8w6_377",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1l8w6_384",
-  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_1l8w6_388",
-  "root": "awsui_root_14rmt_1l8w6_392",
-  "tabs": "awsui_tabs_14rmt_1l8w6_154",
-  "tabs-content": "awsui_tabs-content_14rmt_1l8w6_430",
-  "fit-height": "awsui_fit-height_14rmt_1l8w6_434",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_1l8w6_440",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1l8w6_454",
-  "with-paddings": "awsui_with-paddings_14rmt_1l8w6_454",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1l8w6_465",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_1l8w6_476",
-  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_1l8w6_480"
+  "tabs-header": "awsui_tabs-header_14rmt_15h2w_154",
+  "tab-header-scroll-container": "awsui_tab-header-scroll-container_14rmt_15h2w_163",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_15h2w_169",
+  "pagination-button": "awsui_pagination-button_14rmt_15h2w_186",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_15h2w_193",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_15h2w_196",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_15h2w_200",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_15h2w_203",
+  "actions-container": "awsui_actions-container_14rmt_15h2w_208",
+  "tabs-tab": "awsui_tabs-tab_14rmt_15h2w_216",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_15h2w_226",
+  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_15h2w_237",
+  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_15h2w_245",
+  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_15h2w_245",
+  "refresh": "awsui_refresh_14rmt_15h2w_250",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_15h2w_254",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_15h2w_296",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_15h2w_379",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_15h2w_388",
+  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_15h2w_392",
+  "root": "awsui_root_14rmt_15h2w_396",
+  "tabs": "awsui_tabs_14rmt_15h2w_154",
+  "tabs-content": "awsui_tabs-content_14rmt_15h2w_434",
+  "fit-height": "awsui_fit-height_14rmt_15h2w_438",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_15h2w_444",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_15h2w_458",
+  "with-paddings": "awsui_with-paddings_14rmt_15h2w_458",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_15h2w_469",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_15h2w_480",
+  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_15h2w_484"
 };
   

package/tabs/styles.d.ts

@@ -0,0 +1,32 @@
+import customCssProps from '../internal/generated/custom-css-properties';
+import { TabsProps } from './interfaces';
+export declare function getTabStyles(style: TabsProps['style']): {
+  [customCssProps.styleBackgroundActive]: string | undefined;
+  [customCssProps.styleBackgroundDefault]: string | undefined;
+  [customCssProps.styleBackgroundDisabled]: string | undefined;
+  [customCssProps.styleBackgroundHover]: string | undefined;
+  [customCssProps.styleBorderColorActive]: string | undefined;
+  [customCssProps.styleBorderColorDefault]: string | undefined;
+  [customCssProps.styleBorderColorDisabled]: string | undefined;
+  [customCssProps.styleBorderColorHover]: string | undefined;
+  [customCssProps.styleColorActive]: string | undefined;
+  [customCssProps.styleColorDefault]: string | undefined;
+  [customCssProps.styleColorDisabled]: string | undefined;
+  [customCssProps.styleColorHover]: string | undefined;
+  [customCssProps.styleFocusRingBorderColor]: string | undefined;
+  [customCssProps.styleFocusRingBorderRadius]: string | undefined;
+  [customCssProps.styleFocusRingBorderWidth]: string | undefined;
+  borderRadius: string | undefined;
+  borderWidth: string | undefined;
+  fontSize: string | undefined;
+  fontWeight: string | undefined;
+  paddingBlock: string | undefined;
+  paddingInline: string | undefined;
+} | undefined;
+export declare function getTabContainerStyles(style: TabsProps['style']): {
+  [customCssProps.styleTabsActiveIndicatorColor]: string | undefined;
+  [customCssProps.styleTabsActiveIndicatorWidth]: string | undefined;
+  [customCssProps.styleTabsActiveIndicatorBorderRadius]: string | undefined;
+  [customCssProps.styleTabsSeparatorColor]: string | undefined;
+  [customCssProps.styleTabsSeparatorWidth]: string | undefined;
+} | undefined;

package/tabs/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/tabs/styles.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,MAAM,6CAA6C,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC;IAYlD,CAAC,cAAc,CAAC,qBAAqB,CAAC,qBAAqC;IAC3E,CAAC,cAAc,CAAC,sBAAsB,CAAC,qBAAsC;IAC7E,CAAC,cAAc,CAAC,uBAAuB,CAAC,qBAAuC;IAC/E,CAAC,cAAc,CAAC,oBAAoB,CAAC,qBAAoC;IACzE,CAAC,cAAc,CAAC,sBAAsB,CAAC,qBAAiC;IACxE,CAAC,cAAc,CAAC,uBAAuB,CAAC,qBAAkC;IAC1E,CAAC,cAAc,CAAC,wBAAwB,CAAC,qBAAmC;IAC5E,CAAC,cAAc,CAAC,qBAAqB,CAAC,qBAAgC;IACtE,CAAC,cAAc,CAAC,gBAAgB,CAAC,qBAA2B;IAC5D,CAAC,cAAc,CAAC,iBAAiB,CAAC,qBAA4B;IAC9D,CAAC,cAAc,CAAC,kBAAkB,CAAC,qBAA6B;IAChE,CAAC,cAAc,CAAC,eAAe,CAAC,qBAA0B;IAC1D,CAAC,cAAc,CAAC,yBAAyB,CAAC,qBAAoC;IAC9E,CAAC,cAAc,CAAC,0BAA0B,CAAC,qBAAqC;IAChF,CAAC,cAAc,CAAC,yBAAyB,CAAC,qBAAoC;;;;;;;cAEjF;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC;IAM3D,CAAC,cAAc,CAAC,6BAA6B,CAAC,qBAAoC;IAClF,CAAC,cAAc,CAAC,6BAA6B,CAAC,qBAAoC;IAClF,CAAC,cAAc,CAAC,oCAAoC,CAAC,qBAA2C;IAChG,CAAC,cAAc,CAAC,uBAAuB,CAAC,qBAA4B;IACpE,CAAC,cAAc,CAAC,uBAAuB,CAAC,qBAA4B;cAEvE"}

package/tabs/styles.js

@@ -0,0 +1,47 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SYSTEM } from '../internal/environment';
+import customCssProps from '../internal/generated/custom-css-properties';
+export function getTabStyles(style) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
+    if (SYSTEM !== 'core') {
+        return undefined;
+    }
+    return {
+        borderRadius: (_a = style === null || style === void 0 ? void 0 : style.tab) === null || _a === void 0 ? void 0 : _a.borderRadius,
+        borderWidth: (_b = style === null || style === void 0 ? void 0 : style.tab) === null || _b === void 0 ? void 0 : _b.borderWidth,
+        fontSize: (_c = style === null || style === void 0 ? void 0 : style.tab) === null || _c === void 0 ? void 0 : _c.fontSize,
+        fontWeight: (_d = style === null || style === void 0 ? void 0 : style.tab) === null || _d === void 0 ? void 0 : _d.fontWeight,
+        paddingBlock: (_e = style === null || style === void 0 ? void 0 : style.tab) === null || _e === void 0 ? void 0 : _e.paddingBlock,
+        paddingInline: (_f = style === null || style === void 0 ? void 0 : style.tab) === null || _f === void 0 ? void 0 : _f.paddingInline,
+        [customCssProps.styleBackgroundActive]: (_h = (_g = style === null || style === void 0 ? void 0 : style.tab) === null || _g === void 0 ? void 0 : _g.backgroundColor) === null || _h === void 0 ? void 0 : _h.active,
+        [customCssProps.styleBackgroundDefault]: (_k = (_j = style === null || style === void 0 ? void 0 : style.tab) === null || _j === void 0 ? void 0 : _j.backgroundColor) === null || _k === void 0 ? void 0 : _k.default,
+        [customCssProps.styleBackgroundDisabled]: (_m = (_l = style === null || style === void 0 ? void 0 : style.tab) === null || _l === void 0 ? void 0 : _l.backgroundColor) === null || _m === void 0 ? void 0 : _m.disabled,
+        [customCssProps.styleBackgroundHover]: (_p = (_o = style === null || style === void 0 ? void 0 : style.tab) === null || _o === void 0 ? void 0 : _o.backgroundColor) === null || _p === void 0 ? void 0 : _p.hover,
+        [customCssProps.styleBorderColorActive]: (_r = (_q = style === null || style === void 0 ? void 0 : style.tab) === null || _q === void 0 ? void 0 : _q.borderColor) === null || _r === void 0 ? void 0 : _r.active,
+        [customCssProps.styleBorderColorDefault]: (_t = (_s = style === null || style === void 0 ? void 0 : style.tab) === null || _s === void 0 ? void 0 : _s.borderColor) === null || _t === void 0 ? void 0 : _t.default,
+        [customCssProps.styleBorderColorDisabled]: (_v = (_u = style === null || style === void 0 ? void 0 : style.tab) === null || _u === void 0 ? void 0 : _u.borderColor) === null || _v === void 0 ? void 0 : _v.disabled,
+        [customCssProps.styleBorderColorHover]: (_x = (_w = style === null || style === void 0 ? void 0 : style.tab) === null || _w === void 0 ? void 0 : _w.borderColor) === null || _x === void 0 ? void 0 : _x.hover,
+        [customCssProps.styleColorActive]: (_z = (_y = style === null || style === void 0 ? void 0 : style.tab) === null || _y === void 0 ? void 0 : _y.color) === null || _z === void 0 ? void 0 : _z.active,
+        [customCssProps.styleColorDefault]: (_1 = (_0 = style === null || style === void 0 ? void 0 : style.tab) === null || _0 === void 0 ? void 0 : _0.color) === null || _1 === void 0 ? void 0 : _1.default,
+        [customCssProps.styleColorDisabled]: (_3 = (_2 = style === null || style === void 0 ? void 0 : style.tab) === null || _2 === void 0 ? void 0 : _2.color) === null || _3 === void 0 ? void 0 : _3.disabled,
+        [customCssProps.styleColorHover]: (_5 = (_4 = style === null || style === void 0 ? void 0 : style.tab) === null || _4 === void 0 ? void 0 : _4.color) === null || _5 === void 0 ? void 0 : _5.hover,
+        [customCssProps.styleFocusRingBorderColor]: (_7 = (_6 = style === null || style === void 0 ? void 0 : style.tab) === null || _6 === void 0 ? void 0 : _6.focusRing) === null || _7 === void 0 ? void 0 : _7.borderColor,
+        [customCssProps.styleFocusRingBorderRadius]: (_9 = (_8 = style === null || style === void 0 ? void 0 : style.tab) === null || _8 === void 0 ? void 0 : _8.focusRing) === null || _9 === void 0 ? void 0 : _9.borderRadius,
+        [customCssProps.styleFocusRingBorderWidth]: (_11 = (_10 = style === null || style === void 0 ? void 0 : style.tab) === null || _10 === void 0 ? void 0 : _10.focusRing) === null || _11 === void 0 ? void 0 : _11.borderWidth,
+    };
+}
+export function getTabContainerStyles(style) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (SYSTEM !== 'core') {
+        return undefined;
+    }
+    return {
+        [customCssProps.styleTabsActiveIndicatorColor]: (_b = (_a = style === null || style === void 0 ? void 0 : style.tab) === null || _a === void 0 ? void 0 : _a.activeIndicator) === null || _b === void 0 ? void 0 : _b.color,
+        [customCssProps.styleTabsActiveIndicatorWidth]: (_d = (_c = style === null || style === void 0 ? void 0 : style.tab) === null || _c === void 0 ? void 0 : _c.activeIndicator) === null || _d === void 0 ? void 0 : _d.width,
+        [customCssProps.styleTabsActiveIndicatorBorderRadius]: (_f = (_e = style === null || style === void 0 ? void 0 : style.tab) === null || _e === void 0 ? void 0 : _e.activeIndicator) === null || _f === void 0 ? void 0 : _f.borderRadius,
+        [customCssProps.styleTabsSeparatorColor]: (_g = style === null || style === void 0 ? void 0 : style.tabSeparator) === null || _g === void 0 ? void 0 : _g.color,
+        [customCssProps.styleTabsSeparatorWidth]: (_h = style === null || style === void 0 ? void 0 : style.tabSeparator) === null || _h === void 0 ? void 0 : _h.width,
+    };
+}
+//# sourceMappingURL=styles.js.map

package/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/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_1l8w6_154:not(#\9) {
+.awsui_tabs-header_14rmt_15h2w_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_1l8w6_163:not(#\9) {
+.awsui_tab-header-scroll-container_14rmt_15h2w_163:not(#\9) {
   display: flex;
   flex-grow: 1;
   max-inline-size: 100%;
 }
 
-.awsui_tabs-header-list_14rmt_1l8w6_169:not(#\9) {
+.awsui_tabs-header-list_14rmt_15h2w_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_1l8w6_169:not(#\9)::-webkit-scrollbar {
+.awsui_tabs-header-list_14rmt_15h2w_169:not(#\9)::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
 
-.awsui_pagination-button_14rmt_1l8w6_186:not(#\9) {
+.awsui_pagination-button_14rmt_15h2w_186:not(#\9) {
   margin-block: var(--space-scaled-s-8ozaad, 12px);
   margin-inline: 0;
   padding-block: 0;
   padding-inline: var(--space-xxs-hwfkai, 4px);
   display: flex;
 }
-.awsui_pagination-button-left_14rmt_1l8w6_193:not(#\9) {
+.awsui_pagination-button-left_14rmt_15h2w_193:not(#\9) {
   border-inline-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-control-disabled-uj7t08, #dedee3);
 }
-.awsui_pagination-button-left-scrollable_14rmt_1l8w6_196:not(#\9) {
+.awsui_pagination-button-left-scrollable_14rmt_15h2w_196:not(#\9) {
   z-index: 1;
   box-shadow: 5px 0px 4px -3px var(--color-border-tabs-shadow-ugyo07, rgba(15, 20, 26, 0.12)), 1px 0px 0px 0px var(--color-border-tabs-shadow-ugyo07, rgba(15, 20, 26, 0.12));
 }
-.awsui_pagination-button-right_14rmt_1l8w6_200:not(#\9) {
+.awsui_pagination-button-right_14rmt_15h2w_200:not(#\9) {
   border-inline-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-control-disabled-uj7t08, #dedee3);
 }
-.awsui_pagination-button-right-scrollable_14rmt_1l8w6_203:not(#\9) {
+.awsui_pagination-button-right-scrollable_14rmt_15h2w_203:not(#\9) {
   z-index: 1;
   box-shadow: -5px 0px 4px -3px var(--color-border-tabs-shadow-ugyo07, rgba(15, 20, 26, 0.12)), -1px 0px 0px 0 var(--color-border-tabs-shadow-ugyo07, rgba(15, 20, 26, 0.12));
 }
 
-.awsui_actions-container_14rmt_1l8w6_208:not(#\9) {
+.awsui_actions-container_14rmt_15h2w_208:not(#\9) {
   flex-shrink: 0;
   align-self: center;
   padding-block: var(--space-xs-ymlm0b, 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_1l8w6_216:not(#\9) {
+.awsui_tabs-tab_14rmt_15h2w_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_1l8w6_226:not(#\9) {
+.awsui_tabs-tab-label_14rmt_15h2w_226:not(#\9) {
   display: flex;
   align-items: center;
   padding-inline: var(--space-xs-ymlm0b, 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_1l8w6_237:not(#\9) {
+.awsui_tabs-tab-header-container_14rmt_15h2w_237:not(#\9) {
   position: relative;
   border-block: var(--border-divider-section-width-uwo8my, 1px) solid transparent;
   border-inline: var(--border-divider-section-width-uwo8my, 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_1l8w6_237:not(#\9), .awsui_tabs-tab-header-container_14rmt_1l8w6_237 > button:not(#\9) {
-  background-color: transparent;
-}
-.awsui_tabs-tab-header-container_14rmt_1l8w6_237 > .awsui_tabs-tab-dismiss_14rmt_1l8w6_248:not(#\9), .awsui_tabs-tab-header-container_14rmt_1l8w6_237 > .awsui_tabs-tab-action_14rmt_1l8w6_248:not(#\9) {
+.awsui_tabs-tab-header-container_14rmt_15h2w_237 > .awsui_tabs-tab-dismiss_14rmt_15h2w_245:not(#\9), .awsui_tabs-tab-header-container_14rmt_15h2w_237 > .awsui_tabs-tab-action_14rmt_15h2w_245:not(#\9) {
   position: relative;
   display: flex;
   align-items: center;
 }
-.awsui_tabs-tab-header-container_14rmt_1l8w6_237.awsui_refresh_14rmt_1l8w6_253 > span:not(#\9):first-of-type {
+.awsui_tabs-tab-header-container_14rmt_15h2w_237.awsui_refresh_14rmt_15h2w_250 > span:not(#\9):first-of-type {
   margin-inline-start: calc(-1 * var(--space-scaled-xs-xwoogq, 8px));
 }
 
-.awsui_tabs-tab-header-container_14rmt_1l8w6_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1l8w6_257):after {
+.awsui_tabs-tab-header-container_14rmt_15h2w_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_15h2w_254):after {
   content: "";
   position: absolute;
   inset-inline-start: 0;
   inline-size: calc(100% - 1px);
   inset-block-end: calc(-1 * var(--border-divider-section-width-uwo8my, 1px));
-  block-size: var(--border-active-width-axzm24, 4px);
-  border-start-start-radius: var(--border-radius-tabs-focus-ring-o4qku1, 20px);
-  border-start-end-radius: var(--border-radius-tabs-focus-ring-o4qku1, 20px);
-  border-end-start-radius: var(--border-radius-tabs-focus-ring-o4qku1, 20px);
-  border-end-end-radius: var(--border-radius-tabs-focus-ring-o4qku1, 20px);
-  background: var(--color-border-tabs-underline-gudemr, #006ce0);
+  block-size: var(--awsui-style-tabs-active-indicator-width-rhu47t, var(--border-active-width-axzm24, 4px));
+  border-start-start-radius: var(--awsui-style-tabs-active-indicator-border-radius-rhu47t, var(--border-radius-tabs-focus-ring-o4qku1, 20px));
+  border-start-end-radius: var(--awsui-style-tabs-active-indicator-border-radius-rhu47t, var(--border-radius-tabs-focus-ring-o4qku1, 20px));
+  border-end-start-radius: var(--awsui-style-tabs-active-indicator-border-radius-rhu47t, var(--border-radius-tabs-focus-ring-o4qku1, 20px));
+  border-end-end-radius: var(--awsui-style-tabs-active-indicator-border-radius-rhu47t, var(--border-radius-tabs-focus-ring-o4qku1, 20px));
+  background: var(--awsui-style-tabs-active-indicator-color-rhu47t, var(--color-border-tabs-underline-gudemr, #006ce0));
   opacity: 0;
 }
-.awsui_tabs-tab-header-container_14rmt_1l8w6_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1l8w6_257).awsui_refresh_14rmt_1l8w6_253:after {
+.awsui_tabs-tab-header-container_14rmt_15h2w_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_15h2w_254).awsui_refresh_14rmt_15h2w_250:after {
   transition: opacity var(--motion-duration-refresh-only-medium-5rbn3k, 165ms) var(--motion-easing-refresh-only-c-cxy2sk, cubic-bezier(0.84, 0, 0.16, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_tabs-tab-header-container_14rmt_1l8w6_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1l8w6_257).awsui_refresh_14rmt_1l8w6_253:after {
+  .awsui_tabs-tab-header-container_14rmt_15h2w_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_15h2w_254).awsui_refresh_14rmt_15h2w_250:after {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_tabs-tab-header-container_14rmt_1l8w6_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1l8w6_257).awsui_refresh_14rmt_1l8w6_253:after, .awsui-mode-entering .awsui_tabs-tab-header-container_14rmt_1l8w6_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1l8w6_257).awsui_refresh_14rmt_1l8w6_253:after {
+.awsui-motion-disabled .awsui_tabs-tab-header-container_14rmt_15h2w_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_15h2w_254).awsui_refresh_14rmt_15h2w_250:after, .awsui-mode-entering .awsui_tabs-tab-header-container_14rmt_15h2w_237:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_15h2w_254).awsui_refresh_14rmt_15h2w_250:after {
   animation: none;
   transition: none;
 }
 
-.awsui_tabs-tab_14rmt_1l8w6_216:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1l8w6_237 {
+.awsui_tabs-tab_14rmt_15h2w_216:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_15h2w_237 {
   margin-inline-end: calc(-1 * var(--border-divider-section-width-uwo8my, 1px));
 }
-.awsui_tabs-tab_14rmt_1l8w6_216:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1l8w6_237:before {
+.awsui_tabs-tab_14rmt_15h2w_216:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_15h2w_237:before {
   content: "";
   position: absolute;
-  border-inline-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-tabs-divider-f5t9va, #c6c6cd);
+  border-inline-end: var(--awsui-style-tabs-separator-width-rhu47t, var(--border-divider-section-width-uwo8my, 1px)) solid var(--awsui-style-tabs-separator-color-rhu47t, var(--color-border-tabs-divider-f5t9va, #c6c6cd));
   inset: var(--space-scaled-s-8ozaad, 12px) 0;
   opacity: 1;
 }
-.awsui_tabs-tab_14rmt_1l8w6_216:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1l8w6_237.awsui_refresh_14rmt_1l8w6_253:before {
+.awsui_tabs-tab_14rmt_15h2w_216:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_15h2w_237.awsui_refresh_14rmt_15h2w_250:before {
   inset: calc(var(--space-static-s-t763lu, 12px) - var(--border-active-width-axzm24, 4px)) 0;
 }
 
-.awsui_tabs-tab-link_14rmt_1l8w6_299:not(#\9) {
+.awsui_tabs-tab-link_14rmt_15h2w_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-8ozaad, 12px) - 1px);
   padding-inline: 0;
   margin-block-start: 1px;
-  border-block: var(--border-divider-section-width-uwo8my, 1px) solid transparent;
-  border-inline: var(--border-divider-section-width-uwo8my, 1px) solid transparent;
+  border-block: var(--border-divider-section-width-uwo8my, 1px) solid var(--awsui-style-border-color-default-rhu47t, transparent);
+  border-inline: var(--border-divider-section-width-uwo8my, 1px) solid var(--awsui-style-border-color-default-rhu47t, transparent);
   font-size: var(--font-tabs-size-18irgl, 16px);
   line-height: var(--font-tabs-line-height-5g6n1v, 20px);
   font-weight: var(--font-wayfinding-link-active-weight-ny4hup, 700);
-  color: var(--color-text-interactive-default-ugh9wp, #424650);
+  color: var(--awsui-style-color-default-rhu47t, var(--color-text-interactive-default-ugh9wp, #424650));
+  background-color: var(--awsui-style-background-default-rhu47t, transparent);
   padding-inline-start: calc(var(--space-xxs-hwfkai, 4px) - 1px);
   padding-inline-end: var(--space-xxs-hwfkai, 4px);
   -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
 }
-.awsui_tabs-tab-link_14rmt_1l8w6_299.awsui_refresh_14rmt_1l8w6_253:not(#\9) {
+.awsui_tabs-tab-link_14rmt_15h2w_296.awsui_refresh_14rmt_15h2w_250:not(#\9) {
   padding-block-start: calc(var(--space-static-xs-gnm0mz, 8px) - 1px);
   padding-block-end: calc(var(--space-static-xs-gnm0mz, 8px) - 1px);
   margin-block-start: 0;
 }
-.awsui_tabs-tab-link_14rmt_1l8w6_299:not(#\9):hover {
-  color: var(--color-text-accent-n1kmht, #006ce0);
+.awsui_tabs-tab-link_14rmt_15h2w_296:not(#\9):hover {
+  color: var(--awsui-style-color-hover-rhu47t, var(--color-text-accent-n1kmht, #006ce0));
+  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_1l8w6_299:not(#\9):focus {
+.awsui_tabs-tab-link_14rmt_15h2w_296:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1l8w6_299:not(#\9):focus {
-  z-index: 1;
-  border-inline-end-color: transparent;
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_15h2w_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-uk47pl, #006ce0));
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1l8w6_299:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_15h2w_296:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-tabs-focus-outline-gutter-eerrg4, -8px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1l8w6_299:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_15h2w_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_1l8w6_299:not(#\9
   inset-block-start: calc(-1 * var(--space-tabs-focus-outline-gutter-eerrg4, -8px));
   inline-size: calc(100% + var(--space-tabs-focus-outline-gutter-eerrg4, -8px) + var(--space-tabs-focus-outline-gutter-eerrg4, -8px));
   block-size: calc(100% + var(--space-tabs-focus-outline-gutter-eerrg4, -8px) + var(--space-tabs-focus-outline-gutter-eerrg4, -8px));
-  border-start-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
-  border-start-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
-  border-end-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
-  border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
-  box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
+  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-rhu47t, var(--border-radius-control-default-focus-ring-1uabki, 4px));
+  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-rhu47t, var(--border-radius-control-default-focus-ring-1uabki, 4px));
+  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-rhu47t, var(--border-radius-control-default-focus-ring-1uabki, 4px));
+  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-rhu47t, var(--border-radius-control-default-focus-ring-1uabki, 4px));
+  box-shadow: var(--awsui-style-focus-ring-box-shadow-rhu47t);
+  z-index: 1;
 }
 
-.awsui_tabs-tab_14rmt_1l8w6_216:not(#\9):first-child {
+.awsui_tabs-tab_14rmt_15h2w_216:not(#\9):first-child {
   margin-inline-start: 1px;
   scroll-margin-inline-start: 1px;
 }
-.awsui_tabs-tab_14rmt_1l8w6_216:not(#\9):first-child > .awsui_tabs-tab-header-container_14rmt_1l8w6_237 {
+.awsui_tabs-tab_14rmt_15h2w_216:not(#\9):first-child > .awsui_tabs-tab-header-container_14rmt_15h2w_237 {
   padding-inline-start: calc(var(--space-xs-ymlm0b, 8px) - 1px);
 }
 
-.awsui_tabs-tab_14rmt_1l8w6_216:not(#\9):last-child {
+.awsui_tabs-tab_14rmt_15h2w_216:not(#\9):last-child {
   margin-inline-end: 1px;
   scroll-margin-inline-end: 1px;
 }
-.awsui_tabs-tab_14rmt_1l8w6_216:not(#\9):last-child > .awsui_tabs-tab-header-container_14rmt_1l8w6_237 {
+.awsui_tabs-tab_14rmt_15h2w_216:not(#\9):last-child > .awsui_tabs-tab-header-container_14rmt_15h2w_237 {
   padding-inline-end: calc(var(--space-xs-ymlm0b, 8px) - 1px);
 }
 
-.awsui_tabs-tab-disabled_14rmt_1l8w6_257:not(#\9), .awsui_tabs-tab-disabled_14rmt_1l8w6_257:not(#\9):hover {
+.awsui_tabs-tab-disabled_14rmt_15h2w_254:not(#\9), .awsui_tabs-tab-disabled_14rmt_15h2w_254:not(#\9):hover {
   cursor: default;
-  color: var(--color-text-interactive-disabled-1bqmrl, #b4b4bb);
+  color: var(--awsui-style-color-disabled-rhu47t, var(--color-text-interactive-disabled-1bqmrl, #b4b4bb));
+  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-e3lt4d, 700);
 }
 
-.awsui_tabs-tab-active_14rmt_1l8w6_377:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1l8w6_257) {
-  color: var(--color-text-accent-n1kmht, #006ce0);
+.awsui_tabs-tab-active_14rmt_15h2w_379:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_15h2w_254) {
+  color: var(--awsui-style-color-active-rhu47t, var(--color-text-accent-n1kmht, #006ce0));
+  border-color: var(--awsui-style-border-color-active-rhu47t, transparent);
+  background-color: var(--awsui-style-background-active-rhu47t, transparent);
 }
-.awsui_tabs-tab-active_14rmt_1l8w6_377:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1l8w6_257):after {
+.awsui_tabs-tab-active_14rmt_15h2w_379:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_15h2w_254):after {
   opacity: 1;
 }
 
-.awsui_tabs-header-with-divider_14rmt_1l8w6_384:not(#\9) {
+.awsui_tabs-header-with-divider_14rmt_15h2w_388:not(#\9) {
   border-block-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-tabs-divider-f5t9va, #c6c6cd);
 }
 
-.awsui_tabs-tab-focusable_14rmt_1l8w6_388:not(#\9) {
+.awsui_tabs-tab-focusable_14rmt_15h2w_392:not(#\9) {
   /* used to manage focusable logic */
 }
 
-.awsui_root_14rmt_1l8w6_392:not(#\9) {
+.awsui_root_14rmt_15h2w_396:not(#\9) {
   /* used in test-utils or tests */
 }
 
-.awsui_tabs_14rmt_1l8w6_154:not(#\9) {
+.awsui_tabs_14rmt_15h2w_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_1l8w6_299:not(#\9
   inline-size: 100%;
 }
 
-.awsui_tabs-content_14rmt_1l8w6_430:not(#\9) {
+.awsui_tabs-content_14rmt_15h2w_434:not(#\9) {
   display: none;
 }
 
-.awsui_fit-height_14rmt_1l8w6_434:not(#\9) {
+.awsui_fit-height_14rmt_15h2w_438:not(#\9) {
   display: flex;
   flex-direction: column;
   block-size: 100%;
 }
 
-.awsui_tabs-content-active_14rmt_1l8w6_440:not(#\9) {
+.awsui_tabs-content-active_14rmt_15h2w_444:not(#\9) {
   display: block;
   flex: 1;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_1l8w6_440:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_15h2w_444:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-start-start-radius: var(--border-radius-container-nsfwmm, 16px);
@@ -451,32 +455,32 @@ body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_1l8w6_440:n
   box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
 }
 
-.awsui_tabs-content-wrapper_14rmt_1l8w6_454.awsui_with-paddings_14rmt_1l8w6_454 > .awsui_tabs-content_14rmt_1l8w6_430:not(#\9) {
+.awsui_tabs-content-wrapper_14rmt_15h2w_458.awsui_with-paddings_14rmt_15h2w_458 > .awsui_tabs-content_14rmt_15h2w_434:not(#\9) {
   padding-block: var(--space-scaled-m-m892r9, 16px);
   padding-inline: 0;
 }
-.awsui_fit-height_14rmt_1l8w6_434 > .awsui_tabs-content-wrapper_14rmt_1l8w6_454:not(#\9) {
+.awsui_fit-height_14rmt_15h2w_438 > .awsui_tabs-content-wrapper_14rmt_15h2w_458:not(#\9) {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: auto;
 }
 
-.awsui_fit-height_14rmt_1l8w6_434 > .awsui_tabs-content-wrapper_14rmt_1l8w6_454 > .awsui_tabs-container-content-wrapper_14rmt_1l8w6_465:not(#\9) {
+.awsui_fit-height_14rmt_15h2w_438 > .awsui_tabs-content-wrapper_14rmt_15h2w_458 > .awsui_tabs-container-content-wrapper_14rmt_15h2w_469:not(#\9) {
   block-size: 100%;
   display: flex;
   flex-direction: column;
 }
-.awsui_tabs-container-content-wrapper_14rmt_1l8w6_465.awsui_with-paddings_14rmt_1l8w6_454 > .awsui_tabs-content_14rmt_1l8w6_430:not(#\9) {
+.awsui_tabs-container-content-wrapper_14rmt_15h2w_469.awsui_with-paddings_14rmt_15h2w_458 > .awsui_tabs-content_14rmt_15h2w_434:not(#\9) {
   padding-block-start: var(--space-tabs-content-top-ju6qox, 12px);
   padding-block-end: var(--space-scaled-l-sej05l, 20px);
   padding-inline: var(--space-container-horizontal-nqrzyh, 20px);
 }
 
-.awsui_disabled-reason-tooltip_14rmt_1l8w6_476:not(#\9) {
+.awsui_disabled-reason-tooltip_14rmt_15h2w_480:not(#\9) {
   /* used in test-utils or tests */
 }
 
-.awsui_tabs-tab-focused_14rmt_1l8w6_480:not(#\9) {
+.awsui_tabs-tab-focused_14rmt_15h2w_484:not(#\9) {
   /* used to manage focusable state for disabled with reason tabs */
 }