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

package/scss/components/BigNumbers/_big-numbers.scss

@@ -10,13 +10,13 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '../../global/styles/mixins';
-@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/utilities';
 
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
 // or
-// TODO: @use '@carbon/react/scss/grid';
+// TODO: @use '@carbon/styles/scss/grid';
 // BigNumbers uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by BigNumbers
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -34,7 +34,7 @@ $skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-numbers-skeleton;
 .#{$block-class}__value {
   @include type-style('heading-04');
 
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 .#{$block-class}__total {
@@ -43,8 +43,7 @@ $skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-numbers-skeleton;
 
 .#{$block-class}__total,
 .#{$block-class}__percentage-mark {
-  margin-top: auto;
-  margin-bottom: $spacing-02;
+  margin-block: auto $spacing-02;
 }
 
 .#{$block-class}__info {
@@ -52,7 +51,7 @@ $skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-numbers-skeleton;
 }
 
 .#{$block-class}__trend {
-  margin-top: $spacing-03;
+  margin-block-start: $spacing-03;
   vertical-align: top;
 }
 
@@ -61,7 +60,7 @@ $skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-numbers-skeleton;
 }
 
 .#{$block-class}__info {
-  padding-left: $spacing-03;
+  padding-inline-start: $spacing-03;
 }
 
 .#{$block-class}__percentage {
@@ -72,6 +71,10 @@ $skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-numbers-skeleton;
   @include type-style('body-compact-01');
 }
 
+.#{$block-class}__icon-button {
+  margin-inline-start: $spacing-02;
+}
+
 .#{$block-class}--lg .#{$block-class}__value,
 .#{$block-class}--lg .#{$block-class}__percentage {
   @include type-style('heading-06');
@@ -97,53 +100,56 @@ $skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-numbers-skeleton;
 }
 
 .#{$block-class}--xl .#{$block-class}__trend {
-  margin-top: $spacing-04;
+  margin-block-start: $spacing-04;
 }
 
+//
+// Skeleton
+//
+
 .#{$skeleton-block-class} {
-  width: 4rem;
+  inline-size: 4rem;
 }
 
 .#{$skeleton-block-class}__label {
-  height: $spacing-04;
-  margin-top: 0;
-  margin-bottom: $spacing-03;
+  block-size: $spacing-04;
+  margin-block: 0 $spacing-03;
 }
 
 .#{$skeleton-block-class}__value {
-  /* stylelint-disable-next-line declaration-no-important */
-  height: $spacing-08 !important;
   margin: 0;
+  /* stylelint-disable-next-line declaration-no-important */
+  block-size: $spacing-08 !important;
 }
 
 .#{$skeleton-block-class}--lg {
-  width: 5rem;
+  inline-size: 5rem;
 }
 
 .#{$skeleton-block-class}--xl {
-  width: 6rem;
+  inline-size: 6rem;
 }
 
 .#{$skeleton-block-class}.#{$skeleton-block-class}--lg
   .#{$skeleton-block-class}__label {
-  height: $spacing-04;
+  block-size: $spacing-04;
 }
 
 .#{$skeleton-block-class}.#{$skeleton-block-class}--lg
   .#{$skeleton-block-class}__value {
   /* stylelint-disable-next-line declaration-no-important */
-  height: $spacing-09 !important;
+  block-size: $spacing-09 !important;
 }
 
 .#{$skeleton-block-class}.#{$skeleton-block-class}--xl
   .#{$skeleton-block-class}__label {
-  height: $spacing-04;
+  block-size: $spacing-04;
 }
 
 .#{$skeleton-block-class}.#{$skeleton-block-class}--xl
   .#{$skeleton-block-class}__value {
   /* stylelint-disable-next-line declaration-no-important */
-  height: $spacing-10 !important;
+  block-size: $spacing-10 !important;
 }
 
 .#{$block-class} .#{$block-class}__tooltip-trigger:focus {

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

@@ -7,5 +7,5 @@
 
 // Import any Carbon component styles used from BigNumbers in this file.
 // BigNumbers uses the following Carbon components:
-@use '@carbon/react/scss/components/skeleton-styles';
-@use '@carbon/react/scss/components/tooltip';
+@use '@carbon/styles/scss/components/skeleton-styles';
+@use '@carbon/styles/scss/components/tooltip';

package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss

@@ -22,20 +22,20 @@ $_block-class: #{c4p-settings.$pkg-prefix}--breadcrumb-with-overflow;
   .#{$_block-class}__space {
     position: relative;
     display: block;
-    width: 100%;
+    inline-size: 100%;
     white-space: nowrap;
   }
 
   .#{$_block-class}__breadcrumb-container.#{$_block-class}__breadcrumb-container-with-items {
     display: inline-flex; // needed to register a width
-    width: 100%;
+    inline-size: 100%;
   }
 
   .#{$_block-class}__breadcrumb-container
     .#{c4p-settings.$carbon-prefix}--breadcrumb {
-    width: 100%;
     flex-wrap: nowrap;
     align-items: flex-start;
+    inline-size: 100%;
   }
 
   .#{$_block-class}__breadcrumb-container--hidden {
@@ -48,8 +48,8 @@ $_block-class: #{c4p-settings.$pkg-prefix}--breadcrumb-with-overflow;
   }
 
   .#{$_block-class}__back__button.#{c4p-settings.$carbon-prefix}--btn {
-    min-height: revert;
     padding: 0;
+    min-block-size: revert;
   }
 
   .#{$_block-class}__back__button.#{c4p-settings.$carbon-prefix}--btn--ghost:hover {
@@ -68,7 +68,9 @@ $_block-class: #{c4p-settings.$pkg-prefix}--breadcrumb-with-overflow;
     }
 
     .#{$_block-class}__displayed-breadcrumb:last-child {
-      max-width: calc(100% - $spacing-07); // allow room for breadcrumb back
+      max-inline-size: calc(
+        100% - $spacing-07
+      ); // allow room for breadcrumb back
     }
   }
 
@@ -85,7 +87,7 @@ $_block-class: #{c4p-settings.$pkg-prefix}--breadcrumb-with-overflow;
     .#{c4p-settings.$carbon-prefix}--link {
     display: inline-block;
     overflow: hidden;
-    width: 100%;
+    inline-size: 100%;
     text-overflow: ellipsis;
   }
 }

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

@@ -7,6 +7,6 @@
 
 // BreadcrumbWithOverflow uses the following Carbon components:
 // Breadcrumb, BreadcrumbItem, OverflowMenu, OverflowMenuItem, IconButton
-@use '@carbon/react/scss/components/breadcrumb';
-@use '@carbon/react/scss/components/overflow-menu';
-@use '@carbon/react/scss/components/button';
+@use '@carbon/styles/scss/components/breadcrumb';
+@use '@carbon/styles/scss/components/overflow-menu';
+@use '@carbon/styles/scss/components/button';

package/scss/components/ButtonMenu/_button-menu.scss

@@ -9,7 +9,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/button/tokens' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
-@use '@carbon/react/scss/theme' as *;
+@use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type';
 
 // TODO: @use(s) of Carbon settings and component styles and other
@@ -19,7 +19,7 @@
 $block-class: #{c4p-settings.$pkg-prefix}--button-menu;
 
 .#{$block-class} {
-  min-width: 160px;
+  min-inline-size: 160px;
   &.#{$block-class}__wrapper--primary,
   &.#{$block-class}__wrapper--primary.#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
     background-color: $button-primary;
@@ -48,10 +48,10 @@ $block-class: #{c4p-settings.$pkg-prefix}--button-menu;
     @include type.type-style('body-compact-01');
 
     display: flex;
-    width: 100%;
     align-items: center;
     justify-content: space-between;
     padding: 0 $spacing-05;
+    inline-size: 100%;
   }
 }
 

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

@@ -5,5 +5,5 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/react/scss/components/button';
-@use '@carbon/react/scss/components/overflow-menu';
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/overflow-menu';

package/scss/components/ButtonSetWithOverflow/_button-set-with-overflow.scss

@@ -17,13 +17,13 @@ $_block-class: #{c4p-settings.$pkg-prefix}--button-set-with-overflow;
 @include block-wrap($_block-class) {
   &.#{$_block-class} {
     display: flex;
-    width: 100%;
+    inline-size: 100%;
   }
 
   .#{$_block-class}__space {
     position: relative;
     display: block;
-    width: 100%;
+    inline-size: 100%;
     white-space: nowrap;
   }
 

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

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

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

@@ -7,5 +7,5 @@
 
 // Card uses the following Carbon components:
 // Button, OverflowMenu, OverflowMenuItem
-@use '@carbon/react/scss/components/button';
-@use '@carbon/react/scss/components/overflow-menu';
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/overflow-menu';

package/scss/components/Card/_card.scss

@@ -49,25 +49,25 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 
 .#{$block-class}__media-left .#{$block-class}__footer {
   align-self: flex-end;
-  margin-top: auto;
+  margin-block-start: auto;
 }
 
 .#{$block-class}__media > * {
   display: block;
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 .#{$block-class}__header {
   padding: $spacing-05;
-  padding-right: 0; // makes for consistent slug position across productive and expressive
+  padding-inline-end: 0; // makes for consistent slug position across productive and expressive
 }
 
 .#{$block-class}__header-label-only {
-  padding-bottom: $spacing-03;
+  padding-block-end: $spacing-03;
 }
 
 .#{$block-class}__header-label-only .#{$block-class}__label {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 .#{$block-class}__header-container {
@@ -80,20 +80,20 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 .#{$block-class}__label {
   @include type-style('label-01');
 
-  margin-bottom: $spacing-01;
+  margin-block-end: $spacing-01;
 }
 
 .#{$block-class}__description {
   @include type-style('label-01');
 
-  margin-top: $spacing-01;
+  margin-block-start: $spacing-01;
 }
 
 .#{$block-class}__body {
   @include type-style('body-compact-01');
 
   padding: $spacing-05;
-  padding-top: 0;
+  padding-block-start: 0;
 }
 
 .#{$block-class}__footer {
@@ -126,12 +126,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 }
 
 .#{$block-class}__pictogram {
-  padding-top: $spacing-05;
-  padding-left: $spacing-05;
+  padding-block-start: $spacing-05;
+  padding-inline-start: $spacing-05;
 }
 
 .#{$block-class}__header-container--has-actions {
-  padding-right: $spacing-03;
+  padding-inline-end: $spacing-03;
 }
 
 // +++ adjustments for slug
@@ -147,37 +147,37 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--slug,
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--ai-label {
   position: absolute;
-  top: $spacing-05;
-  right: $spacing-05;
+  inset-block-start: $spacing-05;
+  inset-inline-end: $spacing-05;
 }
 
 .#{$block-class}__header__inner-wrapper--decorator {
   position: absolute;
-  top: $spacing-05;
-  right: $spacing-05;
+  inset-block-start: $spacing-05;
+  inset-inline-end: $spacing-05;
 
   .#{c4p-settings.$carbon-prefix}--slug,
   .#{c4p-settings.$carbon-prefix}--ai-label {
     position: relative;
-    top: unset;
-    right: unset;
+    inset-block-start: unset;
+    inset-inline-end: unset;
   }
 }
 
 .#{$block-class}__header-container--has-slug,
 .#{$block-class}__header-container--has-decorator {
-  width: 100%;
-  padding-right: $spacing-07;
+  inline-size: 100%;
+  padding-inline-end: $spacing-07;
 }
 
 .#{$block-class}__header-container--has-slug.#{$block-class}__header-container--has-actions,
 .#{$block-class}__header-container--has-decorator.#{$block-class}__header-container--has-actions {
-  padding-right: $spacing-08;
+  padding-inline-end: $spacing-08;
 }
 
 .#{$block-class}__header-container--has-slug.#{$block-class}__header-container--large-tile-or-label,
 .#{$block-class}__header-container--has-decorator.#{$block-class}__header-container--large-tile-or-label {
-  padding-right: $spacing-09;
+  padding-inline-end: $spacing-09;
 }
 
 .#{$block-class}__clickable {
@@ -194,7 +194,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   @include utilities.ai-popover-gradient('default', 0, 'layer');
 
   border: 1px solid transparent;
-  box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+  box-shadow:
+    inset 0 -80px 70px -65px $ai-inner-shadow,
     0 4px 10px 2px $ai-drop-shadow;
 }
 

package/scss/components/Carousel/_carousel.scss

@@ -7,7 +7,7 @@
 
 // Standard imports.
 @use '@carbon/layout/scss/convert' as *;
-@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/colors' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
@@ -33,18 +33,17 @@ $block-class: #{c4p-settings.$pkg-prefix}--carousel;
 .#{$block-class}__elements-container--scroll-max {
   position: absolute;
   z-index: 1;
-  top: 0;
-  bottom: 0;
-  width: $spacing-07;
+  inline-size: $spacing-07;
+  inset-block: 0;
   pointer-events: none;
 }
 
 .#{$block-class}__elements-container--scrolled {
-  left: 0;
+  inset-inline-start: 0;
 }
 
 .#{$block-class}__elements-container--scroll-max {
-  right: 0;
+  inset-inline-end: 0;
 }
 
 .#{$block-class}__elements {

package/scss/components/Cascade/_cascade.scss

@@ -6,8 +6,8 @@
 //
 
 // Standard imports.
-@use '@carbon/react/scss/grid' as *;
-@use '@carbon/react/scss/motion' as *;
+@use '@carbon/styles/scss/grid' as *;
+@use '@carbon/styles/scss/motion' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
 
 $block-class: #{c4p-settings.$pkg-prefix}--cascade;

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

@@ -8,4 +8,4 @@
 // Checklist uses the following Carbon components:
 // Button, IconButton
 
-@use '@carbon/react/scss/components/button';
+@use '@carbon/styles/scss/components/button';

package/scss/components/Checklist/_checklist.scss

@@ -27,30 +27,30 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 .#{$block-class}__header {
   display: flex;
   padding: $spacing-05;
-  border-bottom: 1px solid $border-subtle-01;
   background-color: $layer-01;
+  border-block-end: 1px solid $border-subtle-01;
   gap: $spacing-03;
 }
 
 .#{$block-class}__chart {
   // outer donut
   position: relative;
-  width: $spacing-08;
-  min-width: $spacing-08;
-  height: $spacing-08;
   align-self: center;
+  block-size: $spacing-08;
+  inline-size: $spacing-08;
+  min-inline-size: $spacing-08;
 }
 
 .#{$block-class}__chart::after {
   // inner donut
   position: absolute;
-  top: $spacing-02;
-  left: $spacing-02;
-  width: $spacing-07;
-  height: $spacing-07;
   border-radius: 50%;
   background-color: $layer-01;
+  block-size: $spacing-07;
   content: '';
+  inline-size: $spacing-07;
+  inset-block-start: $spacing-02;
+  inset-inline-start: $spacing-02;
 }
 
 // Align __title and __chart-label vertically centered in the header.
@@ -73,7 +73,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 }
 
 .#{$block-class}__title + .#{$block-class}__chart-label {
-  margin-top: $spacing-01;
+  margin-block-start: $spacing-01;
 }
 
 // TOGGLE
@@ -81,10 +81,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 // which do not accept any class names passed via the <IconButton>.
 // So, we have to refer to it via it's "tooltip" wrapper element. :/
 .#{$block-class}__header .#{c4p-settings.$carbon-prefix}--tooltip {
-  height: 2rem;
-  margin-top: calc(-1 * $spacing-03);
-  margin-right: calc(-1 * $spacing-03);
-  margin-left: auto;
+  block-size: 2rem;
+  margin-block-start: calc(-1 * $spacing-03);
+  margin-inline: auto calc(-1 * $spacing-03);
 }
 
 .#{$block-class}__chevron {
@@ -107,9 +106,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 // "Unset" some settings to allow an inner div to enable multiple lines and an ellipsis if req'd.
 .#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary {
   @include type-style('body-short-01');
-
-  max-width: none;
-  min-height: auto;
   // override bx--btn to allow two-line ellipsis
   /* stylelint-disable-next-line declaration-property-value-disallowed-list */
   flex-shrink: unset;
@@ -117,6 +113,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
   border: none;
   background-color: transparent;
   color: $link-primary;
+
+  max-inline-size: none;
+  min-block-size: auto;
 }
 // The CSS for the Carbon button's label is incompatible with two-line ellipsis,
 // but a div inside a Carbon button works.
@@ -142,8 +141,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 }
 
 .#{$block-class}__content-inner {
-  height: 100%;
   background-color: $layer-01;
+  block-size: 100%;
   transform: translate(0, 0);
   transition: all $duration-fast-02 motion(standard, productive);
 
@@ -154,32 +153,32 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 }
 
 .#{$block-class}__closed .#{$block-class}__content-inner {
-  height: 0;
+  block-size: 0;
   transform: translate(0, -100%);
 }
 
 .#{$block-class}__list-group {
   padding: $spacing-05;
-  border-top: 1px solid $border-subtle-01;
+  border-block-start: 1px solid $border-subtle-01;
 }
 .#{$block-class}__list-group:first-of-type {
-  border-top: none;
+  border-block-start: none;
 }
 
 .#{$block-class}__list-title {
   @include type-style('body-short-01');
   @include ellipsis-2-lines();
 
-  margin-bottom: $spacing-03;
+  margin-block-end: $spacing-03;
 }
 
 .#{$block-class}__list-item {
   display: flex;
-  margin-bottom: $spacing-03;
+  margin-block-end: $spacing-03;
 }
 
 .#{$block-class}__list-item:last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 .#{$block-class}__icon {
@@ -214,5 +213,5 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
   @include ellipsis-2-lines();
 
   padding: $spacing-03 $spacing-05;
-  border-top: 1px solid $border-subtle-01;
+  border-block-start: 1px solid $border-subtle-01;
 }

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

@@ -7,4 +7,4 @@
 
 // Import any Carbon component styles used from Coachmark in this file.
 // Coachmark uses the following Carbon components:
-@use '@carbon/react/scss/components/button';
+@use '@carbon/styles/scss/components/button';

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

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