@carbon/ibm-products 2.33.0 → 2.35.0

package/lib/index.js

@@ -82,6 +82,7 @@ var useInlineEdit = require('./components/Datagrid/useInlineEdit.js');
 var useFiltering = require('./components/Datagrid/useFiltering.js');
 var getAutoSizedColumnWidth = require('./components/Datagrid/utils/getAutoSizedColumnWidth.js');
 var useFilterContext = require('./components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js');
+var useEditableCell = require('./components/Datagrid/useEditableCell.js');
 var EditTearsheet = require('./components/EditTearsheet/EditTearsheet.js');
 var EditTearsheetForm = require('./components/EditTearsheet/EditTearsheetForm.js');
 var EditTearsheetNarrow = require('./components/EditTearsheetNarrow/EditTearsheetNarrow.js');
@@ -122,11 +123,19 @@ var SearchBar = require('./components/SearchBar/SearchBar.js');
 var Nav = require('./components/Nav/Nav.js');
 var StringFormatter = require('./components/StringFormatter/StringFormatter.js');
 var UserAvatar = require('./components/UserAvatar/UserAvatar.js');
+var ScrollGradient = require('./components/ScrollGradient/ScrollGradient.js');
 var StatusIndicator = require('./components/StatusIndicator/StatusIndicator.js');
+var TagOverflow = require('./components/TagOverflow/TagOverflow.js');
 var ActionBar = require('./components/ActionBar/ActionBar.js');
 var FilterPanel = require('./components/FilterPanel/FilterPanel.js');
+var FilterPanelAccordion = require('./components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js');
+var FilterPanelAccordionItem = require('./components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js');
 var FilterPanelCheckbox = require('./components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js');
+var FilterPanelCheckboxWithOverflow = require('./components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js');
+var FilterPanelGroup = require('./components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js');
 var FilterPanelLabel = require('./components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js');
+var FilterPanelSearch = require('./components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js');
+var ConditionBuilder = require('./components/ConditionBuilder/ConditionBuilder.js');
 
 
 
@@ -354,6 +363,7 @@ exports.useInlineEdit = useInlineEdit["default"];
 exports.useFiltering = useFiltering["default"];
 exports.getAutoSizedColumnWidth = getAutoSizedColumnWidth.getAutoSizedColumnWidth;
 exports.useFilterContext = useFilterContext["default"];
+exports.useEditableCell = useEditableCell["default"];
 Object.defineProperty(exports, 'EditTearsheet', {
 	enumerable: true,
 	get: function () { return EditTearsheet.EditTearsheet; }
@@ -514,10 +524,18 @@ Object.defineProperty(exports, 'UserAvatar', {
 	enumerable: true,
 	get: function () { return UserAvatar.UserAvatar; }
 });
+Object.defineProperty(exports, 'ScrollGradient', {
+	enumerable: true,
+	get: function () { return ScrollGradient.ScrollGradient; }
+});
 Object.defineProperty(exports, 'StatusIndicator', {
 	enumerable: true,
 	get: function () { return StatusIndicator.StatusIndicator; }
 });
+Object.defineProperty(exports, 'TagOverflow', {
+	enumerable: true,
+	get: function () { return TagOverflow.TagOverflow; }
+});
 Object.defineProperty(exports, 'ActionBar', {
 	enumerable: true,
 	get: function () { return ActionBar.ActionBar; }
@@ -526,11 +544,35 @@ Object.defineProperty(exports, 'FilterPanel', {
 	enumerable: true,
 	get: function () { return FilterPanel.FilterPanel; }
 });
+Object.defineProperty(exports, 'FilterPanelAccordion', {
+	enumerable: true,
+	get: function () { return FilterPanelAccordion.FilterPanelAccordion; }
+});
+Object.defineProperty(exports, 'FilterPanelAccordionItem', {
+	enumerable: true,
+	get: function () { return FilterPanelAccordionItem.FilterPanelAccordionItem; }
+});
 Object.defineProperty(exports, 'FilterPanelCheckbox', {
 	enumerable: true,
 	get: function () { return FilterPanelCheckbox.FilterPanelCheckbox; }
 });
+Object.defineProperty(exports, 'FilterPanelCheckboxWithOverflow', {
+	enumerable: true,
+	get: function () { return FilterPanelCheckboxWithOverflow.FilterPanelCheckboxWithOverflow; }
+});
+Object.defineProperty(exports, 'FilterPanelGroup', {
+	enumerable: true,
+	get: function () { return FilterPanelGroup.FilterPanelGroup; }
+});
 Object.defineProperty(exports, 'FilterPanelLabel', {
 	enumerable: true,
 	get: function () { return FilterPanelLabel.FilterPanelLabel; }
 });
+Object.defineProperty(exports, 'FilterPanelSearch', {
+	enumerable: true,
+	get: function () { return FilterPanelSearch.FilterPanelSearch; }
+});
+Object.defineProperty(exports, 'ConditionBuilder', {
+	enumerable: true,
+	get: function () { return ConditionBuilder.ConditionBuilder; }
+});

package/lib/settings.d.ts

@@ -66,13 +66,21 @@ export const pkg: {
         TruncatedList: boolean;
         DelimitedList: boolean;
         FullPageError: boolean;
+        ScrollGradient: boolean;
         StringFormatter: boolean;
         StatusIndicator: boolean;
         StatusIndicatorStep: boolean;
+        TagOverflow: boolean;
         ActionBar: boolean;
         FilterPanel: boolean;
+        FilterPanelAccordion: boolean;
+        FilterPanelAccordionItem: boolean;
         FilterPanelCheckbox: boolean;
+        FilterPanelCheckboxWithOverflow: boolean;
+        FilterPanelGroup: boolean;
         FilterPanelLabel: boolean;
+        FilterPanelSearch: boolean;
+        ConditionBuilder: boolean;
         Coachmark: boolean;
         CoachmarkBeacon: boolean;
         CoachmarkButton: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.33.0",
+  "version": "2.35.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -90,7 +90,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.31.0",
+    "@carbon/ibm-products-styles": "^2.33.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -114,5 +114,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "389407c790f9238df195d0c53a384d7a06075f06"
+  "gitHead": "7a5a7cdd83c39a7f0b5c1e5baf647ebe70ab2983"
 }

package/scss/components/Coachmark/_coachmark-dragbar.scss

@@ -8,7 +8,6 @@
 // Standard imports.
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
-@use '@carbon/react';
 @use '@carbon/react/scss/theme' as *;
 
 // Define all component styles in a mixin which is then exported using

package/scss/components/Coachmark/_coachmark-tagline.scss

@@ -36,7 +36,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-tagline;
   background: $purple-70;
   background-image: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
   color: $white-0 !important;
-  grid-template-columns: [ctacol] auto [closebtncol] $spacing-08;
+  grid-template-columns: [cta-col] auto [close-btn-col] $spacing-08;
   opacity: 1;
   // stylelint-disable-next-line carbon/motion-duration-use
   transition: opacity $duration-moderate-02 motion(exit, productive) 300ms;
@@ -86,7 +86,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-tagline;
     border: none;
     background: transparent;
     color: $white-0 !important;
-    grid-template-columns: [iconcol] $spacing-07 [bodycol] auto;
+    grid-template-columns: [icon-col] $spacing-07 [body-col] auto;
     text-align: left;
     @include type.type-style('body-short-01');
 

package/scss/components/ConditionBuilder/_carbon-imports.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Import any Carbon component styles used from ConditionBuilder in this file.
+// ConditionBuilder uses the following Carbon components:

package/scss/components/ConditionBuilder/_condition-builder.scss

@@ -0,0 +1,25 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// ConditionBuilder uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by ConditionBuilder
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
+
+// .#{$block-class} {
+//   // TODO: Styles.
+// }

package/scss/components/ConditionBuilder/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './carbon-imports';
+@use './condition-builder';

package/scss/components/ConditionBuilder/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './condition-builder';

package/scss/components/CreateFullPage/_create-full-page.scss

@@ -21,8 +21,15 @@
 $block-class: #{c4p-settings.$pkg-prefix}--create-full-page;
 $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 
-.#{$block-class} .#{$block-class} {
+.#{$block-class} {
+  display: grid;
+  height: 100%;
   color: $text-primary;
+  grid-template-rows: minmax(auto, 100%);
+
+  &:has(.#{$block-class}__header) {
+    grid-template-rows: auto minmax(auto, 100%);
+  }
 }
 
 .#{$block-class}
@@ -33,14 +40,6 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
   margin-left: 0;
 }
 
-.#{$block-class}__header {
-  position: sticky;
-  z-index: 9;
-  top: 0;
-  right: 0;
-  left: 0;
-}
-
 .#{$block-class} .#{$step-block-class}__step--hidden-step {
   display: none;
 }
@@ -75,7 +74,8 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 
 .#{$block-class}__influencer-and-body-container {
   display: flex;
-  height: 100vh;
+  overflow: hidden;
+  max-height: 100%;
   padding: 0;
   margin: 0;
 }

package/scss/components/Datagrid/styles/_useNestedRows.scss

@@ -71,7 +71,11 @@
   .#{$block-class}__carbon-nested-row:not(
     .#{$block-class}__carbon-row-expandable
   )
-  td.#{$block-class}__cell:nth-of-type(2) {
+  td.#{$block-class}__cell:nth-of-type(2),
+.#{c4p-settings.$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row
+  td.#{$block-class}__cell:nth-of-type(2)
+  + td {
   position: relative;
 }
 

package/scss/components/FilterPanel/_carbon-imports.scss

@@ -7,3 +7,8 @@
 
 // Import any Carbon component styles used from FilterPanel in this file.
 // FilterPanel uses the following Carbon components:
+@use '@carbon/react/scss/components/accordion';
+@use '@carbon/react/scss/components/checkbox';
+@use '@carbon/react/scss/components/list';
+@use '@carbon/react/scss/components/overflow-menu';
+@use '@carbon/react/scss/components/search';

package/scss/components/FilterPanel/_filter-panel-accordion-item.scss

@@ -0,0 +1,54 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-accordion-item;
+$carbon: #{c4p-settings.$carbon-prefix};
+
+// Remove top and bottom borders.
+html .#{$block-class} {
+  border-block-start: 0;
+}
+html .#{$block-class}:last-child {
+  border-block-end: 0;
+}
+
+// Override Carbon Accordion Item styling
+html .#{$block-class} .#{$carbon}--accordion__wrapper {
+  padding-block: 0;
+}
+html .#{$block-class} .#{$carbon}--accordion__heading {
+  min-block-size: $spacing-07;
+  padding-inline-end: 0;
+}
+html .#{$block-class} .#{$carbon}--accordion__title {
+  width: 100%;
+  // 100% - the space taken up by the expand/collapse icon.
+  max-width: calc(100% - $spacing-07);
+  margin-inline-end: 0;
+}
+html .#{$block-class} .#{$carbon}--accordion__content {
+  padding-inline-end: 0;
+}
+
+// Override Filter Panel Label
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--filter-panel-label__text {
+  @include type.type-style('body-01');
+}
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--filter-panel-label__count {
+  @include type.type-style('label-01');
+}

package/scss/components/FilterPanel/_filter-panel-accordion.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//

package/scss/components/FilterPanel/_filter-panel-checkbox-with-overflow.scss

@@ -0,0 +1,60 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-checkbox-with-overflow;
+$carbon: #{c4p-settings.$carbon-prefix};
+
+.#{$block-class} {
+  position: relative;
+}
+.#{$block-class}--open,
+.#{$block-class}:hover,
+.#{$block-class}:focus-within {
+  background-color: $field;
+}
+
+// Position the menu button via its wrapper, not the button itself.
+.#{$block-class} .#{$carbon}--overflow-menu__wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+// Size the menu button.
+.#{$block-class} .#{$block-class}__overflow-button {
+  width: $spacing-06;
+  background-color: $layer;
+  block-size: $spacing-06;
+  min-block-size: $spacing-06;
+}
+
+// OverflowMenu <li>
+.#{$block-class}__overflow-options .#{$carbon}--overflow-menu-options__option {
+  height: $spacing-06;
+}
+// OverflowMenu <button>
+.#{$block-class}__overflow-options .#{$carbon}--overflow-menu-options__btn {
+  max-width: none;
+  justify-content: flex-end;
+}
+// SIZE FIX: This element is being used to "erase" the drop shadow
+// created by the menu items overtop the menu button.
+.#{$block-class}__overflow-options.#{$carbon}--overflow-menu-options[data-floating-menu-direction='bottom']:not(
+    .#{$carbon}--breadcrumb-menu-options
+  )::after {
+  inline-size: $spacing-06;
+}

package/scss/components/FilterPanel/_filter-panel-checkbox.scss

@@ -11,16 +11,37 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 
+@use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--filter-panel-checkbox;
 $label: #{c4p-settings.$pkg-prefix}--filter-panel-label;
+$carbon: #{c4p-settings.$carbon-prefix};
 
-// Set Carbon's Checkbox label to 100% the width of its container.
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--checkbox-label,
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--checkbox-label-text {
+// UNDO Carbon's concept that a Checkbox is always a list item (":last-of-type").
+// This also allows the TruncatedList to calculate the correct height for expanding/collapsing the list.
+.#{$block-class}.#{$carbon}--form-item.#{$carbon}--checkbox-wrapper,
+.#{$block-class}.#{$carbon}--form-item.#{$carbon}--checkbox-wrapper:last-of-type {
+  margin-block-end: 0;
+}
+
+// Surround a checkbox's count with parentheses.
+.#{$block-class}
+  .#{c4p-settings.$pkg-prefix}--filter-panel-label__count::before {
+  content: '(';
+}
+.#{$block-class}
+  .#{c4p-settings.$pkg-prefix}--filter-panel-label__count::after {
+  content: ')';
+}
+
+.#{$block-class} .#{$carbon}--checkbox-label,
+.#{$block-class} .#{$carbon}--checkbox-label-text {
+  // Set Carbon's Checkbox label to 100% the width of the filter panel.
   width: 100%;
+  // Match height to the "checkbox with overflow" button.
+  height: $spacing-06;
 }
 
 .#{$block-class} .#{$label}__text {

package/scss/components/FilterPanel/_filter-panel-group.scss

@@ -0,0 +1,39 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+
+// FilterPanel uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by FilterPanel
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-group;
+
+.#{$block-class} {
+  padding-top: $spacing-04;
+  border-top: to-rem(1px) solid $border-subtle;
+  margin-top: $spacing-04;
+  margin-bottom: $spacing-04;
+}
+
+.#{$block-class}__title {
+  @include type.type-style('label-01');
+  @include type.font-weight('semibold');
+
+  margin-top: 0;
+  margin-bottom: $spacing-04;
+}

package/scss/components/FilterPanel/_filter-panel-label.scss

@@ -37,11 +37,3 @@ $block-class: #{c4p-settings.$pkg-prefix}--filter-panel-label;
   margin-left: $spacing-04;
   color: $text-secondary;
 }
-
-// Surround the value with parentheses.
-.#{$block-class}__count::before {
-  content: '(';
-}
-.#{$block-class}__count::after {
-  content: ')';
-}

package/scss/components/FilterPanel/_filter-panel-search.scss

@@ -0,0 +1,38 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities';
+
+// FilterPanel uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by FilterPanel
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-search;
+
+.#{$block-class} {
+  position: relative;
+  margin-bottom: $spacing-05;
+}
+
+.#{$block-class}__results {
+  position: absolute;
+  z-index: utilities.z('dropdown');
+  top: 100%;
+  right: 0;
+  left: 0;
+  /* stylelint-disable-next-line function-no-unknown */
+  max-height: to-rem(320px);
+  padding: $spacing-03;
+  background-color: $layer;
+  overflow-y: auto;
+}

package/scss/components/FilterPanel/_filter-panel.scss

@@ -17,9 +17,11 @@
 
 // FilterPanel uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by FilterPanel
+@use '../TruncatedList';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--filter-panel;
+$carbon: #{c4p-settings.$carbon-prefix};
 
 .#{$block-class}__title {
   @include type.type-style('body-compact-01');

package/scss/components/FilterPanel/_index-with-carbon.scss

@@ -7,5 +7,10 @@
 
 @use './carbon-imports';
 @use './filter-panel';
+@use './filter-panel-accordion';
+@use './filter-panel-accordion-item';
 @use './filter-panel-checkbox';
+@use './filter-panel-checkbox-with-overflow';
+@use './filter-panel-group';
 @use './filter-panel-label';
+@use './filter-panel-search';

package/scss/components/FilterPanel/_index.scss

@@ -6,5 +6,10 @@
 //
 
 @use './filter-panel';
+@use './filter-panel-accordion';
+@use './filter-panel-accordion-item';
 @use './filter-panel-checkbox';
+@use './filter-panel-checkbox-with-overflow';
+@use './filter-panel-group';
 @use './filter-panel-label';
+@use './filter-panel-search';

package/scss/components/Guidebanner/_guidebanner.scss

@@ -248,7 +248,7 @@ $purple-3: #7433e3;
 }
 
 // Exception handling.
-// If "withLeftgutter", then:
+// If "withLeftGutter", then:
 // - insert 1 rem of more "space" on the left.
 // - move icon 1 rem more to the right.
 .#{$block-class}__with-left-gutter .#{$block-class}__icon-idea {

package/scss/components/InlineTip/_inline-tip.scss

@@ -229,7 +229,7 @@ $purple: #7f3ae7;
 }
 
 // Exception handling.
-// If "withLeftgutter", then:
+// If "withLeftGutter", then:
 // - insert 1 rem of more "space" on the left.
 // - move icon 1 rem more to the right.
 .#{$block-class}__wide.#{$block-class}__with-left-gutter {

package/scss/components/ProductiveCard/_productive-card.scss

@@ -16,6 +16,9 @@
 $block-class: #{c4p-settings.$pkg-prefix}--card;
 
 .#{$block-class}__productive {
+  display: flex;
+  flex-direction: column;
+
   .#{$block-class}__title {
     @include type.type-style('heading-compact-02');
   }
@@ -101,4 +104,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   .#{$block-class}__header-container {
     align-items: flex-start;
   }
+
+  .#{$block-class}__content-container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .#{$block-class}__header-body-container {
+    flex: 1;
+  }
 }

package/scss/components/ScrollGradient/_carbon-imports.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Import any Carbon component styles used from ScrollGradient in this file.
+// ScrollGradient uses the following Carbon components:

package/scss/components/ScrollGradient/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './carbon-imports';
+@use './scroll-gradient';

package/scss/components/ScrollGradient/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './scroll-gradient';