@cloudscape-design/components 3.0.901 → 3.0.902

package/tabs/interfaces.d.ts

@@ -23,8 +23,19 @@ export interface TabsProps extends BaseComponentProps {
      *    ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,
      *    if your application routing can handle such deep links. You can manually update routing on the current page
      *    using the `activeTabHref` property of the `change` event's detail.
+     * - `contentRenderStrategy` (string) - (Optional) Determines when tab content is rendered:
+         - `'active'`: (Default) Only render content when the tab is active.
+     *   - `'eager'`: Always render tab content (hidden when the tab is not active).
+     *   - `'lazy'`: Like 'eager', but content is only rendered after the tab is first activated.
      */
     tabs: ReadonlyArray<TabsProps.Tab>;
+    /**
+     * Actions for the tabs header, displayed next to the list of tabs.
+     * Use this to add a button or button dropdown that performs actions on the
+     * entire tab list. We recommend a maximum of one interactive element to
+     * minimize the number of keyboard tab stops between the tab list and content.
+     */
+    actions?: React.ReactNode;
     /**
      * The possible visual variants of tabs are the following:
      * * `default` - Use in any context.
@@ -69,6 +80,16 @@ export interface TabsProps extends BaseComponentProps {
      * If the tab content is too short, it will stretch. If the tab content is too long, a vertical scrollbar will be shown.
      */
     fitHeight?: boolean;
+    /**
+     * Determines how the active tab is switched when navigating using
+     * the keyboard. The options are:
+     * - 'automatic' (default): the active tab is switched using the arrow keys.
+     * - 'manual': a tab must be explicitly activated using the enter/space key.
+     * We recommend using 'automatic' in most situations to provide consistent
+     * and quick switching between tabs. Use 'manual' only if there is a specific
+     * need to introduce friction to the switching of tabs.
+     */
+    keyboardActivationMode?: 'automatic' | 'manual';
 }
 export declare namespace TabsProps {
     type Variant = 'default' | 'container' | 'stacked';
@@ -124,6 +145,13 @@ export declare namespace TabsProps {
          * using the `activeTabHref` property of the `change` event's detail.
          */
         href?: string;
+        /**
+         * Determines when tab content is rendered:
+         * - 'active' (default): Only render content when the tab is active.
+         * - 'eager': Always render tab content (hidden when the tab is not active).
+         * - 'lazy': Like 'eager', but content is only rendered after the tab is first activated.
+         */
+        contentRenderStrategy?: 'active' | 'eager' | 'lazy';
     }
     interface ChangeDetail {
         /**

package/tabs/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IAEnC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE7D;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AACD,yBAAiB,SAAS,CAAC;IACzB,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAE1D,UAAiB,GAAG;QAClB;;WAEG;QACH,EAAE,EAAE,MAAM,CAAC;QACX;;WAEG;QACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB;;WAEG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B;;;;WAIG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB;;WAEG;QACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QACnC;;;;;;WAMG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,YAAY;QAC3B;;WAEG;QACH,WAAW,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;IAED,UAAiB,WAAW;QAC1B;;WAEG;QACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B;;WAEG;QACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B;;;WAGG;QACH,kCAAkC,CAAC,EAAE,MAAM,CAAC;KAC7C;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IAEnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE7D;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;OAQG;IACH,sBAAsB,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;CACjD;AACD,yBAAiB,SAAS,CAAC;IACzB,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAE1D,UAAiB,GAAG;QAClB;;WAEG;QACH,EAAE,EAAE,MAAM,CAAC;QACX;;WAEG;QACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB;;WAEG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B;;;;WAIG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB;;WAEG;QACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QACnC;;;;;;WAMG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;;;;WAKG;QACH,qBAAqB,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;KACrD;IAED,UAAiB,YAAY;QAC3B;;WAEG;QACH,WAAW,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;IAED,UAAiB,WAAW;QAC1B;;WAEG;QACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B;;WAEG;QACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B;;;WAGG;QACH,kCAAkC,CAAC,EAAE,MAAM,CAAC;KAC7C;CACF"}

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   */\n  tabs: ReadonlyArray<TabsProps.Tab>;\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}\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\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 { 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"]}

package/tabs/styles.css.js

@@ -1,33 +1,35 @@
 
     import './styles.scoped.css';
     export default {
-  "tabs-header": "awsui_tabs-header_14rmt_1ebqu_290",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_1ebqu_298",
-  "pagination-button": "awsui_pagination-button_14rmt_1ebqu_316",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_1ebqu_323",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1ebqu_326",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_1ebqu_330",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1ebqu_333",
-  "tabs-tab": "awsui_tabs-tab_14rmt_1ebqu_338",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1ebqu_348",
-  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_1ebqu_359",
-  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_1ebqu_370",
-  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_1ebqu_370",
-  "refresh": "awsui_refresh_14rmt_1ebqu_375",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1ebqu_379",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1ebqu_421",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1ebqu_499",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1ebqu_506",
-  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_1ebqu_510",
-  "root": "awsui_root_14rmt_1ebqu_514",
-  "tabs": "awsui_tabs_14rmt_1ebqu_290",
-  "tabs-content": "awsui_tabs-content_14rmt_1ebqu_552",
-  "fit-height": "awsui_fit-height_14rmt_1ebqu_556",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_1ebqu_562",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1ebqu_576",
-  "with-paddings": "awsui_with-paddings_14rmt_1ebqu_576",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1ebqu_587",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_1ebqu_598",
-  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_1ebqu_602"
+  "tabs-header": "awsui_tabs-header_14rmt_11l2w_290",
+  "tab-header-scroll-container": "awsui_tab-header-scroll-container_14rmt_11l2w_299",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_11l2w_305",
+  "pagination-button": "awsui_pagination-button_14rmt_11l2w_323",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_11l2w_330",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_11l2w_333",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_11l2w_337",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_11l2w_340",
+  "actions-container": "awsui_actions-container_14rmt_11l2w_345",
+  "tabs-tab": "awsui_tabs-tab_14rmt_11l2w_353",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_11l2w_363",
+  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_11l2w_374",
+  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_11l2w_385",
+  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_11l2w_385",
+  "refresh": "awsui_refresh_14rmt_11l2w_390",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_11l2w_394",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_11l2w_436",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_11l2w_514",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_11l2w_521",
+  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_11l2w_525",
+  "root": "awsui_root_14rmt_11l2w_529",
+  "tabs": "awsui_tabs_14rmt_11l2w_290",
+  "tabs-content": "awsui_tabs-content_14rmt_11l2w_567",
+  "fit-height": "awsui_fit-height_14rmt_11l2w_571",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_11l2w_577",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_11l2w_591",
+  "with-paddings": "awsui_with-paddings_14rmt_11l2w_591",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_11l2w_602",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_11l2w_613",
+  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_11l2w_617"
 };
   

package/tabs/styles.scoped.css

@@ -287,15 +287,22 @@ 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_1ebqu_290:not(#\9) {
+.awsui_tabs-header_14rmt_11l2w_290:not(#\9) {
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
   padding-inline: 0;
   display: flex;
+  flex-wrap: wrap;
 }
 
-.awsui_tabs-header-list_14rmt_1ebqu_298:not(#\9) {
+.awsui_tab-header-scroll-container_14rmt_11l2w_299:not(#\9) {
+  display: flex;
+  flex-grow: 1;
+  max-inline-size: 100%;
+}
+
+.awsui_tabs-header-list_14rmt_11l2w_305:not(#\9) {
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
@@ -309,33 +316,41 @@ 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_1ebqu_298:not(#\9)::-webkit-scrollbar {
+.awsui_tabs-header-list_14rmt_11l2w_305:not(#\9)::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
 
-.awsui_pagination-button_14rmt_1ebqu_316:not(#\9) {
+.awsui_pagination-button_14rmt_11l2w_323:not(#\9) {
   margin-block: var(--space-scaled-s-aqzyko, 12px);
   margin-inline: 0;
   padding-block: 0;
   padding-inline: var(--space-xxs-p8yyaw, 4px);
   display: flex;
 }
-.awsui_pagination-button-left_14rmt_1ebqu_323:not(#\9) {
+.awsui_pagination-button-left_14rmt_11l2w_330:not(#\9) {
   border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-control-disabled-qc5csz, #dedee3);
 }
-.awsui_pagination-button-left-scrollable_14rmt_1ebqu_326:not(#\9) {
+.awsui_pagination-button-left-scrollable_14rmt_11l2w_333:not(#\9) {
   z-index: 1;
   box-shadow: 5px 0px 4px -3px var(--color-border-tabs-shadow-enjrr2, rgba(15, 20, 26, 0.12)), 1px 0px 0px 0px var(--color-border-tabs-shadow-enjrr2, rgba(15, 20, 26, 0.12));
 }
-.awsui_pagination-button-right_14rmt_1ebqu_330:not(#\9) {
+.awsui_pagination-button-right_14rmt_11l2w_337:not(#\9) {
   border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-control-disabled-qc5csz, #dedee3);
 }
-.awsui_pagination-button-right-scrollable_14rmt_1ebqu_333:not(#\9) {
+.awsui_pagination-button-right-scrollable_14rmt_11l2w_340:not(#\9) {
   z-index: 1;
   box-shadow: -5px 0px 4px -3px var(--color-border-tabs-shadow-enjrr2, rgba(15, 20, 26, 0.12)), -1px 0px 0px 0 var(--color-border-tabs-shadow-enjrr2, rgba(15, 20, 26, 0.12));
 }
 
-.awsui_tabs-tab_14rmt_1ebqu_338:not(#\9) {
+.awsui_actions-container_14rmt_11l2w_345:not(#\9) {
+  flex-shrink: 0;
+  align-self: center;
+  padding-block: var(--space-xs-zb16t3, 8px);
+  padding-inline: var(--space-xs-zb16t3, 8px);
+  margin-inline-start: auto;
+}
+
+.awsui_tabs-tab_14rmt_11l2w_353:not(#\9) {
   list-style: none;
   padding-block: 0;
   padding-inline: 0;
@@ -345,7 +360,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   scroll-snap-align: start;
 }
 
-.awsui_tabs-tab-label_14rmt_1ebqu_348:not(#\9) {
+.awsui_tabs-tab-label_14rmt_11l2w_363:not(#\9) {
   display: flex;
   align-items: center;
   padding-inline: var(--space-xs-zb16t3, 8px);
@@ -356,7 +371,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-break: break-word;
 }
 
-.awsui_tabs-tab-header-container_14rmt_1ebqu_359:not(#\9) {
+.awsui_tabs-tab-header-container_14rmt_11l2w_374:not(#\9) {
   position: relative;
   border-block: var(--border-divider-section-width-1061zr, 1px) solid transparent;
   border-inline: var(--border-divider-section-width-1061zr, 1px) solid transparent;
@@ -364,19 +379,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
   align-items: stretch;
 }
-.awsui_tabs-tab-header-container_14rmt_1ebqu_359:not(#\9), .awsui_tabs-tab-header-container_14rmt_1ebqu_359 > button:not(#\9) {
+.awsui_tabs-tab-header-container_14rmt_11l2w_374:not(#\9), .awsui_tabs-tab-header-container_14rmt_11l2w_374 > button:not(#\9) {
   background-color: transparent;
 }
-.awsui_tabs-tab-header-container_14rmt_1ebqu_359 > .awsui_tabs-tab-dismiss_14rmt_1ebqu_370:not(#\9), .awsui_tabs-tab-header-container_14rmt_1ebqu_359 > .awsui_tabs-tab-action_14rmt_1ebqu_370:not(#\9) {
+.awsui_tabs-tab-header-container_14rmt_11l2w_374 > .awsui_tabs-tab-dismiss_14rmt_11l2w_385:not(#\9), .awsui_tabs-tab-header-container_14rmt_11l2w_374 > .awsui_tabs-tab-action_14rmt_11l2w_385:not(#\9) {
   position: relative;
   display: flex;
   align-items: center;
 }
-.awsui_tabs-tab-header-container_14rmt_1ebqu_359.awsui_refresh_14rmt_1ebqu_375 > span:not(#\9):first-of-type {
+.awsui_tabs-tab-header-container_14rmt_11l2w_374.awsui_refresh_14rmt_11l2w_390 > span:not(#\9):first-of-type {
   margin-inline-start: calc(-1 * var(--space-scaled-xs-26e2du, 8px));
 }
 
-.awsui_tabs-tab-header-container_14rmt_1ebqu_359:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1ebqu_379):after {
+.awsui_tabs-tab-header-container_14rmt_11l2w_374:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_11l2w_394):after {
   content: "";
   position: absolute;
   inset-inline-start: 0;
@@ -390,35 +405,35 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background: var(--color-border-tabs-underline-a5fmhd, #006ce0);
   opacity: 0;
 }
-.awsui_tabs-tab-header-container_14rmt_1ebqu_359:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1ebqu_379).awsui_refresh_14rmt_1ebqu_375:after {
+.awsui_tabs-tab-header-container_14rmt_11l2w_374:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_11l2w_394).awsui_refresh_14rmt_11l2w_390:after {
   transition: opacity var(--motion-duration-refresh-only-medium-nf6485, 165ms) var(--motion-easing-refresh-only-c-vg1m9h, cubic-bezier(0.84, 0, 0.16, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_tabs-tab-header-container_14rmt_1ebqu_359:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1ebqu_379).awsui_refresh_14rmt_1ebqu_375:after {
+  .awsui_tabs-tab-header-container_14rmt_11l2w_374:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_11l2w_394).awsui_refresh_14rmt_11l2w_390:after {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_tabs-tab-header-container_14rmt_1ebqu_359:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1ebqu_379).awsui_refresh_14rmt_1ebqu_375:after, .awsui-mode-entering .awsui_tabs-tab-header-container_14rmt_1ebqu_359:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1ebqu_379).awsui_refresh_14rmt_1ebqu_375:after {
+.awsui-motion-disabled .awsui_tabs-tab-header-container_14rmt_11l2w_374:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_11l2w_394).awsui_refresh_14rmt_11l2w_390:after, .awsui-mode-entering .awsui_tabs-tab-header-container_14rmt_11l2w_374:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_11l2w_394).awsui_refresh_14rmt_11l2w_390:after {
   animation: none;
   transition: none;
 }
 
-.awsui_tabs-tab_14rmt_1ebqu_338:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1ebqu_359 {
+.awsui_tabs-tab_14rmt_11l2w_353:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_11l2w_374 {
   margin-inline-end: calc(-1 * var(--border-divider-section-width-1061zr, 1px));
 }
-.awsui_tabs-tab_14rmt_1ebqu_338:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1ebqu_359:before {
+.awsui_tabs-tab_14rmt_11l2w_353:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_11l2w_374:before {
   content: "";
   position: absolute;
   border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-tabs-divider-djfdfj, #c6c6cd);
   inset: var(--space-scaled-s-aqzyko, 12px) 0;
   opacity: 1;
 }
-.awsui_tabs-tab_14rmt_1ebqu_338:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1ebqu_359.awsui_refresh_14rmt_1ebqu_375:before {
+.awsui_tabs-tab_14rmt_11l2w_353:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_11l2w_374.awsui_refresh_14rmt_11l2w_390:before {
   inset: calc(var(--space-static-s-n2eb28, 12px) - var(--border-active-width-9dmqf4, 4px)) 0;
 }
 
-.awsui_tabs-tab-link_14rmt_1ebqu_421:not(#\9) {
+.awsui_tabs-tab-link_14rmt_11l2w_436:not(#\9) {
   position: relative;
   display: flex;
   align-items: stretch;
@@ -439,27 +454,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_tabs-tab-link_14rmt_1ebqu_421.awsui_refresh_14rmt_1ebqu_375:not(#\9) {
+.awsui_tabs-tab-link_14rmt_11l2w_436.awsui_refresh_14rmt_11l2w_390:not(#\9) {
   padding-block-start: calc(var(--space-static-xs-7sfb63, 8px) - 1px);
   padding-block-end: calc(var(--space-static-xs-7sfb63, 8px) - 1px);
   margin-block-start: 0;
 }
-.awsui_tabs-tab-link_14rmt_1ebqu_421:not(#\9):hover {
+.awsui_tabs-tab-link_14rmt_11l2w_436:not(#\9):hover {
   color: var(--color-text-accent-fptgkc, #006ce0);
 }
-.awsui_tabs-tab-link_14rmt_1ebqu_421:not(#\9):focus {
+.awsui_tabs-tab-link_14rmt_11l2w_436:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1ebqu_421:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_11l2w_436:not(#\9):focus {
   z-index: 1;
   border-inline-end-color: transparent;
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1ebqu_421:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_11l2w_436:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-tabs-focus-outline-gutter-xm37ly, -8px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1ebqu_421:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_11l2w_436:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -474,48 +489,48 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1ebqu_421:not(#\9
   box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
 }
 
-.awsui_tabs-tab_14rmt_1ebqu_338:not(#\9):first-child {
+.awsui_tabs-tab_14rmt_11l2w_353:not(#\9):first-child {
   margin-inline-start: 1px;
   scroll-margin-inline-start: 1px;
 }
-.awsui_tabs-tab_14rmt_1ebqu_338:not(#\9):first-child > .awsui_tabs-tab-header-container_14rmt_1ebqu_359 {
+.awsui_tabs-tab_14rmt_11l2w_353:not(#\9):first-child > .awsui_tabs-tab-header-container_14rmt_11l2w_374 {
   padding-inline-start: calc(var(--space-xs-zb16t3, 8px) - 1px);
 }
 
-.awsui_tabs-tab_14rmt_1ebqu_338:not(#\9):last-child {
+.awsui_tabs-tab_14rmt_11l2w_353:not(#\9):last-child {
   margin-inline-end: 1px;
   scroll-margin-inline-end: 1px;
 }
-.awsui_tabs-tab_14rmt_1ebqu_338:not(#\9):last-child > .awsui_tabs-tab-header-container_14rmt_1ebqu_359 {
+.awsui_tabs-tab_14rmt_11l2w_353:not(#\9):last-child > .awsui_tabs-tab-header-container_14rmt_11l2w_374 {
   padding-inline-end: calc(var(--space-xs-zb16t3, 8px) - 1px);
 }
 
-.awsui_tabs-tab-disabled_14rmt_1ebqu_379:not(#\9), .awsui_tabs-tab-disabled_14rmt_1ebqu_379:not(#\9):hover {
+.awsui_tabs-tab-disabled_14rmt_11l2w_394:not(#\9), .awsui_tabs-tab-disabled_14rmt_11l2w_394:not(#\9):hover {
   cursor: default;
   color: var(--color-text-interactive-disabled-f5b4z5, #b4b4bb);
   font-weight: var(--font-tabs-disabled-weight-1xcs5l, 700);
 }
 
-.awsui_tabs-tab-active_14rmt_1ebqu_499:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1ebqu_379) {
+.awsui_tabs-tab-active_14rmt_11l2w_514:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_11l2w_394) {
   color: var(--color-text-accent-fptgkc, #006ce0);
 }
-.awsui_tabs-tab-active_14rmt_1ebqu_499:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1ebqu_379):after {
+.awsui_tabs-tab-active_14rmt_11l2w_514:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_11l2w_394):after {
   opacity: 1;
 }
 
-.awsui_tabs-header-with-divider_14rmt_1ebqu_506:not(#\9) {
+.awsui_tabs-header-with-divider_14rmt_11l2w_521:not(#\9) {
   border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-tabs-divider-djfdfj, #c6c6cd);
 }
 
-.awsui_tabs-tab-focusable_14rmt_1ebqu_510:not(#\9) {
+.awsui_tabs-tab-focusable_14rmt_11l2w_525:not(#\9) {
   /* used to manage focusable logic */
 }
 
-.awsui_root_14rmt_1ebqu_514:not(#\9) {
+.awsui_root_14rmt_11l2w_529:not(#\9) {
   /* used in test-utils or tests */
 }
 
-.awsui_tabs_14rmt_1ebqu_290:not(#\9) {
+.awsui_tabs_14rmt_11l2w_290:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -550,21 +565,21 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1ebqu_421:not(#\9
   inline-size: 100%;
 }
 
-.awsui_tabs-content_14rmt_1ebqu_552:not(#\9) {
+.awsui_tabs-content_14rmt_11l2w_567:not(#\9) {
   display: none;
 }
 
-.awsui_fit-height_14rmt_1ebqu_556:not(#\9) {
+.awsui_fit-height_14rmt_11l2w_571:not(#\9) {
   display: flex;
   flex-direction: column;
   block-size: 100%;
 }
 
-.awsui_tabs-content-active_14rmt_1ebqu_562:not(#\9) {
+.awsui_tabs-content-active_14rmt_11l2w_577:not(#\9) {
   display: block;
   flex: 1;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_1ebqu_562:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_11l2w_577:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
@@ -574,32 +589,32 @@ body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_1ebqu_562:n
   box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
 }
 
-.awsui_tabs-content-wrapper_14rmt_1ebqu_576.awsui_with-paddings_14rmt_1ebqu_576 > .awsui_tabs-content_14rmt_1ebqu_552:not(#\9) {
+.awsui_tabs-content-wrapper_14rmt_11l2w_591.awsui_with-paddings_14rmt_11l2w_591 > .awsui_tabs-content_14rmt_11l2w_567:not(#\9) {
   padding-block: var(--space-scaled-m-mo5yse, 16px);
   padding-inline: 0;
 }
-.awsui_fit-height_14rmt_1ebqu_556 > .awsui_tabs-content-wrapper_14rmt_1ebqu_576:not(#\9) {
+.awsui_fit-height_14rmt_11l2w_571 > .awsui_tabs-content-wrapper_14rmt_11l2w_591:not(#\9) {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: auto;
 }
 
-.awsui_fit-height_14rmt_1ebqu_556 > .awsui_tabs-content-wrapper_14rmt_1ebqu_576 > .awsui_tabs-container-content-wrapper_14rmt_1ebqu_587:not(#\9) {
+.awsui_fit-height_14rmt_11l2w_571 > .awsui_tabs-content-wrapper_14rmt_11l2w_591 > .awsui_tabs-container-content-wrapper_14rmt_11l2w_602:not(#\9) {
   block-size: 100%;
   display: flex;
   flex-direction: column;
 }
-.awsui_tabs-container-content-wrapper_14rmt_1ebqu_587.awsui_with-paddings_14rmt_1ebqu_576 > .awsui_tabs-content_14rmt_1ebqu_552:not(#\9) {
+.awsui_tabs-container-content-wrapper_14rmt_11l2w_602.awsui_with-paddings_14rmt_11l2w_591 > .awsui_tabs-content_14rmt_11l2w_567:not(#\9) {
   padding-block-start: var(--space-tabs-content-top-dedu0k, 12px);
   padding-block-end: var(--space-scaled-l-0hpmd7, 20px);
   padding-inline: var(--space-container-horizontal-wfukh3, 20px);
 }
 
-.awsui_disabled-reason-tooltip_14rmt_1ebqu_598:not(#\9) {
+.awsui_disabled-reason-tooltip_14rmt_11l2w_613:not(#\9) {
   /* used in test-utils or tests */
 }
 
-.awsui_tabs-tab-focused_14rmt_1ebqu_602:not(#\9) {
+.awsui_tabs-tab-focused_14rmt_11l2w_617:not(#\9) {
   /* used to manage focusable state for disabled with reason tabs */
 }

package/tabs/styles.selectors.js

@@ -2,33 +2,35 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "tabs-header": "awsui_tabs-header_14rmt_1ebqu_290",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_1ebqu_298",
-  "pagination-button": "awsui_pagination-button_14rmt_1ebqu_316",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_1ebqu_323",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1ebqu_326",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_1ebqu_330",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1ebqu_333",
-  "tabs-tab": "awsui_tabs-tab_14rmt_1ebqu_338",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1ebqu_348",
-  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_1ebqu_359",
-  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_1ebqu_370",
-  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_1ebqu_370",
-  "refresh": "awsui_refresh_14rmt_1ebqu_375",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1ebqu_379",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1ebqu_421",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1ebqu_499",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1ebqu_506",
-  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_1ebqu_510",
-  "root": "awsui_root_14rmt_1ebqu_514",
-  "tabs": "awsui_tabs_14rmt_1ebqu_290",
-  "tabs-content": "awsui_tabs-content_14rmt_1ebqu_552",
-  "fit-height": "awsui_fit-height_14rmt_1ebqu_556",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_1ebqu_562",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1ebqu_576",
-  "with-paddings": "awsui_with-paddings_14rmt_1ebqu_576",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1ebqu_587",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_1ebqu_598",
-  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_1ebqu_602"
+  "tabs-header": "awsui_tabs-header_14rmt_11l2w_290",
+  "tab-header-scroll-container": "awsui_tab-header-scroll-container_14rmt_11l2w_299",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_11l2w_305",
+  "pagination-button": "awsui_pagination-button_14rmt_11l2w_323",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_11l2w_330",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_11l2w_333",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_11l2w_337",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_11l2w_340",
+  "actions-container": "awsui_actions-container_14rmt_11l2w_345",
+  "tabs-tab": "awsui_tabs-tab_14rmt_11l2w_353",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_11l2w_363",
+  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_11l2w_374",
+  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_11l2w_385",
+  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_11l2w_385",
+  "refresh": "awsui_refresh_14rmt_11l2w_390",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_11l2w_394",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_11l2w_436",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_11l2w_514",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_11l2w_521",
+  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_11l2w_525",
+  "root": "awsui_root_14rmt_11l2w_529",
+  "tabs": "awsui_tabs_14rmt_11l2w_290",
+  "tabs-content": "awsui_tabs-content_14rmt_11l2w_567",
+  "fit-height": "awsui_fit-height_14rmt_11l2w_571",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_11l2w_577",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_11l2w_591",
+  "with-paddings": "awsui_with-paddings_14rmt_11l2w_591",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_11l2w_602",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_11l2w_613",
+  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_11l2w_617"
 };
   

package/tabs/tab-header-bar.d.ts

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

package/tabs/tab-header-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-header-bar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.tsx"],"names":[],"mappings":";AA8BA,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;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;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":";AA8BA,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,eAqanB;AA6ED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,UAEzF"}