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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-styles",
   "description": "Carbon for IBM Products styles",
-  "version": "2.55.0-rc.0",
+  "version": "2.56.0-rc.0",
   "license": "Apache-2.0",
   "installConfig": {
     "hoistingLimits": "none"
@@ -37,8 +37,8 @@
     "build": "run-s clean build-first build-all build-css-update-maps",
     "build-all": "run-p 'build:*'",
     "build-first": "copyfiles 'src/**/*.scss' scss -u 1",
-    "build:css-dev": "sass --style=expanded --load-path node_modules --load-path ../../node_modules scss:css",
-    "build:css-min": "sass --style=compressed --load-path node_modules --load-path ../../node_modules scss/index.scss:css/index.min.css scss/index-full-carbon.scss:css/index-full-carbon.min.css scss/index-without-carbon.scss:css/index-without-carbon.min.css scss/index-without-carbon-released-only.scss:css/index-without-carbon-released-only.min.css",
+    "build:css-dev": "sass -q --quiet-deps --style=expanded --load-path node_modules --load-path ../../node_modules scss:css",
+    "build:css-min": "sass -q --quiet-deps --style=compressed --load-path node_modules --load-path ../../node_modules scss/index.scss:css/index.min.css scss/index-full-carbon.scss:css/index-full-carbon.min.css scss/index-without-carbon.scss:css/index-without-carbon.min.css scss/index-without-carbon-released-only.scss:css/index-without-carbon-released-only.min.css",
     "build-css-update-maps": "node ../../scripts/updateSourceMaps.js",
     "clean": "rimraf css scss",
     "postinstall": "ibmtelemetry --config=telemetry.yml",
@@ -50,25 +50,25 @@
     "chalk": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
-    "glob": "^10.3.10",
+    "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.18.0-rc.0",
+    "jest-config-ibm-cloud-cognitive": "^1.19.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
-    "npm-check-updates": "^17.1.11",
+    "npm-check-updates": "^17.1.13",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^5.0.5",
-    "sass": "^1.80.6",
+    "rimraf": "^6.0.1",
+    "sass": "^1.83.4",
     "yargs": "^17.7.2"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.29.0",
-    "@carbon/layout": "^11.28.0",
+    "@carbon/grid": "^11.31.0",
+    "@carbon/layout": "^11.29.0",
     "@carbon/motion": "^11.24.0",
-    "@carbon/themes": "^11.43.0",
-    "@carbon/type": "^11.33.0"
+    "@carbon/themes": "^11.46.0",
+    "@carbon/type": "^11.35.0"
   },
   "dependencies": {
-    "@ibm/telemetry-js": "^1.5.0"
+    "@ibm/telemetry-js": "^1.8.0"
   },
-  "gitHead": "4fef191d8edeab2fd1bb5ecd379a12b79c043889"
+  "gitHead": "c6483ba5c87a8c7b18a79188205dd425f9a406cb"
 }

package/scss/components/APIKeyModal/_api-key-modal.scss

@@ -19,27 +19,27 @@ $block-class: #{c4p-settings.$pkg-prefix}--apikey-modal;
 }
 
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--inline-loading {
-  min-height: 3rem; // increasing the height from 2 to 3 resolves an issue where the scroll bar bounces
+  min-block-size: 3rem; // increasing the height from 2 to 3 resolves an issue where the scroll bar bounces
 }
 
 .#{$block-class} .#{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 {
   display: flex;
-  padding-right: calc(20% - #{$spacing-05});
-  margin-top: $spacing-03;
+  margin-block-start: $spacing-03;
+  padding-inline-end: calc(20% - #{$spacing-05});
 }
 
 .#{$block-class}__messaging-text {
   flex: 1;
-  margin-left: $spacing-03;
+  margin-inline-start: $spacing-03;
   @include type.type-style('label-01');
 }
 

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

@@ -8,8 +8,8 @@
 // APIKeyModal uses the following Carbon components:
 // ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput,
 // InlineLoading, Form, Button
-@use '@carbon/react/scss/components/modal';
-@use '@carbon/react/scss/components/text-input';
-@use '@carbon/react/scss/components/inline-loading';
-@use '@carbon/react/scss/components/form';
-@use '@carbon/react/scss/components/button';
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/text-input';
+@use '@carbon/styles/scss/components/inline-loading';
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/button';

package/scss/components/AboutModal/_about-modal.scss

@@ -26,8 +26,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
 
 .#{$block-class} .#{$block-class}__header {
   padding: 0 20% 0 $spacing-05;
-  margin-bottom: 0;
   grid-row: auto;
+  margin-block-end: 0;
 }
 
 .#{$block-class} .#{$block-class}__title {
@@ -40,27 +40,27 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
   @include type.type-style('body-compact-02');
 
   overflow: hidden auto;
-  min-height: $spacing-10;
   grid-row: auto;
+  min-block-size: $spacing-10;
   padding-block-start: 0;
   padding-inline: $spacing-05 20%;
 
   &:not(.#{c4p-settings.$carbon-prefix}--modal-scroll-content) {
-    margin-bottom: $spacing-06;
+    margin-block-end: $spacing-06;
     padding-block-end: 0;
   }
 }
 
 .#{$block-class}
   .#{c4p-settings.$carbon-prefix}--modal-content--overflow-indicator {
-  bottom: #{$spacing-06};
   background-image: linear-gradient(to bottom, #00000000, $layer-01);
+  inset-block-end: #{$spacing-06};
 }
 
 .#{$block-class} .#{$block-class}__links-container {
   @include type.type-style('body-compact-01');
 
-  margin-top: $spacing-06;
+  margin-block-start: $spacing-06;
 }
 
 .#{$block-class} .#{$block-class}__version {
@@ -68,32 +68,32 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
 }
 
 .#{$block-class} .#{$block-class}__links-container a + a {
-  padding-left: $spacing-03;
-  border-left: 1px solid $border-strong-01;
-  margin-left: $spacing-03;
+  border-inline-start: 1px solid $border-strong-01;
+  margin-inline-start: $spacing-03;
+  padding-inline-start: $spacing-03;
 }
 
 .#{$block-class} .#{$block-class}__content,
 .#{$block-class} .#{$block-class}__copyright-text {
   @include type.type-style('label-01');
 
-  margin-top: $spacing-06;
-  margin-bottom: 0;
   color: $text-secondary;
+
+  margin-block: $spacing-06 0;
 }
 
 .#{$block-class} .#{$block-class}__copyright-text {
-  margin-top: $spacing-05;
+  margin-block-start: $spacing-05;
 }
 
 p.c4p--about-modal__content:first-child,
 p.c4p--about-modal__copyright-text:first-child {
-  margin-top: $spacing-07;
+  margin-block-start: $spacing-07;
 }
 
 .#{$block-class} .#{$block-class}__footer {
   display: block;
-  height: auto;
   padding: $spacing-05;
   background-color: $layer-02;
+  block-size: auto;
 }

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

@@ -7,5 +7,5 @@
 
 // AboutModal uses the following Carbon components:
 // ComposedModal, ModalHeader, ModalFooter, ModalBody, Tabs, Tab
-@use '@carbon/react/scss/components/modal';
-@use '@carbon/react/scss/components/tabs';
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/tabs';

package/scss/components/ActionBar/_action-bar.scss

@@ -20,7 +20,7 @@ $block-class-overflow-items: #{$_block-class}-overflow-items;
 
   .#{$_block-class}__displayed-items {
     display: inline-flex;
-    width: 100%;
+    inline-size: 100%;
     white-space: nowrap;
   }
 
@@ -41,8 +41,8 @@ $block-class-overflow-items: #{$_block-class}-overflow-items;
 
   .#{$block-class-overflow-items}__item-content {
     display: flex;
-    width: 100%;
     justify-content: space-between;
+    inline-size: 100%;
   }
 
   .#{$block-class-overflow-items}__item svg {

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

@@ -7,5 +7,5 @@
 
 // ActionBar 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/ActionSet/_action-set.scss

@@ -29,9 +29,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   margin: 0;
 
   &.#{$action-set-block-class}__action-button--expressive {
-    height: $spacing-10;
-    padding-top: $spacing-05;
-    padding-bottom: $spacing-07;
+    block-size: $spacing-10;
+    padding-block: $spacing-05 $spacing-07;
   }
 }
 
@@ -39,12 +38,12 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   .#{$action-set-block-class}__action-button.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--expressive,
 .#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set
   .#{$action-set-block-class}__action-button.#{c4p-settings.$carbon-prefix}--btn {
-  max-width: none;
+  max-inline-size: none;
 }
 
 .#{$action-set-block-class}:not(.#{$action-set-block-class}--stacking)
   .#{$action-set-block-class}__action-button--ghost {
-  padding-left: $spacing-07;
+  padding-inline-start: $spacing-07;
 }
 
 // For row-single in medium,
@@ -107,9 +106,9 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   .#{$action-set-block-class}__action-button:not(
     .#{$action-set-block-class}__action-button--ghost
   ) {
-  /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
-  max-width: to-rem(232px);
   flex: 0 1 25%;
+  /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
+  max-inline-size: to-rem(232px);
 }
 
 .#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--row-quadruple
@@ -121,7 +120,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   .#{$action-set-block-class}__action-button
   .#{c4p-settings.$carbon-prefix}--inline-loading {
   position: absolute;
-  top: 0;
-  right: 0;
-  width: $spacing-07;
+  inline-size: $spacing-07;
+  inset-block-start: 0;
+  inset-inline-end: 0;
 }

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

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

package/scss/components/AddSelect/_add-select.scss

@@ -19,8 +19,8 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
 .#{$block-class}__header {
   padding: $spacing-05;
-  padding-bottom: 0;
-  border-top: 1px solid $layer-accent-01;
+  border-block-start: 1px solid $layer-accent-01;
+  padding-block-end: 0;
 }
 
 .#{$block-class}__body {
@@ -35,11 +35,11 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
   &-cell-wrapper {
     display: flex;
-    height: 3rem;
     align-items: center;
     justify-content: space-between;
     padding: 0 $spacing-05;
-    border-bottom: 1px solid $layer-accent-01;
+    block-size: 3rem;
+    border-block-end: 1px solid $layer-accent-01;
   }
 
   &-cell-title {
@@ -83,7 +83,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
   &-form-control-label-wrapper {
     display: flex;
-    margin-left: $spacing-05;
+    margin-inline-start: $spacing-05;
   }
 
   &-form-control-label-text {
@@ -92,20 +92,20 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   }
 
   &-cell-avatar {
-    margin-right: $spacing-03;
+    margin-inline-end: $spacing-03;
   }
 
   &-cell-icon {
-    margin-right: $spacing-03;
+    margin-inline-end: $spacing-03;
   }
 
   &-row {
-    border-left: 0.125rem solid transparent;
+    border-inline-start: 0.125rem solid transparent;
   }
 
   &-row-meta--selected {
-    border-left: 0.125rem solid $interactive;
     background-color: $layer-hover-01;
+    border-inline-start: 0.125rem solid $interactive;
   }
 }
 
@@ -142,7 +142,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 .#{$block-class}__sidebar-header {
   display: flex;
   padding: $spacing-07 $spacing-05 $spacing-03 $spacing-05;
-  border-bottom: 1px solid $layer-accent-01;
+  border-block-end: 1px solid $layer-accent-01;
 
   .#{$block-class}__sidebar-title {
     @include type.type-style('heading-compact-02');
@@ -150,7 +150,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 }
 
 .#{$block-class}__sidebar-title {
-  margin-right: $spacing-03;
+  margin-inline-end: $spacing-03;
 }
 
 .#{$block-class}__sidebar-selected-item {
@@ -172,14 +172,15 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 .#{$block-class} .#{$block-class}__sidebar-item-header {
   @include type.type-style('label-01');
 
-  margin-bottom: $spacing-03;
   color: $text-secondary;
+
+  margin-block-end: $spacing-03;
 }
 
 .#{$block-class} .#{$block-class}__sidebar-item-body {
   @include type.type-style('body-01');
 
-  margin-bottom: $spacing-05;
+  margin-block-end: $spacing-05;
 }
 
 .#{$block-class} .#{$block-class}__sidebar-item-remove-button:hover {
@@ -200,12 +201,16 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   flex-grow: 1;
   overflow-x: auto;
 
+  @supports (overflow-inline: auto) {
+    overflow-inline: auto;
+  }
+
   .#{$block-class}__selections-form-control-label-wrapper {
-    margin-left: $spacing-03;
+    margin-inline-start: $spacing-03;
   }
 
   .#{$block-class}__selections-row {
-    border-left: 0;
+    border-inline-start: 0;
   }
 
   .#{$block-class}__selections .#{$block-class}__selections-cell {
@@ -213,13 +218,13 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   }
 
   .#{$block-class}__selections-cell-wrapper {
-    height: 2rem;
     padding: 0 $spacing-03;
+    block-size: 2rem;
   }
 
   .#{$block-class}__tags {
     padding: 0 $spacing-03;
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 
   .#{$block-class}__selections-wrapper-multi {
@@ -233,15 +238,15 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
 .#{$block-class}__selections-row:first-child
   .#{$block-class}__selections-cell-wrapper {
-  border-top: 1px solid $border-subtle-01;
+  border-block-start: 1px solid $border-subtle-01;
 }
 
 .#{$block-class}__column {
   overflow: auto;
   flex: 0 0 20rem;
   padding: $spacing-05;
-  border-top: 1px solid $border-subtle-01;
-  border-right: 1px solid $border-subtle-01;
+  border-block-start: 1px solid $border-subtle-01;
+  border-inline-end: 1px solid $border-subtle-01;
 
   &-search-bar {
     display: flex;
@@ -256,7 +261,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   }
 
   .#{$carbon-prefix}--overflow-menu {
-    border-bottom: 1px solid $border-strong-01;
+    border-block-end: 1px solid $border-strong-01;
   }
 }
 
@@ -267,22 +272,21 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 .#{$block-class}__tags {
   display: flex;
   align-items: center;
-  margin-top: $spacing-05;
-  margin-bottom: $spacing-03;
+  margin-block: $spacing-05 $spacing-03;
 
   &-label {
-    margin-right: $spacing-03;
+    margin-inline-end: $spacing-03;
   }
 }
 
 .#{$block-class}__global-filter {
   position: absolute;
   z-index: 999999;
-  right: 0;
-  width: 100%;
-  max-width: 40rem;
   background: $layer-01;
   box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
+  inline-size: 100%;
+  inset-inline-end: 0;
+  max-inline-size: 40rem;
   transform: translate(0, 100%);
 
   &-search {
@@ -311,16 +315,16 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
 .#{$block-class}__global-filter-button-set
   button.#{$block-class}__global-filter-button {
-  max-width: none;
   flex: 1;
+  max-inline-size: none;
 }
 
 button.#{$block-class}__global-filter-toggle {
-  border-bottom-color: $border-strong-01;
   background: $field-01;
+  border-block-end-color: $border-strong-01;
 
   &--open {
-    border-bottom: $border-strong-01;
+    border-block-end: $border-strong-01;
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
   }
 }
@@ -333,11 +337,11 @@ button.#{$block-class}__global-filter-toggle {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: $spacing-05;
+    margin-block-end: $spacing-05;
   }
 
   &-entry {
-    margin-bottom: $spacing-05;
+    margin-block-end: $spacing-05;
   }
 }
 
@@ -356,7 +360,7 @@ button.#{$block-class}__global-filter-toggle {
 // overrides
 
 .#{$block-class}__selections .#{$carbon-prefix}--list-box__menu {
-  left: auto;
+  inset-inline-start: auto;
 }
 
 .#{$block-class}__tags .#{$carbon-prefix}--tag {
@@ -387,7 +391,7 @@ button.#{$block-class}__global-filter-toggle {
 .#{$block-class}.#{$block-class}__multi
   .#{$pkg-prefix}--action-set.#{$carbon-prefix}--btn-set.#{$pkg-prefix}--action-set--max
   .#{$pkg-prefix}--action-set__action-button {
-  max-width: 11.25rem;
+  max-inline-size: 11.25rem;
 }
 
 .#{$block-class} .#{$block-class}__items-label {
@@ -398,7 +402,7 @@ button.#{$block-class}__global-filter-toggle {
   .#{$carbon-prefix}--modal-container--sm
   .#{$carbon-prefix}--modal-content
   p {
-  padding-right: 0;
+  padding-inline-end: 0;
 }
 
 .#{$block-class} .#{$carbon-prefix}--radio-button__appearance {
@@ -426,8 +430,8 @@ button.#{$block-class}__global-filter-toggle {
 }
 
 .#{$block-class}__multi .#{$pkg-prefix}--empty-state {
-  max-width: 16rem;
-  margin-top: $spacing-09;
+  margin-block-start: $spacing-09;
+  max-inline-size: 16rem;
 }
 
 .#{$block-class} .#{$carbon-prefix}--accordion__arrow {
@@ -455,9 +459,8 @@ button.#{$block-class}__global-filter-toggle {
 .#{$block-class}
   .#{$carbon-prefix}--accordion__item--active
   .#{$carbon-prefix}--accordion__content {
-  padding-top: 0;
-  padding-bottom: 0;
-  margin-top: $spacing-03;
+  margin-block-start: $spacing-03;
+  padding-block: 0;
 }
 
 .#{$block-class} + div .#{$carbon-prefix}--tooltip,

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

@@ -7,13 +7,13 @@
 
 // AddSelect uses the following Carbon components:
 // Button, OverflowMenu, OverflowMenuItem
-@use '@carbon/react/scss/components/accordion';
-@use '@carbon/react/scss/components/breadcrumb';
-@use '@carbon/react/scss/components/button';
-@use '@carbon/react/scss/components/check-box';
-@use '@carbon/react/scss/components/dropdown';
-@use '@carbon/react/scss/components/overflow-menu';
-@use '@carbon/react/scss/components/radio-button';
-@use '@carbon/react/scss/components/tag';
-@use '@carbon/react/scss/components/text-input';
-@use '@carbon/react/scss/components/structured-list';
+@use '@carbon/styles/scss/components/accordion';
+@use '@carbon/styles/scss/components/breadcrumb';
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/check-box';
+@use '@carbon/styles/scss/components/dropdown';
+@use '@carbon/styles/scss/components/overflow-menu';
+@use '@carbon/styles/scss/components/radio-button';
+@use '@carbon/styles/scss/components/tag';
+@use '@carbon/styles/scss/components/text-input';
+@use '@carbon/styles/scss/components/structured-list';