@carbon/styles 1.37.0 → 1.38.0-rc.0

package/scss/components/progress-indicator/_progress-indicator.scss

@@ -39,9 +39,9 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     position: relative;
     display: inline-flex;
     overflow: visible;
-    width: convert.to-rem(128px);
-    min-width: 7rem;
     flex-direction: row;
+    inline-size: convert.to-rem(128px);
+    min-inline-size: 7rem;
 
     .#{$prefix}--tooltip__label {
       display: block;
@@ -49,32 +49,33 @@ $progress-indicator-bar-width: 1px inset transparent !default;
   }
 
   .#{$prefix}--progress--space-equal .#{$prefix}--progress-step {
-    min-width: 8rem;
     flex-grow: 1;
+    min-inline-size: 8rem;
   }
 
   .#{$prefix}--progress-line {
     position: absolute;
-    left: 0;
-    width: convert.to-rem(128px);
-    height: 2px;
     border: $progress-indicator-bar-width;
+    block-size: 2px;
+    inline-size: convert.to-rem(128px);
+    inset-inline-start: 0;
   }
 
   .#{$prefix}--progress--space-equal .#{$prefix}--progress-line {
-    width: 100%;
-    min-width: convert.to-rem(128px);
+    inline-size: 100%;
+    min-inline-size: convert.to-rem(128px);
   }
 
   .#{$prefix}--progress-step svg {
     position: relative;
     z-index: 1;
-    width: $spacing-05;
-    height: $spacing-05;
     flex-shrink: 0;
-    margin: convert.to-rem(10px) $spacing-03 0 0;
+    block-size: $spacing-05;
     border-radius: 50%;
     fill: $interactive;
+    inline-size: $spacing-05;
+    margin-block-start: convert.to-rem(10px);
+    margin-inline-end: $spacing-03;
   }
 
   .#{$prefix}--progress--space-equal .#{$prefix}--progress-text {
@@ -85,10 +86,10 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     @include type-style('body-compact-01');
 
     overflow: hidden;
-    max-width: convert.to-rem(88px);
     margin: $spacing-03 0 0 0;
     color: $text-primary;
     line-height: 1.45;
+    max-inline-size: convert.to-rem(88px);
     text-overflow: ellipsis;
     transition: box-shadow $duration-fast-02 motion(standard, productive),
       color $duration-fast-02 motion(standard, productive);
@@ -107,8 +108,8 @@ $progress-indicator-bar-width: 1px inset transparent !default;
   }
 
   .#{$prefix}--progress--space-equal .#{$prefix}--progress-label {
-    max-width: 100%;
-    margin-right: 0.75rem;
+    margin-inline-end: 0.75rem;
+    max-inline-size: 100%;
   }
 
   .#{$prefix}--progress-step-button:not(
@@ -134,7 +135,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
   }
 
   .#{$prefix}--progress-step .#{$prefix}--tooltip .#{$prefix}--tooltip__caret {
-    margin-left: convert.to-rem(10px);
+    margin-inline-start: convert.to-rem(10px);
   }
 
   .#{$prefix}--tooltip__text {
@@ -148,14 +149,14 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     @include type-style('body-01');
 
     display: block;
-    width: convert.to-rem(125px);
-
-    min-width: convert.to-rem(115px);
-    min-height: $spacing-06;
     padding: $spacing-03 $spacing-05;
-    margin-top: convert.to-rem(40px);
-    margin-left: convert.to-rem(22px);
     color: $text-inverse;
+    inline-size: convert.to-rem(125px);
+    margin-block-start: convert.to-rem(40px);
+    margin-inline-start: convert.to-rem(22px);
+    min-block-size: $spacing-06;
+
+    min-inline-size: convert.to-rem(115px);
     visibility: hidden;
   }
 
@@ -163,9 +164,10 @@ $progress-indicator-bar-width: 1px inset transparent !default;
   .#{$prefix}--progress-step .#{$prefix}--tooltip_multi {
     @include type-style('body-01');
 
-    width: convert.to-rem(150px);
-    height: auto;
+    block-size: auto;
     color: $text-inverse;
+
+    inline-size: convert.to-rem(150px);
   }
 
   //OPTIONAL HELPER TEXT STYLING
@@ -173,10 +175,10 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     @include type-style('label-01');
 
     position: absolute;
-    left: 0;
-    margin-top: convert.to-rem(28px);
-    margin-left: $spacing-06;
     color: $text-secondary;
+    inset-inline-start: 0;
+    margin-block-start: convert.to-rem(28px);
+    margin-inline-start: $spacing-06;
     text-align: start;
   }
 
@@ -210,7 +212,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     @include button-reset.reset;
 
     display: flex;
-    text-align: left;
+    text-align: start;
   }
 
   //unclickable button
@@ -270,14 +272,16 @@ $progress-indicator-bar-width: 1px inset transparent !default;
   .#{$prefix}--progress.#{$prefix}--skeleton .#{$prefix}--progress-label {
     @include skeleton;
 
-    width: convert.to-rem(40px);
-    height: convert.to-rem(14px);
-    margin-top: 0.625rem;
+    block-size: convert.to-rem(14px);
+
+    inline-size: convert.to-rem(40px);
+
+    margin-block-start: 0.625rem;
   }
 
   .#{$prefix}--progress.#{$prefix}--progress--vertical.#{$prefix}--skeleton
     .#{$prefix}--progress-label {
-    margin-top: 0.0625rem;
+    margin-block-start: 0.0625rem;
   }
 
   // Vertical Variant
@@ -295,10 +299,10 @@ $progress-indicator-bar-width: 1px inset transparent !default;
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step,
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button {
-    width: initial;
-    min-width: initial;
-    min-height: 3.625rem;
     align-content: flex-start;
+    inline-size: initial;
+    min-block-size: 3.625rem;
+    min-inline-size: initial;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step svg,
@@ -310,9 +314,9 @@ $progress-indicator-bar-width: 1px inset transparent !default;
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-label {
     display: inline-block;
-    width: initial;
-    max-width: convert.to-rem(160px);
     margin: 0;
+    inline-size: initial;
+    max-inline-size: convert.to-rem(160px);
     vertical-align: top;
     white-space: initial;
   }
@@ -320,20 +324,20 @@ $progress-indicator-bar-width: 1px inset transparent !default;
   .#{$prefix}--progress--vertical
     .#{$prefix}--progress-step
     .#{$prefix}--tooltip {
-    margin-top: 0.5rem;
+    margin-block-start: 0.5rem;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-optional {
     position: static;
-    width: 100%;
     margin: auto 0;
+    inline-size: 100%;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-line {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 1px;
-    height: 100%;
+    block-size: 100%;
+    inline-size: 1px;
+    inset-block-start: 0;
+    inset-inline-start: 0;
   }
 }

package/scss/components/radio-button/_radio-button.scss

@@ -41,7 +41,7 @@ $radio-border-width: 1px !default;
 
   // Remove spacing above collection of radio buttons if label is present
   .#{$prefix}--label + .#{$prefix}--form-item .#{$prefix}--radio-button-group {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 
   // vertical radio button
@@ -54,12 +54,12 @@ $radio-border-width: 1px !default;
     }
 
     .#{$prefix}--radio-button__label {
-      margin-right: 0;
       line-height: 1.25;
+      margin-inline-end: 0;
     }
 
     .#{$prefix}--radio-button__label:not(:last-of-type) {
-      margin-bottom: $spacing-03;
+      margin-block-end: $spacing-03;
     }
   }
 
@@ -74,21 +74,21 @@ $radio-border-width: 1px !default;
 
     display: flex;
     align-items: center;
-    margin-right: $spacing-05;
     cursor: pointer;
+    margin-inline-end: $spacing-05;
   }
 
   .#{$prefix}--radio-button__appearance {
     @include reset;
 
-    width: convert.to-rem(18px);
-    height: convert.to-rem(18px);
     flex-shrink: 0;
     border: $radio-border-width solid $icon-primary;
-    margin: convert.to-rem(1px) $spacing-03 convert.to-rem(2px)
-      convert.to-rem(2px);
     background-color: transparent;
+    block-size: convert.to-rem(18px);
     border-radius: 50%;
+    inline-size: convert.to-rem(18px);
+    margin-block: convert.to-rem(1px) convert.to-rem(2px);
+    margin-inline: convert.to-rem(2px) $spacing-03;
   }
 
   .#{$prefix}--radio-button:checked
@@ -102,11 +102,11 @@ $radio-border-width: 1px !default;
     &::before {
       position: relative;
       display: inline-block;
-      width: 100%;
-      height: 100%;
       background-color: $icon-primary;
+      block-size: 100%;
       border-radius: 50%;
       content: '';
+      inline-size: 100%;
       transform: scale(0.5);
 
       // Allow the selected button to be seen in Windows HCM for IE/Edge
@@ -164,12 +164,12 @@ $radio-border-width: 1px !default;
   .#{$prefix}--radio-button__validation-msg {
     display: none;
     align-items: flex-end;
-    margin-top: convert.to-rem(6px);
+    margin-block-start: convert.to-rem(6px);
   }
 
   .#{$prefix}--radio-button__invalid-icon {
-    margin: 0 convert.to-rem(1px) 0 convert.to-rem(3px);
     fill: $support-error;
+    margin-inline: convert.to-rem(3px) convert.to-rem(1px);
   }
 
   .#{$prefix}--radio-button__invalid-icon--warning {
@@ -195,9 +195,9 @@ $radio-border-width: 1px !default;
     .#{$prefix}--form-requirement {
     display: block;
     overflow: visible;
-    max-height: 100%;
-    margin-top: 0;
-    margin-left: $spacing-03;
+    margin-block-start: 0;
+    margin-inline-start: $spacing-03;
+    max-block-size: 100%;
   }
 
   .#{$prefix}--radio-button-group--invalid
@@ -207,7 +207,7 @@ $radio-border-width: 1px !default;
   }
 
   .#{$prefix}--radio-button-group ~ .#{$prefix}--form__helper-text {
-    margin-top: convert.to-rem(6px);
+    margin-block-start: convert.to-rem(6px);
   }
 
   // Focus
@@ -223,8 +223,9 @@ $radio-border-width: 1px !default;
   .#{$prefix}--radio-button__label.#{$prefix}--skeleton {
     @include skeleton;
 
-    width: convert.to-rem(100px);
-    height: convert.to-rem(18px);
+    block-size: convert.to-rem(18px);
+
+    inline-size: convert.to-rem(100px);
   }
 
   .#{$prefix}--radio-button__label.#{$prefix}--skeleton
@@ -240,13 +241,13 @@ $radio-border-width: 1px !default;
   }
 
   .#{$prefix}--radio-button-wrapper:not(:last-of-type) {
-    margin-right: $spacing-05;
+    margin-inline-end: $spacing-05;
   }
 
   .#{$prefix}--radio-button-group--vertical
     .#{$prefix}--radio-button-wrapper:not(:last-of-type) {
-    margin-right: 0;
-    margin-bottom: $spacing-03;
+    margin-block-end: $spacing-03;
+    margin-inline-end: 0;
   }
 
   .#{$prefix}--radio-button-group--label-right .#{$prefix}--radio-button__label,
@@ -265,7 +266,7 @@ $radio-border-width: 1px !default;
     .#{$prefix}--radio-button__appearance,
   .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left
     .#{$prefix}--radio-button__appearance {
-    margin-right: 0;
-    margin-left: $spacing-03;
+    margin-inline-end: 0;
+    margin-inline-start: $spacing-03;
   }
 }

package/scss/components/search/_search.scss

@@ -31,8 +31,8 @@
   .#{$prefix}--search {
     position: relative;
     display: flex;
-    width: 100%;
     align-items: center;
+    inline-size: 100%;
   }
 
   .#{$prefix}--search .#{$prefix}--label {
@@ -44,14 +44,15 @@
     @include type.type-style('body-compact-01');
     @include focus-outline('reset');
 
-    width: 100%;
     order: 1;
     padding: 0 $spacing-08;
     border: none;
-    border-bottom: 1px solid $border-strong;
     appearance: none;
     background-color: $field;
+    border-block-end: 1px solid $border-strong;
     color: $text-primary;
+
+    inline-size: 100%;
     text-overflow: ellipsis;
     transition: background-color $duration-fast-02 motion(standard, productive),
       outline $duration-fast-02 motion(standard, productive);
@@ -70,8 +71,8 @@
   }
 
   .#{$prefix}--search-input[disabled] {
-    border-bottom: 1px solid transparent;
     background-color: $field;
+    border-block-end: 1px solid transparent;
     color: $text-disabled;
     cursor: not-allowed;
 
@@ -91,35 +92,35 @@
   .#{$prefix}--search--sm .#{$prefix}--search-input,
   .#{$prefix}--search--sm.#{$prefix}--search--expandable.#{$prefix}--search--expanded
     .#{$prefix}--search-input {
-    height: convert.to-rem(32px);
     // 8px padding on either side of icon + 16px icon (32px)
     padding: 0 $spacing-07;
+    block-size: convert.to-rem(32px);
   }
 
   .#{$prefix}--search--sm .#{$prefix}--search-magnifier-icon {
-    left: convert.to-rem(8px);
+    inset-inline-start: convert.to-rem(8px);
   }
 
   // Medium styles
   .#{$prefix}--search--md .#{$prefix}--search-input,
   .#{$prefix}--search--md.#{$prefix}--search--expandable.#{$prefix}--search--expanded
     .#{$prefix}--search-input {
-    height: convert.to-rem(40px);
     // 12px padding on either side of icon + 16px icon (40px)
     padding: 0 $spacing-08;
+    block-size: convert.to-rem(40px);
   }
 
   .#{$prefix}--search--md .#{$prefix}--search-magnifier-icon {
-    left: convert.to-rem(12px);
+    inset-inline-start: convert.to-rem(12px);
   }
 
   // Large styles
   .#{$prefix}--search--lg .#{$prefix}--search-input,
   .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded
     .#{$prefix}--search-input {
-    height: convert.to-rem(48px);
     // 16px padding on either side of icon + 16px icon (48px)
     padding: 0 $spacing-09;
+    block-size: convert.to-rem(48px);
   }
 
   .#{$prefix}--search-magnifier-icon {
@@ -127,11 +128,11 @@
 
     position: absolute;
     z-index: 2;
-    top: 50%;
-    left: $spacing-05;
-    width: convert.to-rem(16px);
-    height: convert.to-rem(16px);
+    block-size: convert.to-rem(16px);
     fill: $icon-secondary;
+    inline-size: convert.to-rem(16px);
+    inset-block-start: 50%;
+    inset-inline-start: $spacing-05;
     pointer-events: none;
     transform: translateY(-50%);
   }
@@ -141,18 +142,18 @@
     @include focus-outline('reset');
 
     position: absolute;
-    top: 0;
-    right: 0;
+    inset-block-start: 0;
+    inset-inline-end: 0;
 
     &::before {
       position: absolute;
-      top: convert.to-rem(1px);
-      left: 0;
       display: block;
-      width: 2px;
-      height: calc(100% - 2px);
       background-color: $field;
+      block-size: calc(100% - 2px);
       content: '';
+      inline-size: 2px;
+      inset-block-start: convert.to-rem(1px);
+      inset-inline-start: 0;
       transition: background-color $duration-fast-02
         motion(standard, productive);
 
@@ -162,7 +163,7 @@
     }
 
     &:hover {
-      border-bottom: 1px solid $border-strong;
+      border-block-end: 1px solid $border-strong;
 
       &::before {
         background-color: $field-hover;
@@ -172,8 +173,8 @@
 
   .#{$prefix}--search-button {
     flex-shrink: 0;
-    margin-left: $spacing-01;
     background-color: $field;
+    margin-inline-start: $spacing-01;
 
     svg {
       fill: currentColor;
@@ -188,15 +189,15 @@
   .#{$prefix}--search-close,
   .#{$prefix}--search-button {
     display: flex;
-    width: convert.to-rem(40px);
-    height: convert.to-rem(40px);
     align-items: center;
     justify-content: center;
     border-width: 1px 0;
     border-style: solid;
     border-color: transparent;
+    block-size: convert.to-rem(40px);
     cursor: pointer;
     fill: $icon-primary;
+    inline-size: convert.to-rem(40px);
     opacity: 1;
     transition: opacity $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive),
@@ -226,8 +227,8 @@
     outline: none;
 
     &:hover {
-      border-bottom-color: transparent;
       background-color: transparent;
+      border-block-end-color: transparent;
     }
 
     &:hover::before {
@@ -256,8 +257,8 @@
     ~ .#{$prefix}--search-button,
     &.#{$prefix}--search--expandable,
     &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
-      width: convert.to-rem(32px);
-      height: convert.to-rem(32px);
+      block-size: convert.to-rem(32px);
+      inline-size: convert.to-rem(32px);
     }
 
     &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
@@ -271,8 +272,8 @@
     ~ .#{$prefix}--search-button,
     &.#{$prefix}--search--expandable,
     &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
-      width: convert.to-rem(40px);
-      height: convert.to-rem(40px);
+      block-size: convert.to-rem(40px);
+      inline-size: convert.to-rem(40px);
     }
 
     &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
@@ -286,8 +287,8 @@
     ~ .#{$prefix}--search-button,
     &.#{$prefix}--search--expandable,
     &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
-      width: convert.to-rem(48px);
-      height: convert.to-rem(48px);
+      block-size: convert.to-rem(48px);
+      inline-size: convert.to-rem(48px);
     }
 
     &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
@@ -305,7 +306,7 @@
   .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input {
     @include skeleton;
 
-    width: 100%;
+    inline-size: 100%;
 
     &::placeholder {
       color: transparent;
@@ -317,12 +318,12 @@
   }
 
   .#{$prefix}--search--expandable.#{$prefix}--search--expanded {
-    width: 100%;
+    inline-size: 100%;
   }
 
   .#{$prefix}--search--expandable .#{$prefix}--search-input {
-    width: 0;
     padding: 0;
+    inline-size: 0;
     transition: padding $duration-fast-01 motion(standard, productive),
       width 0s linear $duration-fast-01;
 
@@ -337,7 +338,7 @@
 
   .#{$prefix}--search--expandable.#{$prefix}--search--expanded
     .#{$prefix}--search-input {
-    width: 100%;
+    inline-size: 100%;
     transition: padding $duration-fast-01 motion(standard, productive);
 
     &::placeholder {