@cloudscape-design/components 3.0.555 → 3.0.556

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (93756938)";
+export var PACKAGE_VERSION = "3.0.0 (611b1356)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (93756938)",
+  "PACKAGE_VERSION": "3.0.0 (611b1356)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "937569380586b8dc04db99fcab1a59ee4b7c37aa"
+  "commit": "611b1356f7f4c9d6f495b9956faa864c601cc26d"
 }

package/package.json

@@ -116,7 +116,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.555",
+  "version": "3.0.556",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"

package/tabs/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { TabsProps } from './interfaces';
 export { TabsProps };
-export default function Tabs({ tabs, variant, onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings, i18nStrings, ...rest }: TabsProps): JSX.Element;
+export default function Tabs({ tabs, variant, onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings, i18nStrings, fitHeight, ...rest }: TabsProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["tabs/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAUrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,OAAmB,EACnB,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,cAAc,EACd,sBAA8B,EAC9B,WAAW,EACX,GAAG,IAAI,EACR,EAAE,SAAS,eA4FX"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["tabs/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAUrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,OAAmB,EACnB,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,cAAc,EACd,sBAA8B,EAC9B,WAAW,EACX,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,eAiGX"}

package/tabs/index.js

@@ -22,7 +22,7 @@ function firstEnabledTab(tabs) {
 }
 export default function Tabs(_a) {
     var _b, _c;
-    var { tabs, variant = 'default', onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings = false, i18nStrings } = _a, rest = __rest(_a, ["tabs", "variant", "onChange", "activeTabId", "ariaLabel", "ariaLabelledby", "disableContentPaddings", "i18nStrings"]);
+    var { tabs, variant = 'default', onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings = false, i18nStrings, fitHeight } = _a, rest = __rest(_a, ["tabs", "variant", "onChange", "activeTabId", "ariaLabel", "ariaLabelledby", "disableContentPaddings", "i18nStrings", "fitHeight"]);
     for (const tab of tabs) {
         checkSafeUrl('Tabs', tab.href);
     }
@@ -64,9 +64,9 @@ export default function Tabs(_a) {
             fireNonCancelableEvent(onChange, changeDetail);
         }, i18nStrings: i18nStrings }));
     if (variant === 'container' || variant === 'stacked') {
-        return (React.createElement(InternalContainer, Object.assign({ header: header, disableHeaderPaddings: true }, baseProps, { className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef, disableContentPaddings: true, variant: variant === 'stacked' ? 'stacked' : 'default' }), content()));
+        return (React.createElement(InternalContainer, Object.assign({ header: header, disableHeaderPaddings: true }, baseProps, { className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef, disableContentPaddings: true, variant: variant === 'stacked' ? 'stacked' : 'default', fitHeight: fitHeight }), content()));
     }
-    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root, styles.tabs), ref: __internalRootRef }),
+    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root, styles.tabs, { [styles['fit-height']]: fitHeight }), ref: __internalRootRef }),
         header,
         content()));
 }

package/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["tabs/index.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 React from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport InternalContainer from '../container/internal';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { getTabElementId, TabHeaderBar } from './tab-header-bar';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\n\nexport { TabsProps };\n\nfunction firstEnabledTab(tabs: ReadonlyArray<TabsProps.Tab>) {\n  const enabledTabs = tabs.filter(tab => !tab.disabled);\n  if (enabledTabs.length > 0) {\n    return enabledTabs[0];\n  }\n  return null;\n}\n\nexport default function Tabs({\n  tabs,\n  variant = 'default',\n  onChange,\n  activeTabId: controlledTabId,\n  ariaLabel,\n  ariaLabelledby,\n  disableContentPaddings = false,\n  i18nStrings,\n  ...rest\n}: TabsProps) {\n  for (const tab of tabs) {\n    checkSafeUrl('Tabs', tab.href);\n  }\n  const { __internalRootRef } = useBaseComponent('Tabs');\n  const idNamespace = useUniqueId('awsui-tabs-');\n\n  const [activeTabId, setActiveTabId] = useControllable(controlledTabId, onChange, firstEnabledTab(tabs)?.id ?? '', {\n    componentName: 'Tabs',\n    controlledProp: 'activeTabId',\n    changeHandler: 'onChange',\n  });\n\n  const baseProps = getBaseProps(rest);\n\n  const content = () => {\n    const selectedTab = tabs.filter(tab => tab.id === activeTabId)[0];\n    const renderContent = (tab: TabsProps.Tab) => {\n      const isTabSelected = tab === selectedTab;\n\n      const classes = clsx({\n        [styles['tabs-content']]: true,\n        [styles['tabs-content-active']]: isTabSelected,\n      });\n\n      const contentAttributes: JSX.IntrinsicElements['div'] = {\n        className: classes,\n        role: 'tabpanel',\n        id: `${idNamespace}-${tab.id}-panel`,\n        key: `${idNamespace}-${tab.id}-panel`,\n        tabIndex: 0,\n        'aria-labelledby': getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n      };\n\n      const isContentShown = isTabSelected && !selectedTab.disabled;\n      return <div {...contentAttributes}>{isContentShown && selectedTab.content}</div>;\n    };\n\n    return (\n      <div\n        className={clsx(\n          variant === 'container' || variant === 'stacked'\n            ? styles['tabs-container-content-wrapper']\n            : styles['tabs-content-wrapper'],\n          {\n            [styles['with-paddings']]: !disableContentPaddings,\n          }\n        )}\n      >\n        {tabs.map(renderContent)}\n      </div>\n    );\n  };\n\n  const header = (\n    <TabHeaderBar\n      activeTabId={activeTabId}\n      variant={variant}\n      idNamespace={idNamespace}\n      ariaLabel={ariaLabel}\n      ariaLabelledby={ariaLabelledby}\n      tabs={tabs}\n      onChange={changeDetail => {\n        setActiveTabId(changeDetail.activeTabId);\n        fireNonCancelableEvent(onChange, changeDetail);\n      }}\n      i18nStrings={i18nStrings}\n    />\n  );\n\n  if (variant === 'container' || variant === 'stacked') {\n    return (\n      <InternalContainer\n        header={header}\n        disableHeaderPaddings={true}\n        {...baseProps}\n        className={clsx(baseProps.className, styles.root)}\n        __internalRootRef={__internalRootRef}\n        disableContentPaddings={true}\n        variant={variant === 'stacked' ? 'stacked' : 'default'}\n      >\n        {content()}\n      </InternalContainer>\n    );\n  }\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root, styles.tabs)} ref={__internalRootRef}>\n      {header}\n      {content()}\n    </div>\n  );\n}\n\napplyDisplayName(Tabs, 'Tabs');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["tabs/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AAEtD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAI9D,SAAS,eAAe,CAAC,IAAkC;IACzD,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACtD,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;QAC1B,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC;KACvB;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAWjB;;QAXiB,EAC3B,IAAI,EACJ,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,cAAc,EACd,sBAAsB,GAAG,KAAK,EAC9B,WAAW,EACX,SAAS,OAEC,EADP,IAAI,cAVoB,mIAW5B,CADQ;IAEP,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE;QACtB,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;KAChC;IACD,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACvD,MAAM,WAAW,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IAE/C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,eAAe,CAAC,eAAe,EAAE,QAAQ,EAAE,MAAA,MAAA,eAAe,CAAC,IAAI,CAAC,0CAAE,EAAE,mCAAI,EAAE,EAAE;QAChH,aAAa,EAAE,MAAM;QACrB,cAAc,EAAE,aAAa;QAC7B,aAAa,EAAE,UAAU;KAC1B,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;QAClE,MAAM,aAAa,GAAG,CAAC,GAAkB,EAAE,EAAE;YAC3C,MAAM,aAAa,GAAG,GAAG,KAAK,WAAW,CAAC;YAE1C,MAAM,OAAO,GAAG,IAAI,CAAC;gBACnB,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,IAAI;gBAC9B,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,aAAa;aAC/C,CAAC,CAAC;YAEH,MAAM,iBAAiB,GAAiC;gBACtD,SAAS,EAAE,OAAO;gBAClB,IAAI,EAAE,UAAU;gBAChB,EAAE,EAAE,GAAG,WAAW,IAAI,GAAG,CAAC,EAAE,QAAQ;gBACpC,GAAG,EAAE,GAAG,WAAW,IAAI,GAAG,CAAC,EAAE,QAAQ;gBACrC,QAAQ,EAAE,CAAC;gBACX,iBAAiB,EAAE,eAAe,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC;aAC9E,CAAC;YAEF,MAAM,cAAc,GAAG,aAAa,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;YAC9D,OAAO,6CAAS,iBAAiB,GAAG,cAAc,IAAI,WAAW,CAAC,OAAO,CAAO,CAAC;QACnF,CAAC,CAAC;QAEF,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,OAAO,KAAK,WAAW,IAAI,OAAO,KAAK,SAAS;gBAC9C,CAAC,CAAC,MAAM,CAAC,gCAAgC,CAAC;gBAC1C,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,EAClC;gBACE,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,sBAAsB;aACnD,CACF,IAEA,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,CACpB,CACP,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,CACb,oBAAC,YAAY,IACX,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,YAAY,CAAC,EAAE;YACvB,cAAc,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;YACzC,sBAAsB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACjD,CAAC,EACD,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;IAEF,IAAI,OAAO,KAAK,WAAW,IAAI,OAAO,KAAK,SAAS,EAAE;QACpD,OAAO,CACL,oBAAC,iBAAiB,kBAChB,MAAM,EAAE,MAAM,EACd,qBAAqB,EAAE,IAAI,IACvB,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EACjD,iBAAiB,EAAE,iBAAiB,EACpC,sBAAsB,EAAE,IAAI,EAC5B,OAAO,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACtD,SAAS,EAAE,SAAS,KAEnB,OAAO,EAAE,CACQ,CACrB,CAAC;KACH;IAED,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EACrG,GAAG,EAAE,iBAAiB;QAErB,MAAM;QACN,OAAO,EAAE,CACN,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport InternalContainer from '../container/internal';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { getTabElementId, TabHeaderBar } from './tab-header-bar';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\n\nexport { TabsProps };\n\nfunction firstEnabledTab(tabs: ReadonlyArray<TabsProps.Tab>) {\n  const enabledTabs = tabs.filter(tab => !tab.disabled);\n  if (enabledTabs.length > 0) {\n    return enabledTabs[0];\n  }\n  return null;\n}\n\nexport default function Tabs({\n  tabs,\n  variant = 'default',\n  onChange,\n  activeTabId: controlledTabId,\n  ariaLabel,\n  ariaLabelledby,\n  disableContentPaddings = false,\n  i18nStrings,\n  fitHeight,\n  ...rest\n}: TabsProps) {\n  for (const tab of tabs) {\n    checkSafeUrl('Tabs', tab.href);\n  }\n  const { __internalRootRef } = useBaseComponent('Tabs');\n  const idNamespace = useUniqueId('awsui-tabs-');\n\n  const [activeTabId, setActiveTabId] = useControllable(controlledTabId, onChange, firstEnabledTab(tabs)?.id ?? '', {\n    componentName: 'Tabs',\n    controlledProp: 'activeTabId',\n    changeHandler: 'onChange',\n  });\n\n  const baseProps = getBaseProps(rest);\n\n  const content = () => {\n    const selectedTab = tabs.filter(tab => tab.id === activeTabId)[0];\n    const renderContent = (tab: TabsProps.Tab) => {\n      const isTabSelected = tab === selectedTab;\n\n      const classes = clsx({\n        [styles['tabs-content']]: true,\n        [styles['tabs-content-active']]: isTabSelected,\n      });\n\n      const contentAttributes: JSX.IntrinsicElements['div'] = {\n        className: classes,\n        role: 'tabpanel',\n        id: `${idNamespace}-${tab.id}-panel`,\n        key: `${idNamespace}-${tab.id}-panel`,\n        tabIndex: 0,\n        'aria-labelledby': getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n      };\n\n      const isContentShown = isTabSelected && !selectedTab.disabled;\n      return <div {...contentAttributes}>{isContentShown && selectedTab.content}</div>;\n    };\n\n    return (\n      <div\n        className={clsx(\n          variant === 'container' || variant === 'stacked'\n            ? styles['tabs-container-content-wrapper']\n            : styles['tabs-content-wrapper'],\n          {\n            [styles['with-paddings']]: !disableContentPaddings,\n          }\n        )}\n      >\n        {tabs.map(renderContent)}\n      </div>\n    );\n  };\n\n  const header = (\n    <TabHeaderBar\n      activeTabId={activeTabId}\n      variant={variant}\n      idNamespace={idNamespace}\n      ariaLabel={ariaLabel}\n      ariaLabelledby={ariaLabelledby}\n      tabs={tabs}\n      onChange={changeDetail => {\n        setActiveTabId(changeDetail.activeTabId);\n        fireNonCancelableEvent(onChange, changeDetail);\n      }}\n      i18nStrings={i18nStrings}\n    />\n  );\n\n  if (variant === 'container' || variant === 'stacked') {\n    return (\n      <InternalContainer\n        header={header}\n        disableHeaderPaddings={true}\n        {...baseProps}\n        className={clsx(baseProps.className, styles.root)}\n        __internalRootRef={__internalRootRef}\n        disableContentPaddings={true}\n        variant={variant === 'stacked' ? 'stacked' : 'default'}\n        fitHeight={fitHeight}\n      >\n        {content()}\n      </InternalContainer>\n    );\n  }\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, styles.tabs, { [styles['fit-height']]: fitHeight })}\n      ref={__internalRootRef}\n    >\n      {header}\n      {content()}\n    </div>\n  );\n}\n\napplyDisplayName(Tabs, 'Tabs');\n"]}

package/tabs/interfaces.d.ts

@@ -55,6 +55,11 @@ export interface TabsProps extends BaseComponentProps {
      * @i18n
      */
     i18nStrings?: TabsProps.I18nStrings;
+    /**
+     * Enabling this property makes the tab content fit to the available height.
+     * 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;
 }
 export declare namespace TabsProps {
     type Variant = 'default' | 'container' | 'stacked';

package/tabs/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["tabs/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;OAYG;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;CACrC;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;;;;;;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;KAC/B;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["tabs/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;OAYG;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;;;;;;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;KAC/B;CACF"}

package/tabs/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["tabs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\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   * - `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}\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     * 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}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["tabs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\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   * - `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     * 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}\n"]}

package/tabs/styles.css.js

@@ -1,26 +1,27 @@
 
     import './styles.scoped.css';
     export default {
-  "tabs-header": "awsui_tabs-header_14rmt_13jmh_198",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_13jmh_206",
-  "pagination-button": "awsui_pagination-button_14rmt_13jmh_223",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_13jmh_230",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_13jmh_233",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_13jmh_237",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_13jmh_240",
-  "tabs-tab": "awsui_tabs-tab_14rmt_13jmh_245",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_13jmh_257",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_13jmh_273",
-  "refresh": "awsui_refresh_14rmt_13jmh_292",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_13jmh_343",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_13jmh_378",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_13jmh_385",
-  "root": "awsui_root_14rmt_13jmh_389",
-  "tabs": "awsui_tabs_14rmt_13jmh_198",
-  "tabs-content": "awsui_tabs-content_14rmt_13jmh_430",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_13jmh_434",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_13jmh_447",
-  "with-paddings": "awsui_with-paddings_14rmt_13jmh_447",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_13jmh_452"
+  "tabs-header": "awsui_tabs-header_14rmt_n8497_198",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_n8497_206",
+  "pagination-button": "awsui_pagination-button_14rmt_n8497_223",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_n8497_230",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_n8497_233",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_n8497_237",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_n8497_240",
+  "tabs-tab": "awsui_tabs-tab_14rmt_n8497_245",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_n8497_257",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_n8497_273",
+  "refresh": "awsui_refresh_14rmt_n8497_292",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_n8497_343",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_n8497_378",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_n8497_385",
+  "root": "awsui_root_14rmt_n8497_389",
+  "tabs": "awsui_tabs_14rmt_n8497_198",
+  "tabs-content": "awsui_tabs-content_14rmt_n8497_430",
+  "fit-height": "awsui_fit-height_14rmt_n8497_434",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_n8497_440",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_n8497_454",
+  "with-paddings": "awsui_with-paddings_14rmt_n8497_454",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_n8497_465"
 };
   

package/tabs/styles.scoped.css

@@ -195,7 +195,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_13jmh_198:not(#\9) {
+.awsui_tabs-header_14rmt_n8497_198:not(#\9) {
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
@@ -203,7 +203,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
 }
 
-.awsui_tabs-header-list_14rmt_13jmh_206:not(#\9) {
+.awsui_tabs-header-list_14rmt_n8497_206:not(#\9) {
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
@@ -216,33 +216,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -ms-overflow-style: none; /* Internet Explorer 10+ */
   scrollbar-width: none; /* Firefox */
 }
-.awsui_tabs-header-list_14rmt_13jmh_206:not(#\9)::-webkit-scrollbar {
+.awsui_tabs-header-list_14rmt_n8497_206:not(#\9)::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
 
-.awsui_pagination-button_14rmt_13jmh_223:not(#\9) {
+.awsui_pagination-button_14rmt_n8497_223: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_13jmh_230:not(#\9) {
+.awsui_pagination-button-left_14rmt_n8497_230:not(#\9) {
   border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-control-disabled-bv2kkn, #d1d5db);
 }
-.awsui_pagination-button-left-scrollable_14rmt_13jmh_233:not(#\9) {
+.awsui_pagination-button-left-scrollable_14rmt_n8497_233:not(#\9) {
   z-index: 1;
   box-shadow: 5px 0px 4px -3px var(--color-border-tabs-shadow-w5xpb4, rgba(0, 7, 22, 0.12)), 1px 0px 0px 0px var(--color-border-tabs-shadow-w5xpb4, rgba(0, 7, 22, 0.12));
 }
-.awsui_pagination-button-right_14rmt_13jmh_237:not(#\9) {
+.awsui_pagination-button-right_14rmt_n8497_237:not(#\9) {
   border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-control-disabled-bv2kkn, #d1d5db);
 }
-.awsui_pagination-button-right-scrollable_14rmt_13jmh_240:not(#\9) {
+.awsui_pagination-button-right-scrollable_14rmt_n8497_240:not(#\9) {
   z-index: 1;
   box-shadow: -5px 0px 4px -3px var(--color-border-tabs-shadow-w5xpb4, rgba(0, 7, 22, 0.12)), -1px 0px 0px 0 var(--color-border-tabs-shadow-w5xpb4, rgba(0, 7, 22, 0.12));
 }
 
-.awsui_tabs-tab_14rmt_13jmh_245:not(#\9) {
+.awsui_tabs-tab_14rmt_n8497_245:not(#\9) {
   list-style: none;
   padding-block: 0;
   padding-inline: 0;
@@ -250,11 +250,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
   max-inline-size: calc(90% - var(--space-l-t419sm, 20px));
 }
-.awsui_tabs-tab_14rmt_13jmh_245 > button:not(#\9) {
+.awsui_tabs-tab_14rmt_n8497_245 > button:not(#\9) {
   background-color: transparent;
 }
 
-.awsui_tabs-tab-label_14rmt_13jmh_257:not(#\9) {
+.awsui_tabs-tab-label_14rmt_n8497_257:not(#\9) {
   display: flex;
   align-items: center;
   padding-block: var(--space-scaled-2x-xxs-7v8ivz, 4px);
@@ -265,12 +265,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-break: break-word;
 }
 
-.awsui_tabs-tab_14rmt_13jmh_245:not(#\9):not(:last-child) > a > .awsui_tabs-tab-label_14rmt_13jmh_257, .awsui_tabs-tab_14rmt_13jmh_245:not(#\9):not(:last-child) > button > .awsui_tabs-tab-label_14rmt_13jmh_257 {
+.awsui_tabs-tab_14rmt_n8497_245:not(#\9):not(:last-child) > a > .awsui_tabs-tab-label_14rmt_n8497_257, .awsui_tabs-tab_14rmt_n8497_245:not(#\9):not(:last-child) > button > .awsui_tabs-tab-label_14rmt_n8497_257 {
   margin-inline-end: calc(-1 * var(--border-divider-section-width-1061zr, 1px));
   border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-tabs-divider-6vpso4, #b6bec9);
 }
 
-.awsui_tabs-tab-link_14rmt_13jmh_273:not(#\9) {
+.awsui_tabs-tab-link_14rmt_n8497_273:not(#\9) {
   position: relative;
   display: flex;
   align-items: stretch;
@@ -289,26 +289,26 @@ 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_13jmh_273.awsui_refresh_14rmt_13jmh_292:not(#\9) {
+.awsui_tabs-tab-link_14rmt_n8497_273.awsui_refresh_14rmt_n8497_292:not(#\9) {
   padding-block-start: calc(var(--space-static-xs-7sfb63, 8px) - 1px);
   padding-block-end: var(--space-static-xs-7sfb63, 8px);
   padding-inline: 0;
 }
-.awsui_tabs-tab-link_14rmt_13jmh_273:not(#\9):hover {
+.awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):hover {
   color: var(--color-text-accent-n2acxv, #0972d3);
 }
-.awsui_tabs-tab-link_14rmt_13jmh_273:not(#\9):focus {
+.awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_13jmh_273:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):focus {
   z-index: 1;
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_13jmh_273:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_n8497_273: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_13jmh_273:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -322,32 +322,32 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_13jmh_273:not(#\9
   border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_13jmh_273:not(#\9):focus > a > .awsui_tabs-tab-label_14rmt_13jmh_257, body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_13jmh_273:not(#\9):focus > button > .awsui_tabs-tab-label_14rmt_13jmh_257 {
+body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):focus > a > .awsui_tabs-tab-label_14rmt_n8497_257, body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):focus > button > .awsui_tabs-tab-label_14rmt_n8497_257 {
   border-inline-end-color: transparent;
 }
 
-.awsui_tabs-tab_14rmt_13jmh_245:not(#\9):first-child {
+.awsui_tabs-tab_14rmt_n8497_245:not(#\9):first-child {
   margin-inline-start: 1px;
 }
-.awsui_tabs-tab_14rmt_13jmh_245:not(#\9):first-child > a > .awsui_tabs-tab-label_14rmt_13jmh_257, .awsui_tabs-tab_14rmt_13jmh_245:not(#\9):first-child > button > .awsui_tabs-tab-label_14rmt_13jmh_257 {
+.awsui_tabs-tab_14rmt_n8497_245:not(#\9):first-child > a > .awsui_tabs-tab-label_14rmt_n8497_257, .awsui_tabs-tab_14rmt_n8497_245:not(#\9):first-child > button > .awsui_tabs-tab-label_14rmt_n8497_257 {
   padding-inline-start: calc(var(--space-l-t419sm, 20px) - 1px);
 }
 
-.awsui_tabs-tab_14rmt_13jmh_245:not(#\9):last-child {
+.awsui_tabs-tab_14rmt_n8497_245:not(#\9):last-child {
   margin-inline-end: 1px;
 }
-.awsui_tabs-tab_14rmt_13jmh_245:not(#\9):last-child > a > .awsui_tabs-tab-label_14rmt_13jmh_257, .awsui_tabs-tab_14rmt_13jmh_245:not(#\9):last-child > button > .awsui_tabs-tab-label_14rmt_13jmh_257 {
+.awsui_tabs-tab_14rmt_n8497_245:not(#\9):last-child > a > .awsui_tabs-tab-label_14rmt_n8497_257, .awsui_tabs-tab_14rmt_n8497_245:not(#\9):last-child > button > .awsui_tabs-tab-label_14rmt_n8497_257 {
   padding-inline-end: calc(var(--space-l-t419sm, 20px) - 1px);
 }
 
-.awsui_tabs-tab-disabled_14rmt_13jmh_343:not(#\9), .awsui_tabs-tab-disabled_14rmt_13jmh_343:not(#\9):hover {
+.awsui_tabs-tab-disabled_14rmt_n8497_343:not(#\9), .awsui_tabs-tab-disabled_14rmt_n8497_343:not(#\9):hover {
   pointer-events: none;
   cursor: default;
   color: var(--color-text-interactive-disabled-z7a3t4, #9ba7b6);
   font-weight: var(--font-tabs-disabled-weight-1xcs5l, 700);
 }
 
-.awsui_tabs-tab-link_14rmt_13jmh_273:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_13jmh_343):after {
+.awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_n8497_343):after {
   content: "";
   position: absolute;
   inset-inline-start: 0;
@@ -361,36 +361,36 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_13jmh_273:not(#\9
   background: var(--color-border-tabs-underline-f1qo5r, #0972d3);
   opacity: 0;
 }
-.awsui_tabs-tab-link_14rmt_13jmh_273:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_13jmh_343).awsui_refresh_14rmt_13jmh_292:after {
+.awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_n8497_343).awsui_refresh_14rmt_n8497_292: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-link_14rmt_13jmh_273:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_13jmh_343).awsui_refresh_14rmt_13jmh_292:after {
+  .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_n8497_343).awsui_refresh_14rmt_n8497_292:after {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_tabs-tab-link_14rmt_13jmh_273:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_13jmh_343).awsui_refresh_14rmt_13jmh_292:after, .awsui-mode-entering .awsui_tabs-tab-link_14rmt_13jmh_273:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_13jmh_343).awsui_refresh_14rmt_13jmh_292:after {
+.awsui-motion-disabled .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_n8497_343).awsui_refresh_14rmt_n8497_292:after, .awsui-mode-entering .awsui_tabs-tab-link_14rmt_n8497_273:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_n8497_343).awsui_refresh_14rmt_n8497_292:after {
   animation: none;
   transition: none;
 }
 
-.awsui_tabs-tab-active_14rmt_13jmh_378:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_13jmh_343) {
+.awsui_tabs-tab-active_14rmt_n8497_378:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_n8497_343) {
   color: var(--color-text-accent-n2acxv, #0972d3);
 }
-.awsui_tabs-tab-active_14rmt_13jmh_378:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_13jmh_343):after {
+.awsui_tabs-tab-active_14rmt_n8497_378:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_n8497_343):after {
   opacity: 1;
 }
 
-.awsui_tabs-header-with-divider_14rmt_13jmh_385:not(#\9) {
+.awsui_tabs-header-with-divider_14rmt_n8497_385:not(#\9) {
   border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-tabs-divider-6vpso4, #b6bec9);
 }
 
-.awsui_root_14rmt_13jmh_389:not(#\9) {
+.awsui_root_14rmt_n8497_389:not(#\9) {
   /* used in test-utils or tests */
 }
 
-.awsui_tabs_14rmt_13jmh_198:not(#\9) {
+.awsui_tabs_14rmt_n8497_198:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -428,14 +428,21 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_13jmh_273:not(#\9
   inline-size: 100%;
 }
 
-.awsui_tabs-content_14rmt_13jmh_430:not(#\9) {
+.awsui_tabs-content_14rmt_n8497_430:not(#\9) {
   display: none;
 }
 
-.awsui_tabs-content-active_14rmt_13jmh_434:not(#\9) {
+.awsui_fit-height_14rmt_n8497_434:not(#\9) {
+  display: flex;
+  flex-direction: column;
+  block-size: 100%;
+}
+
+.awsui_tabs-content-active_14rmt_n8497_440:not(#\9) {
   display: block;
+  flex: 1;
 }
-body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_13jmh_434:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_n8497_440:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
@@ -445,12 +452,23 @@ body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_13jmh_434:n
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
 
-.awsui_tabs-content-wrapper_14rmt_13jmh_447.awsui_with-paddings_14rmt_13jmh_447 > .awsui_tabs-content_14rmt_13jmh_430:not(#\9) {
+.awsui_tabs-content-wrapper_14rmt_n8497_454.awsui_with-paddings_14rmt_n8497_454 > .awsui_tabs-content_14rmt_n8497_430:not(#\9) {
   padding-block: var(--space-scaled-m-mo5yse, 16px);
   padding-inline: 0;
 }
+.awsui_fit-height_14rmt_n8497_434 > .awsui_tabs-content-wrapper_14rmt_n8497_454:not(#\9) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
 
-.awsui_tabs-container-content-wrapper_14rmt_13jmh_452.awsui_with-paddings_14rmt_13jmh_447 > .awsui_tabs-content_14rmt_13jmh_430:not(#\9) {
+.awsui_fit-height_14rmt_n8497_434 > .awsui_tabs-content-wrapper_14rmt_n8497_454 > .awsui_tabs-container-content-wrapper_14rmt_n8497_465:not(#\9) {
+  block-size: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.awsui_tabs-container-content-wrapper_14rmt_n8497_465.awsui_with-paddings_14rmt_n8497_454 > .awsui_tabs-content_14rmt_n8497_430: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);

package/tabs/styles.selectors.js

@@ -2,26 +2,27 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "tabs-header": "awsui_tabs-header_14rmt_13jmh_198",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_13jmh_206",
-  "pagination-button": "awsui_pagination-button_14rmt_13jmh_223",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_13jmh_230",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_13jmh_233",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_13jmh_237",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_13jmh_240",
-  "tabs-tab": "awsui_tabs-tab_14rmt_13jmh_245",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_13jmh_257",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_13jmh_273",
-  "refresh": "awsui_refresh_14rmt_13jmh_292",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_13jmh_343",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_13jmh_378",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_13jmh_385",
-  "root": "awsui_root_14rmt_13jmh_389",
-  "tabs": "awsui_tabs_14rmt_13jmh_198",
-  "tabs-content": "awsui_tabs-content_14rmt_13jmh_430",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_13jmh_434",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_13jmh_447",
-  "with-paddings": "awsui_with-paddings_14rmt_13jmh_447",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_13jmh_452"
+  "tabs-header": "awsui_tabs-header_14rmt_n8497_198",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_n8497_206",
+  "pagination-button": "awsui_pagination-button_14rmt_n8497_223",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_n8497_230",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_n8497_233",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_n8497_237",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_n8497_240",
+  "tabs-tab": "awsui_tabs-tab_14rmt_n8497_245",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_n8497_257",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_n8497_273",
+  "refresh": "awsui_refresh_14rmt_n8497_292",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_n8497_343",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_n8497_378",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_n8497_385",
+  "root": "awsui_root_14rmt_n8497_389",
+  "tabs": "awsui_tabs_14rmt_n8497_198",
+  "tabs-content": "awsui_tabs-content_14rmt_n8497_430",
+  "fit-height": "awsui_fit-height_14rmt_n8497_434",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_n8497_440",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_n8497_454",
+  "with-paddings": "awsui_with-paddings_14rmt_n8497_454",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_n8497_465"
 };