@carbon/ibm-products-styles 2.55.0-rc.0 → 2.56.0-rc.0

package/scss/components/EditInPlace/_edit-in-place.scss

@@ -80,16 +80,17 @@ $carbon-input: #{$carbon-prefix}--text-input;
 }
 
 .#{$block-class}__warning-icon {
-  width: $spacing-05;
   margin: auto $spacing-03;
   color: $support-error;
+  inline-size: $spacing-05;
 }
 
 .#{$block-class}__warning-text {
   @include type.type-style('label-01');
 
-  margin-top: $spacing-03;
   color: $support-error;
+
+  margin-block-start: $spacing-03;
 }
 
 // overrides
@@ -117,7 +118,7 @@ $carbon-input: #{$carbon-prefix}--text-input;
 
   // animation div
   display: inline-flex;
-  width: var(--toolbar-width);
+  inline-size: var(--toolbar-width);
 }
 
 .#{$block-class}--invalid .#{$block-class}__toolbar {
@@ -131,23 +132,23 @@ $carbon-input: #{$carbon-prefix}--text-input;
 @keyframes slide-in {
   0% {
     overflow: hidden;
-    width: var(--toolbar-width);
+    inline-size: var(--toolbar-width);
   }
 
   99% {
     overflow: hidden;
-    width: var(--toolbar-width-focussed);
+    inline-size: var(--toolbar-width-focussed);
   }
 
   100% {
     overflow: visible;
-    width: var(--toolbar-width-focussed);
+    inline-size: var(--toolbar-width-focussed);
   }
 }
 
 .#{$block-class}--focused .#{$block-class}__toolbar {
   overflow: initial;
-  width: var(--toolbar-width-focussed);
 
   animation: slide-in $duration-moderate-01 motion(entrance, productive);
+  inline-size: var(--toolbar-width-focussed);
 }

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

@@ -6,4 +6,4 @@
 //
 
 // EditSidePanel uses the following Carbon components:
-@use '@carbon/react/scss/components/form';
+@use '@carbon/styles/scss/components/form';

package/scss/components/EditSidePanel/_edit-side-panel.scss

@@ -20,21 +20,21 @@ $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
 
 .#{$block-class} {
   .#{c4p-settings.$carbon-prefix}--form.#{$block-class}__form {
-    padding-top: $spacing-05;
+    padding-block-start: $spacing-05;
   }
 
   .#{$block-class}__form.#{c4p-settings.$carbon-prefix}--fieldset {
-    padding-top: $spacing-03;
+    padding-block-start: $spacing-03;
   }
 
   .#{$block-class}__form > * {
-    margin-bottom: $spacing-05;
+    margin-block-end: $spacing-05;
   }
 
   .#{$block-class}__form-title-text {
     @include type.type-style('heading-compact-02');
 
-    padding-bottom: $spacing-03;
+    padding-block-end: $spacing-03;
   }
 
   .#{$block-class}__form-description-text {

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2025, 2025
+//
+// 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/styles/scss/components/toggle/toggle';
+@use '@carbon/styles/scss/components/ui-shell/side-nav';

package/scss/components/EditTearsheet/_edit-tearsheet.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2022
+// Copyright IBM Corp. 2022, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,7 +7,7 @@
 
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/react/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/motion';
 
@@ -15,11 +15,7 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 
 // Other Carbon settings.
-@use '@carbon/react/scss/grid' as *;
-
-// EditTearsheet uses the following Carbon components:
-@use '@carbon/react/scss/components/toggle/toggle';
-@use '@carbon/react/scss/components/ui-shell/side-nav';
+@use '@carbon/styles/scss/grid' as *;
 
 // EditTearsheet uses the following IBM Products components:
 // TearsheetShell
@@ -68,22 +64,25 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit__form--fi
 }
 
 .#{$block-class} .#{$block-class}__content {
-  height: 100%;
-  padding-top: $spacing-06;
-  padding-bottom: $spacing-06;
+  block-size: 100%;
   overflow-x: hidden;
+  @supports (overflow-inline: hidden) {
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+    overflow-inline: hidden;
+  }
+
+  padding-block: $spacing-06;
 }
 
 .#{$block-class}
   .#{$block-class}__content
   .#{c4p-settings.$carbon-prefix}--css-grid {
-  padding-right: $spacing-03;
-  padding-left: $spacing-03;
-  margin-left: 0;
+  margin-inline-start: 0;
+  padding-inline: $spacing-03;
 }
 
 .#{$block-class} .#{$block-class}__form--heading {
-  padding-bottom: $spacing-06;
+  padding-block-end: $spacing-06;
 }
 
 .#{$block-class}
@@ -94,9 +93,9 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit__form--fi
 
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--side-nav--ux {
   position: initial;
-  width: 100%;
-  max-width: 100%;
   background-color: transparent;
+  inline-size: 100%;
+  max-inline-size: 100%;
 }
 
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--side-nav__link:hover {
@@ -109,27 +108,27 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit__form--fi
 
 .#{$block-class} .#{$block-class}__form--title,
 .#{$block-class} .#{$block-class}__section--title {
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
 }
 
 .#{$block-class} .#{$block-class}__section--subtitle,
 .#{$block-class} .#{$block-class}__form--subtitle {
   @include type.type-style('heading-compact-01');
 
-  margin-bottom: $spacing-03;
+  margin-block-end: $spacing-03;
 }
 
 .#{$block-class} .#{$block-class}__section--description,
 .#{$block-class} .#{$block-class}__form--description {
   @include type.type-style('body-01');
 
-  margin-bottom: $spacing-06;
+  margin-block-end: $spacing-06;
 }
 
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--fieldset {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 .#{$block-class} .#{$block-class}__form--fieldset > * {
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
 }

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2025, 2025
+//
+// 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 './edit-tearsheet';

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

@@ -7,5 +7,5 @@
 
 // Empty states use the following Carbon components:
 // Button, Link
-@use '@carbon/react/scss/components/button';
-@use '@carbon/react/scss/components/link';
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/link';

package/scss/components/EmptyStates/_empty-state.scss

@@ -20,21 +20,23 @@ $block-class: #{c4p-settings.$pkg-prefix}--empty-state;
   .#{$block-class}__header {
     @include type.type-style('heading-03');
 
-    padding-bottom: $spacing-03;
     margin: 0;
+
+    padding-block-end: $spacing-03;
   }
 
   .#{$block-class}__subtitle {
     @include type.type-style('body-01');
 
-    padding-bottom: $spacing-05;
     color: $text-secondary;
+
+    padding-block-end: $spacing-05;
   }
 
   .#{$block-class}__header--small {
     @include type.type-style('body-compact-02');
 
-    padding-bottom: $spacing-03;
+    padding-block-end: $spacing-03;
   }
 
   .#{$block-class}__subtitle--small {
@@ -43,17 +45,17 @@ $block-class: #{c4p-settings.$pkg-prefix}--empty-state;
 }
 
 .#{$block-class}__illustration {
-  height: auto;
-  margin-bottom: $spacing-05;
+  block-size: auto;
+  margin-block-end: $spacing-05;
 
   &.#{$block-class}__illustration--lg {
-    min-width: $spacing-11;
-    max-width: $spacing-11;
+    max-inline-size: $spacing-11;
+    min-inline-size: $spacing-11;
   }
 
   &.#{$block-class}__illustration--sm {
-    min-width: $spacing-10;
-    max-width: $spacing-10;
+    max-inline-size: $spacing-10;
+    min-inline-size: $spacing-10;
   }
 }
 
@@ -75,7 +77,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--empty-state;
 
 .#{$block-class} .#{$block-class}__action-button {
   display: block;
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
 }
 
 .#{$block-class} .#{$block-class}__link {

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

@@ -7,4 +7,4 @@
 
 // ExampleComponent uses the following Carbon components:
 // Button, ButtonSet
-@use '@carbon/react/scss/components/button';
+@use '@carbon/styles/scss/components/button';

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

@@ -8,9 +8,9 @@
 // ExportModal uses the following Carbon components:
 // Button, ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput,
 // RadioButton, RadioButtonGroup, FormGroup, Loading
-@use '@carbon/react/scss/components/button';
-@use '@carbon/react/scss/components/modal';
-@use '@carbon/react/scss/components/text-input';
-@use '@carbon/react/scss/components/radio-button';
-@use '@carbon/react/scss/components/form';
-@use '@carbon/react/scss/components/loading';
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/text-input';
+@use '@carbon/styles/scss/components/radio-button';
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/loading';

package/scss/components/ExportModal/_export-modal.scss

@@ -6,7 +6,7 @@
 //
 
 // Standard imports.
-@use '@carbon/react/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
 
@@ -15,17 +15,17 @@ $block-class: #{c4p-settings.$pkg-prefix}--export-modal;
 .#{$block-class}
   .#{c4p-settings.$carbon-prefix}--modal-footer
   .#{c4p-settings.$carbon-prefix}--btn {
-  max-width: none;
+  max-inline-size: none;
 }
 
 .#{$block-class}.#{c4p-settings.$carbon-prefix}--modal
   .#{c4p-settings.$carbon-prefix}--modal-content {
-  padding-right: $spacing-05;
+  padding-inline-end: $spacing-05;
 }
 
 .#{$block-class}__body {
-  padding-right: calc(20% - #{$spacing-05});
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
+  padding-inline-end: calc(20% - #{$spacing-05});
 }
 
 .#{$block-class}__messaging {
@@ -34,7 +34,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--export-modal;
 }
 
 .#{$block-class}__messaging p {
-  margin-left: $spacing-03;
+  margin-inline-start: $spacing-03;
 }
 
 .#{$block-class}__checkmark-icon {

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

@@ -7,8 +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';
+@use '@carbon/styles/scss/components/accordion';
+@use '@carbon/styles/scss/components/checkbox';
+@use '@carbon/styles/scss/components/list';
+@use '@carbon/styles/scss/components/overflow-menu';
+@use '@carbon/styles/scss/components/search';

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

@@ -36,10 +36,10 @@ html .#{$block-class} .#{$carbon}--accordion__heading {
   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);
+  inline-size: 100%;
   margin-inline-end: 0;
+  // 100% - the space taken up by the expand/collapse icon.
+  max-inline-size: calc(100% - $spacing-07);
 }
 html .#{$block-class} .#{$carbon}--accordion__content {
   padding-inline-end: 0;

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

@@ -31,25 +31,25 @@ $carbon: #{c4p-settings.$carbon-prefix};
 // Position the menu button via its wrapper, not the button itself.
 .#{$block-class} .#{$carbon}--overflow-menu__wrapper {
   position: absolute;
-  top: 0;
-  right: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
 }
 // Size the menu button.
 .#{$block-class} .#{$block-class}__overflow-button {
-  width: $spacing-06;
   background-color: $layer;
   block-size: $spacing-06;
+  inline-size: $spacing-06;
   min-block-size: $spacing-06;
 }
 
 // OverflowMenu <li>
 .#{$block-class}__overflow-options .#{$carbon}--overflow-menu-options__option {
-  height: $spacing-06;
+  block-size: $spacing-06;
 }
 // OverflowMenu <button>
 .#{$block-class}__overflow-options .#{$carbon}--overflow-menu-options__btn {
-  max-width: none;
   justify-content: flex-end;
+  max-inline-size: none;
 }
 // SIZE FIX: This element is being used to "erase" the drop shadow
 // created by the menu items overtop the menu button.

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

@@ -38,10 +38,10 @@ $carbon: #{c4p-settings.$carbon-prefix};
 
 .#{$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-size: $spacing-06;
+  // Set Carbon's Checkbox label to 100% the width of the filter panel.
+  inline-size: 100%;
 }
 
 .#{$block-class} .#{$label}__text {

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

@@ -24,16 +24,14 @@
 $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;
+  border-block-start: to-rem(1px) solid $border-subtle;
+  margin-block: $spacing-04;
+  padding-block-start: $spacing-04;
 }
 
 .#{$block-class}__title {
   @include type.type-style('label-01');
   @include type.font-weight('semibold');
 
-  margin-top: 0;
-  margin-bottom: $spacing-04;
+  margin-block: 0 $spacing-04;
 }

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

@@ -34,6 +34,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--filter-panel-label;
 }
 
 .#{$block-class}__count {
-  margin-left: $spacing-04;
   color: $text-secondary;
+  margin-inline-start: $spacing-04;
 }

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

@@ -21,18 +21,20 @@ $block-class: #{c4p-settings.$pkg-prefix}--filter-panel-search;
 
 .#{$block-class} {
   position: relative;
-  margin-bottom: $spacing-05;
+  margin-block-end: $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;
+  inset-block-start: 100%;
+  inset-inline: 0;
+  /* stylelint-disable-next-line function-no-unknown */
+  max-block-size: to-rem(320px);
   overflow-y: auto;
+  @supports (overflow-block: auto) {
+    overflow-block: auto;
+  }
 }

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

@@ -26,6 +26,5 @@ $carbon: #{c4p-settings.$carbon-prefix};
 .#{$block-class}__title {
   @include type.type-style('body-compact-01');
 
-  margin-top: $spacing-04;
-  margin-bottom: $spacing-04;
+  margin-block: $spacing-04;
 }

package/scss/components/FilterSummary/_filter-summary.scss

@@ -14,32 +14,32 @@ $block-class: #{$pkg-prefix}--filter-summary;
 
 .#{$block-class} {
   display: flex;
-  width: 100%;
-  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
-  height: to-rem(48px);
   align-items: flex-start;
   padding: $spacing-03;
-  border-top: 1px solid $border-subtle-01;
   background: $layer-01;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  block-size: to-rem(48px);
+  border-block-start: 1px solid $border-subtle-01;
+  inline-size: 100%;
   &.#{$block-class}__expanded {
-    height: fit-content;
+    block-size: fit-content;
   }
 }
 
 .#{$block-class}
   .#{$pkg-prefix}--tag-set.#{$pkg-prefix}--tag-set.#{$block-class}__clear-button-inline {
-  width: auto;
+  inline-size: auto;
 }
 
 .#{$block-class}__view-all--wrapper {
   position: absolute;
-  top: $spacing-03;
-  right: 0;
+  inset-block-start: $spacing-03;
+  inset-inline-end: 0;
 }
 
 .#{$block-class}__expanded
   .#{$block-class}__clear-all-button.#{$carbon-prefix}--btn {
-  margin-right: $spacing-07;
+  margin-inline-end: $spacing-07;
 }
 
 .#{$block-class}__view-all--wrapper

package/scss/components/FullPageError/_full-page-error.scss

@@ -22,20 +22,19 @@
 $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
 
 .#{$block-class} {
-  height: inherit;
+  block-size: inherit;
 }
 .#{$block-class}__container {
-  height: 100%;
   margin: 0 $spacing-06;
+  block-size: 100%;
 
   @include breakpoint-down(md) {
     margin: 0 $spacing-03;
   }
 }
 .#{$block-class}__grid {
-  height: 100%;
-  padding-top: $spacing-07;
-  padding-bottom: $spacing-07;
+  block-size: 100%;
+  padding-block: $spacing-07;
 }
 .#{$block-class}__column {
   padding: 0;
@@ -46,8 +45,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
 
 .#{$block-class}__svg-container {
   display: flex;
-  height: 100%;
   padding: $spacing-03 $spacing-03 $spacing-11 $spacing-03;
+  block-size: 100%;
   @include breakpoint(md) {
     padding: auto $spacing-03 $spacing-11;
   }
@@ -63,18 +62,18 @@ $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
   color: $text-error;
 }
 .#{$block-class}__title {
-  margin-bottom: $spacing-09;
+  margin-block-end: $spacing-09;
 }
 
 .#{$block-class}__description {
   @include type-style('body-02');
 
-  margin-bottom: $spacing-07;
+  margin-block-end: $spacing-07;
 }
 
 // safari rendering fix
 .#{$block-class}__svg-container svg.#{$block-class}__svg {
-  width: 100%;
+  inline-size: 100%;
 }
 
 // svg theme styles