@carbon/ibm-products 2.70.1 → 2.71.0

package/lib/components/Tearsheet/Tearsheet.js

@@ -11,7 +11,6 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var react = require('@carbon/react');
 var React = require('react');
 var TearsheetShell = require('./TearsheetShell.js');
-var ActionSet = require('../ActionSet/ActionSet.js');
 var index = require('../../_virtual/index.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var devtools = require('../../global/js/utils/devtools.js');
@@ -39,13 +38,13 @@ const componentName = 'Tearsheet';
  * panel on either the left or right side, the main content area, and a set of
  * action buttons.
  */
-exports.Tearsheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
+exports.Tearsheet = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
     influencerPosition = 'left',
     influencerWidth = 'narrow',
     children,
     ...rest
-  } = _ref;
+  } = props;
   return /*#__PURE__*/React.createElement(TearsheetShell.TearsheetShell, _rollupPluginBabelHelpers.extends({}, devtools.getDevtoolsProps(componentName), rest, {
     influencerPosition,
     influencerWidth,
@@ -93,9 +92,7 @@ exports.Tearsheet.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: propsHelper.allPropTypes([/**@ts-ignore */
-  ActionSet.ActionSet.validateActions(() => '2xl'), index.default.arrayOf(index.default.shape({
-    /**@ts-ignore*/
+  actions: propsHelper.allPropTypes([index.default.arrayOf(index.default.shape({
     ...react.Button.propTypes,
     kind: index.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: index.default.string,

package/lib/components/Tearsheet/TearsheetNarrow.js

@@ -12,7 +12,6 @@ var react = require('@carbon/react');
 var TearsheetShell = require('./TearsheetShell.js');
 var React = require('react');
 var propsHelper = require('../../global/js/utils/props-helper.js');
-var ActionSet = require('../ActionSet/ActionSet.js');
 var index = require('../../_virtual/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
@@ -86,9 +85,7 @@ exports.TearsheetNarrow.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: propsHelper.allPropTypes([/**@ts-ignore */
-  ActionSet.ActionSet.validateActions(() => 'lg'), index.default.arrayOf(index.default.shape({
-    /**@ts-ignore*/
+  actions: propsHelper.allPropTypes([index.default.arrayOf(index.default.shape({
     ...react.Button.propTypes,
     kind: index.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: index.default.string,

package/lib/components/Tearsheet/TearsheetShell.js

@@ -152,7 +152,7 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     if (prevOpen && !open && launcherButtonRef?.current) {
       setTimeout(() => {
         launcherButtonRef?.current.focus();
-      }, 0);
+      }, 10);
     }
   }, [open, prevOpen, launcherButtonRef]);
   React.useEffect(() => {

package/lib/components/UserAvatar/UserAvatar.js

@@ -31,9 +31,8 @@ const componentName = 'UserAvatar';
  * TODO: A description of the component.
  */
 
-exports.UserAvatar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    // The component props, in alphabetical order (for consistency).
+exports.UserAvatar = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
     backgroundColor = 'order-1-cyan',
     className,
     image,
@@ -44,9 +43,8 @@ exports.UserAvatar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     size = 'md',
     tooltipText,
     tooltipAlignment = 'bottom',
-    // Collect any other property values passed in.
     ...rest
-  } = _ref;
+  } = props;
   const carbonPrefix = react.usePrefix();
   const iconSize = {
     sm: 16,
@@ -139,10 +137,10 @@ exports.UserAvatar.propTypes = {
    * When passing the image prop use the imageDescription prop to describe the image for screen reader.
    */
   /**@ts-ignore */
-  imageDescription: index.default.string.isRequired.if(_ref2 => {
+  imageDescription: index.default.string.isRequired.if(_ref => {
     let {
       image
-    } = _ref2;
+    } = _ref;
     return !!image;
   }),
   /**

package/lib/components/UserProfileImage/UserProfileImage.d.ts

@@ -63,6 +63,7 @@ type UserProfileImageBaseProps = {
 export type UserProfileImageProps = UserProfileImageBaseProps & imageProps;
 /**
  * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
+ * @deprecated This component is deprecated.
  */
 export declare let UserProfileImage: React.ForwardRefExoticComponent<UserProfileImageProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/UserProfileImage/UserProfileImage.js

@@ -26,10 +26,11 @@ const componentName = 'UserProfileImage';
 
 /**
  * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
+ * @deprecated This component is deprecated.
  */
-exports.UserProfileImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+exports.UserProfileImage = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _FillItem;
-  let {
+  const {
     backgroundColor,
     className,
     kind,
@@ -41,9 +42,8 @@ exports.UserProfileImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     theme,
     tooltipText,
     tooltipAlignment = 'bottom',
-    // Collect any other property values passed in.
     ...rest
-  } = _ref;
+  } = props;
   const carbonPrefix = react.usePrefix();
   const icons$1 = {
     user: {
@@ -111,6 +111,12 @@ exports.UserProfileImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React.createElement(TooltipTrigger.TooltipTrigger, null, renderUserProfileImage())) : renderUserProfileImage());
 });
 
+/**@ts-ignore*/
+exports.UserProfileImage.deprecated = {
+  level: 'warn',
+  details: `Please replace ${componentName} with UserAvatar`
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.UserProfileImage = settings.pkg.checkComponentEnabled(exports.UserProfileImage, componentName);
 exports.UserProfileImage.displayName = componentName;
@@ -137,10 +143,10 @@ exports.UserProfileImage.propTypes = {
    * When passing the image prop use the imageDescription prop to describe the image for screen reader.
    */
   /**@ts-ignore */
-  imageDescription: index.default.string.isRequired.if(_ref2 => {
+  imageDescription: index.default.string.isRequired.if(_ref => {
     let {
       image
-    } = _ref2;
+    } = _ref;
     return !!image;
   }),
   /**

package/lib/components/index.d.ts

@@ -68,4 +68,5 @@ export { ActionBar } from './ActionBar';
 export * from './FilterPanel';
 export * from './ConditionBuilder';
 export * from './GetStartedCard';
+export * as unstable__PageHeader from './PageHeader/next/PageHeader';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, } from './FeatureFlags';

package/lib/global/js/package-settings.js

@@ -130,7 +130,7 @@ const defaults = {
     InlineTip: false,
     InlineTipButton: false,
     InlineTipLink: false,
-    InterstitialScreen: false,
+    InterstitialScreen: true,
     NonLinearReading: false
   },
   // feature level flags

package/lib/index.js

@@ -35,7 +35,7 @@ var ExpressiveCard = require('./components/ExpressiveCard/ExpressiveCard.js');
 var ImportModal = require('./components/ImportModal/ImportModal.js');
 var MultiAddSelect = require('./components/MultiAddSelect/MultiAddSelect.js');
 var NotificationsPanel = require('./components/NotificationsPanel/NotificationsPanel.js');
-var PageHeader = require('./components/PageHeader/PageHeader.js');
+var PageHeader$1 = require('./components/PageHeader/PageHeader.js');
 var ProductiveCard = require('./components/ProductiveCard/ProductiveCard.js');
 var RemoveModal = require('./components/RemoveModal/RemoveModal.js');
 var Saving = require('./components/Saving/Saving.js');
@@ -82,6 +82,7 @@ var EditFullPage = require('./components/EditFullPage/EditFullPage.js');
 var EditUpdateCards = require('./components/EditUpdateCards/EditUpdateCards.js');
 var Checklist = require('./components/Checklist/Checklist.js');
 var Coachmark = require('./components/Coachmark/Coachmark.js');
+require('react');
 require('./components/Coachmark/CoachmarkTagline.js');
 var CoachmarkBeacon = require('./components/CoachmarkBeacon/CoachmarkBeacon.js');
 var CoachmarkButton = require('./components/CoachmarkButton/CoachmarkButton.js');
@@ -104,6 +105,7 @@ var FullPageError = require('./components/FullPageError/FullPageError.js');
 var SearchBar = require('./components/SearchBar/SearchBar.js');
 var TagOverflow = require('./components/TagOverflow/TagOverflow.js');
 var GetStartedCard = require('./components/GetStartedCard/GetStartedCard.js');
+var PageHeader = require('./components/PageHeader/next/PageHeader.js');
 var index = require('./components/FeatureFlags/index.js');
 var useFilterContext = require('./components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js');
 var usePrefix = require('./global/js/hooks/usePrefix.js');
@@ -243,7 +245,7 @@ Object.defineProperty(exports, "NotificationsPanel", {
 });
 Object.defineProperty(exports, "PageHeader", {
 	enumerable: true,
-	get: function () { return PageHeader.PageHeader; }
+	get: function () { return PageHeader$1.PageHeader; }
 });
 Object.defineProperty(exports, "ProductiveCard", {
 	enumerable: true,
@@ -454,6 +456,7 @@ Object.defineProperty(exports, "GetStartedCard", {
 	enumerable: true,
 	get: function () { return GetStartedCard.GetStartedCard; }
 });
+exports.unstable__PageHeader = PageHeader;
 exports.unstable_FeatureFlags = index.FeatureFlags;
 exports.unstable_useFeatureFlag = index.useFeatureFlag;
 exports.unstable_useFeatureFlags = index.useFeatureFlags;

package/lib/node_modules/@carbon/icons-react/es/Icon.js

@@ -9,7 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../node_modules/@carbon/icon-helpers/es/index.js');
+var index = require('../../icon-helpers/es/index.js');
 var index$1 = require('../../../../_virtual/index.js');
 var React = require('react');
 

package/lib/node_modules/prop-types/index.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-var index = require('../../_virtual/index3.js');
+var index = require('../../_virtual/index2.js');
 var require$$0 = require('react-is');
 var factoryWithTypeCheckers = require('./factoryWithTypeCheckers.js');
 var factoryWithThrowingShims = require('./factoryWithThrowingShims.js');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.70.1",
+  "version": "2.71.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -57,8 +57,7 @@
     "storybook:start": "storybook dev ./public -p 3000",
     "telemetry-config": "ibmtelemetry-config generate --id 495342db-5046-4ecf-85ea-9ffceb6f8cdf --endpoint https://www-api.ibm.com/ibm-telemetry/v1/metrics --files ./src/components/**/*.(tsx|js|jsx)",
     "test": "jest --colors",
-    "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency), chalk (issue #1596)",
-    "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^namor)/'"
+    "vrt": "percy storybook --verbose ./storybook-static"
   },
   "devDependencies": {
     "@babel/cli": "^7.26.4",
@@ -71,29 +70,19 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@ibm/telemetry-js-config-generator": "^2.0.1",
-    "@percy/cli": "^1.30.7",
-    "@percy/storybook": "^6.0.3",
+    "@percy/cli": "^1.31.0",
+    "@percy/storybook": "^6.0.4",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-a11y": "^8.6.12",
-    "@storybook/addon-actions": "^8.6.12",
-    "@storybook/addon-controls": "^8.6.12",
-    "@storybook/addon-docs": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-viewport": "^8.6.12",
-    "@storybook/components": "^8.6.12",
-    "@storybook/core-events": "^8.6.12",
+    "@storybook/addon-docs": "^9.0.8",
+    "@storybook/addon-links": "^9.0.8",
     "@storybook/csf": "^0.1.13",
-    "@storybook/manager-api": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.12",
-    "@storybook/theming": "^8.6.12",
+    "@storybook/react-vite": "^9.0.13",
     "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.28.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.29.0",
     "chalk": "^4.1.2",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
@@ -102,23 +91,26 @@
     "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.29.0",
+    "jest-config-ibm-cloud-cognitive": "^1.30.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
-    "npm-check-updates": "^18.0.0",
     "npm-run-all": "^4.1.5",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "rimraf": "^6.0.1",
     "rollup": "^4.35.0",
     "rollup-plugin-strip-banner": "^3.1.0",
     "sass": "^1.85.1",
-    "storybook": "^8.6.12",
+    "storybook": "^9.0.8",
     "typescript-config-carbon": "^0.5.0",
+    "vite": "^7.0.0",
     "yargs": "^18.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.26.10",
+    "@carbon-labs/react-resizer": "^0.3.0",
     "@carbon/feature-flags": "^0.27.0",
-    "@carbon/ibm-products-styles": "^2.66.0",
+    "@carbon/ibm-products-styles": "^2.67.0",
     "@carbon/telemetry": "^0.1.0",
     "@carbon/utilities": "^0.7.0",
     "@carbon/utilities-react": "0.9.0",
@@ -131,14 +123,14 @@
     "react-window": "^1.8.11"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.37.0",
-    "@carbon/layout": "^11.35.0",
-    "@carbon/motion": "^11.29.0",
-    "@carbon/react": "^1.84.0",
-    "@carbon/themes": "^11.54.0",
-    "@carbon/type": "^11.41.0",
+    "@carbon/grid": "^11.38.0",
+    "@carbon/layout": "^11.36.0",
+    "@carbon/motion": "^11.30.0",
+    "@carbon/react": "^1.85.1",
+    "@carbon/themes": "^11.55.0",
+    "@carbon/type": "^11.42.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0"
   },
-  "gitHead": "91bebb19de1982a9230a433cd998d92532e57803"
+  "gitHead": "6b1aa641b80b4df7b6fc51c91dfaaefbfccc1ae6"
 }

package/scss/components/CoachmarkStack/_coachmark-stack.scss

@@ -29,6 +29,7 @@
 $elements-block-class: #{c4p-settings.$pkg-prefix}--coachmark-stack-element;
 $overlay-class: #{c4p-settings.$pkg-prefix}--coachmark-overlay;
 $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
+$style-stack-home: #{c4p-settings.$pkg-prefix}--coachmark-stack;
 
 .#{$elements-block-class} {
   $block: &;
@@ -44,7 +45,7 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
   &--is-mounted {
     inset-block-end: 0;
     /* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */
-    transition: $duration-moderate-02 motion(exit, productive);
+    transition: $duration-fast-02 motion(exit, productive);
     @media (prefers-reduced-motion) {
       transition: none;
     }
@@ -120,3 +121,13 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
     white-space: nowrap;
   }
 }
+
+.#{$style-stack-home}--scaled-home {
+  opacity: 0.8;
+  transform: scale(0.9);
+}
+
+.#{$style-stack-home}--unscaled-home {
+  opacity: 1;
+  transform: none;
+}

package/scss/components/InterstitialScreen/_interstitial-screen.scss

@@ -44,7 +44,7 @@ $one-grid-column: calc(100% / 16);
   &__carousel {
     block-size: 100%;
     .#{$carousel-item} {
-      flex: 0 0 100% !important;
+      flex: 0 0 100%;
       scroll-snap-align: start;
     }
   }
@@ -54,6 +54,10 @@ $one-grid-column: calc(100% / 16);
     margin: 0 !important;
   }
 
+  &--content {
+    block-size: 100%;
+  }
+
   // HEADER
   &--internal-header {
     position: relative;
@@ -102,6 +106,7 @@ $one-grid-column: calc(100% / 16);
   // FOOTER
   &--footer {
     display: flex;
+    box-sizing: initial;
     flex-direction: row;
     justify-content: flex-end;
     background: $background;
@@ -119,7 +124,7 @@ $one-grid-column: calc(100% / 16);
     #{$block}--skip-btn {
       flex-grow: 1 !important;
       max-inline-size: none;
-      padding-inline-start: $spacing-07 !important;
+      padding-inline-start: $spacing-07;
     }
     .#{c4p-settings.$carbon-prefix}--inline-loading {
       position: absolute;
@@ -149,14 +154,5 @@ $one-grid-column: calc(100% / 16);
       block-size: 100vh;
       max-inline-size: 100vw;
     }
-
-    #{$block}--footer {
-      #{$block}--skip-btn {
-        padding-inline-start: $spacing-08 !important;
-        @include breakpoint-down(xlg) {
-          padding-inline-start: $spacing-07 !important;
-        }
-      }
-    }
   }
 }

package/scss/components/PageHeader/_page-header.scss

@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/utilities';
+@use '@carbon/layout/scss/convert' as *;
 
 // Standard imports.
 @use '../../global/styles/project-settings' as *;
@@ -704,3 +705,200 @@ $duration: 1000ms;
   > button.#{$carbon-prefix}--menu-button__trigger {
   min-inline-size: 0;
 }
+
+/// Experimental Page header styles
+/// @access public
+/// @group page-header
+@include block-wrap(#{$block-class}__next) {
+  &.#{$block-class} {
+    background-color: $layer-01;
+    border-block-end: 1px solid $border-subtle-01;
+  }
+
+  .#{$block-class}__breadcrumb-bar {
+    block-size: to-rem(40px);
+  }
+
+  .#{$block-class}__breadcrumb-bar .#{$carbon-prefix}--subgrid {
+    block-size: 100%;
+  }
+
+  .#{$block-class}__breadcrumb-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .#{$block-class}__breadcrumb__actions-flush {
+    .#{$carbon-prefix}--css-grid {
+      padding-inline-end: 0;
+    }
+
+    .#{$carbon-prefix}--css-grid-column {
+      margin-inline-end: 0;
+    }
+  }
+
+  .#{$block-class}__breadcrumb-bar-border {
+    border-block-end: 1px solid $border-subtle-01;
+  }
+
+  .#{$block-class}__breadcrumb__icon {
+    margin-inline-end: $spacing-03;
+  }
+
+  .#{$block-class}__breadcrumb__actions {
+    display: inline-flex;
+  }
+
+  .#{$block-class}__breadcrumb__content-actions {
+    margin-inline-end: $spacing-04;
+  }
+
+  .#{$block-class}__breadcrumb-wrapper {
+    display: inline-flex;
+  }
+
+  .#{$block-class}__content {
+    padding: $spacing-06 0;
+  }
+
+  .#{$block-class}__content__title-wrapper {
+    @include breakpoint-down(md) {
+      display: flex;
+      flex-direction: column;
+      grid-gap: $spacing-05;
+    }
+
+    display: grid;
+    gap: $spacing-05;
+    grid-template-columns: auto minmax(
+        var(--page-header-title-grid-width, 0),
+        1fr
+      );
+    margin-block-end: $spacing-05;
+    min-block-size: to-rem(40px);
+  }
+
+  .#{$block-class}__content__start {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $spacing-05;
+  }
+
+  .#{$block-class}__content__title-container {
+    display: flex;
+  }
+
+  .#{$block-class}__content__title-container
+    .#{$carbon-prefix}--definition-term {
+    border-block-end: none;
+  }
+
+  .#{$block-class}__content__contextual-actions {
+    display: flex;
+  }
+
+  .#{$block-class}__content__title {
+    @include type.type-style('productive-heading-04');
+
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    max-inline-size: to-rem(640px);
+    text-overflow: ellipsis;
+    white-space: normal;
+  }
+
+  .#{$block-class}__content:has(.#{$block-class}__content__contextual-actions)
+    .#{$block-class}__content__title {
+    -webkit-line-clamp: 1;
+  }
+
+  .#{$block-class}__content__icon {
+    margin-inline-end: $spacing-05;
+  }
+
+  .#{$block-class}__content__page-actions {
+    display: flex;
+    justify-content: right;
+
+    @include breakpoint-down('md') {
+      justify-content: left;
+      margin-block-start: 0;
+    }
+  }
+
+  .#{$block-class}__content__page-actions
+    .#{$carbon-prefix}--menu-button__trigger:not(
+      .#{$carbon-prefix}--btn--ghost
+    ) {
+    min-inline-size: 0;
+  }
+
+  .#{$block-class}__content__subtitle {
+    @include type.type-style('productive-heading-03');
+
+    margin-block-end: $spacing-03;
+  }
+
+  .#{$block-class}__content__body {
+    @include type.type-style('body-01');
+
+    margin-block-start: $spacing-03;
+    max-inline-size: to-rem(640px);
+  }
+
+  [data-hidden]:not([data-fixed]) {
+    display: none;
+  }
+
+  .#{$block-class}__hero-image {
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    justify-content: flex-end;
+    block-size: 100%;
+  }
+
+  .#{$block-class}__tab-bar {
+    margin-inline-start: -$spacing-05;
+  }
+
+  .#{$block-class}__tab-bar--tablist {
+    display: grid;
+    grid-gap: $spacing-10;
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .#{$carbon-prefix}--tabs .#{$carbon-prefix}--tab--overflow-nav-button {
+    background-color: $layer-01;
+
+    &.#{$carbon-prefix}--tab--overflow-nav-button--next::before {
+      background: linear-gradient(to right, rgba(255, 255, 255, 0), $layer-01);
+    }
+
+    &.#{$carbon-prefix}--tab--overflow-nav-button--previous::before {
+      background: linear-gradient(to left, rgba(255, 255, 255, 0), $layer-01);
+    }
+  }
+
+  .#{$block-class}__tags {
+    display: flex;
+    align-items: center;
+    justify-content: right;
+  }
+
+  .#{$block-class}__tags-popover-list {
+    display: flex;
+    flex-direction: column;
+    padding: $spacing-05;
+  }
+
+  .#{$block-class}__tag-item {
+    flex-shrink: 0;
+  }
+}