@carbon/styles 1.37.0 → 1.38.0

package/scss/components/number-input/_number-input.scss

@@ -28,14 +28,14 @@
 
     position: relative;
     display: flex;
-    width: 100%;
     flex-direction: column;
+    inline-size: 100%;
   }
 
   .#{$prefix}--number
     .#{$prefix}--number__input-wrapper--warning
     input[type='number'] {
-    padding-right: convert.to-rem(128px);
+    padding-inline-end: convert.to-rem(128px);
   }
 
   .#{$prefix}--number input[type='number'] {
@@ -43,23 +43,23 @@
     @include focus-outline('reset');
 
     display: inline-flex;
-    width: 100%;
-    min-width: 9.375rem;
-    height: convert.to-rem(40px);
     box-sizing: border-box;
-    padding-right: convert.to-rem(96px);
-    padding-left: $spacing-05;
     border: 0;
-    border-bottom: convert.to-rem(1px) solid $border-strong;
 
     // Firefox: Hide spinner (up and down buttons)
     -moz-appearance: textfield;
     appearance: textfield;
     background-color: $field;
+    block-size: convert.to-rem(40px);
+    border-block-end: convert.to-rem(1px) solid $border-strong;
     border-radius: 0;
     color: $text-primary;
     font-family: font-family('sans');
     font-weight: 400;
+    inline-size: 100%;
+    min-inline-size: 9.375rem;
+    padding-inline-end: convert.to-rem(96px);
+    padding-inline-start: $spacing-05;
     transition: background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
 
@@ -87,41 +87,41 @@
     }
 
     &[data-invalid] {
-      padding-right: convert.to-rem(128px);
+      padding-inline-end: convert.to-rem(128px);
     }
   }
 
   .#{$prefix}--number--lg.#{$prefix}--number {
     input[type='number'] {
-      padding-right: convert.to-rem(112px);
+      padding-inline-end: convert.to-rem(112px);
 
       &[data-invalid] {
-        padding-right: convert.to-rem(144px);
+        padding-inline-end: convert.to-rem(144px);
       }
     }
 
     .#{$prefix}--number__input-wrapper--warning input[type='number'] {
-      padding-right: convert.to-rem(144px);
+      padding-inline-end: convert.to-rem(144px);
     }
   }
 
   .#{$prefix}--number--sm.#{$prefix}--number {
     input[type='number'] {
-      padding-right: convert.to-rem(80px);
+      padding-inline-end: convert.to-rem(80px);
 
       &[data-invalid] {
-        padding-right: convert.to-rem(112px);
+        padding-inline-end: convert.to-rem(112px);
       }
     }
 
     .#{$prefix}--number__input-wrapper--warning input[type='number'] {
-      padding-right: convert.to-rem(112px);
+      padding-inline-end: convert.to-rem(112px);
     }
   }
 
   .#{$prefix}--number input[type='number']:disabled {
-    border-bottom-color: transparent;
     background-color: $field;
+    border-block-end-color: transparent;
     color: $text-disabled;
     cursor: not-allowed;
   }
@@ -136,15 +136,15 @@
     @include reset;
 
     position: absolute;
-    // vertically center controls within parent container on IE11
-    top: 50%;
-    right: 0;
     display: flex;
-    width: convert.to-rem(80px);
-    height: 100%;
     flex-direction: row;
     align-items: center;
     justify-content: center;
+    block-size: 100%;
+    inline-size: convert.to-rem(80px);
+    // vertically center controls within parent container on IE11
+    inset-block-start: 50%;
+    inset-inline-end: 0;
     transform: translateY(-50%);
   }
 
@@ -153,30 +153,30 @@
 
     position: relative;
     display: inline-flex;
-    height: 100%;
     align-items: center;
     justify-content: center;
-    border-bottom: convert.to-rem(1px) solid $border-strong;
+    block-size: 100%;
+    border-block-end: convert.to-rem(1px) solid $border-strong;
     color: $icon-primary;
 
     &::before,
     &::after {
       position: absolute;
-      top: convert.to-rem(2px);
       display: block;
-      width: convert.to-rem(2px);
-      // height: calc(100% - 4px) is calculated differently in Safari
-      height: convert.to-rem(36px);
       background-color: $field;
+      // block-size: calc(100% - 4px) is calculated differently in Safari
+      block-size: convert.to-rem(36px);
       content: '';
+      inline-size: convert.to-rem(2px);
+      inset-block-start: convert.to-rem(2px);
     }
 
     &::before {
-      left: 0;
+      inset-inline-start: 0;
     }
 
     &::after {
-      right: 0;
+      inset-inline-end: 0;
     }
 
     svg {
@@ -210,7 +210,7 @@
     }
 
     &:disabled {
-      border-bottom-color: transparent;
+      border-block-end-color: transparent;
       color: $text-disabled;
       cursor: not-allowed;
     }
@@ -230,7 +230,7 @@
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
-    border-bottom-color: transparent;
+    border-block-end-color: transparent;
 
     &:hover {
       @include focus-outline('outline');
@@ -241,7 +241,7 @@
     input[type='number'][data-invalid]
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
-    border-bottom-color: transparent;
+    border-block-end-color: transparent;
   }
 
   // add invalid outline to number controls only when invalid input is not focused
@@ -280,9 +280,9 @@
   .#{$prefix}--number__rule-divider {
     position: absolute;
     z-index: z('overlay');
-    width: convert.to-rem(1px);
-    height: convert.to-rem(16px);
     background-color: $border-subtle;
+    block-size: convert.to-rem(16px);
+    inline-size: convert.to-rem(1px);
 
     &:first-of-type {
       order: 0;
@@ -292,8 +292,8 @@
   // rule divider styles
   .#{$prefix}--number__controls
     .#{$prefix}--number__rule-divider:first-of-type {
-    left: 0;
     background-color: transparent;
+    inset-inline-start: 0;
   }
 
   .#{$prefix}--number__invalid
@@ -331,33 +331,33 @@
 
   .#{$prefix}--number__invalid {
     position: absolute;
-    right: convert.to-rem(96px);
     fill: $support-error;
+    inset-inline-end: convert.to-rem(96px);
   }
 
   .#{$prefix}--number--lg .#{$prefix}--number__invalid {
-    right: convert.to-rem(112px);
+    inset-inline-end: convert.to-rem(112px);
   }
 
   .#{$prefix}--number--sm .#{$prefix}--number__invalid {
-    right: convert.to-rem(80px);
+    inset-inline-end: convert.to-rem(80px);
   }
 
   .#{$prefix}--number__invalid + .#{$prefix}--number__rule-divider {
     position: absolute;
-    right: convert.to-rem(80px);
+    inset-inline-end: convert.to-rem(80px);
   }
 
   .#{$prefix}--number--lg
     .#{$prefix}--number__invalid
     + .#{$prefix}--number__rule-divider {
-    right: convert.to-rem(96px);
+    inset-inline-end: convert.to-rem(96px);
   }
 
   .#{$prefix}--number--sm
     .#{$prefix}--number__invalid
     + .#{$prefix}--number__rule-divider {
-    right: convert.to-rem(64px);
+    inset-inline-end: convert.to-rem(64px);
   }
 
   .#{$prefix}--number__control-btn.down-icon:hover
@@ -414,38 +414,38 @@
 
   // Size Variant styles
   .#{$prefix}--number--lg input[type='number'] {
-    height: convert.to-rem(48px);
+    block-size: convert.to-rem(48px);
   }
 
   .#{$prefix}--number--lg .#{$prefix}--number__controls {
-    width: convert.to-rem(96px);
+    inline-size: convert.to-rem(96px);
   }
 
   .#{$prefix}--number--lg .#{$prefix}--number__control-btn {
-    width: convert.to-rem(48px);
+    inline-size: convert.to-rem(48px);
 
     &::before,
     &::after {
-      // height: calc(100% - 4px) is calculated differently in Safari
-      height: convert.to-rem(44px);
+      // block-size: calc(100% - 4px) is calculated differently in Safari
+      block-size: convert.to-rem(44px);
     }
   }
 
   .#{$prefix}--number--sm input[type='number'] {
-    height: convert.to-rem(32px);
+    block-size: convert.to-rem(32px);
   }
 
   .#{$prefix}--number--sm .#{$prefix}--number__controls {
-    width: convert.to-rem(64px);
+    inline-size: convert.to-rem(64px);
   }
 
   .#{$prefix}--number--sm .#{$prefix}--number__control-btn {
-    width: convert.to-rem(32px);
+    inline-size: convert.to-rem(32px);
 
     &::before,
     &::after {
-      // height: calc(100% - 4px) is calculated differently in Safari
-      height: convert.to-rem(28px);
+      // block-size: calc(100% - 4px) is calculated differently in Safari
+      block-size: convert.to-rem(28px);
     }
   }
 
@@ -453,22 +453,22 @@
   .#{$prefix}--number--nolabel
     .#{$prefix}--label
     + .#{$prefix}--form__helper-text {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 
   // No steppers
   .#{$prefix}--number--nosteppers input[type='number'] {
-    padding-right: convert.to-rem(48px);
+    padding-inline-end: convert.to-rem(48px);
   }
 
   .#{$prefix}--number--nosteppers .#{$prefix}--number__invalid {
-    right: convert.to-rem(16px);
+    inset-inline-end: convert.to-rem(16px);
   }
 
   // Readonly
   .#{$prefix}--number--readonly input[type='number'] {
-    border-bottom-color: $border-subtle;
     background: transparent;
+    border-block-end-color: $border-subtle;
   }
 
   .#{$prefix}--number--readonly .#{$prefix}--number__control-btn {
@@ -508,27 +508,27 @@
   .#{$prefix}--number.#{$prefix}--skeleton {
     @include skeleton;
 
-    width: 100%;
-    height: 2.5rem;
+    block-size: 2.5rem;
+    inline-size: 100%;
 
     input[type='number'] {
       display: none;
     }
   }
 
-  // Windows HCM fix
-  /* stylelint-disable */
-  .#{$prefix}--number__control-btn:hover,
-  .#{$prefix}--number__control-btn:focus {
-    @include high-contrast-mode('focus');
-  }
+  // // Windows HCM fix
+  // /* stylelint-disable */
+  // .#{$prefix}--number__control-btn:hover,
+  // .#{$prefix}--number__control-btn:focus {
+  //   @include high-contrast-mode('focus');
+  // }
 
-  .#{$prefix}--number__control-btn {
-    @include high-contrast-mode('outline');
-  }
+  // .#{$prefix}--number__control-btn {
+  //   @include high-contrast-mode('outline');
+  // }
 
-  .#{$prefix}--number__control-btn svg {
-    @include high-contrast-mode('icon-fill');
-  }
-  /* stylelint-enable */
+  // .#{$prefix}--number__control-btn svg {
+  //   @include high-contrast-mode('icon-fill');
+  // }
+  // /* stylelint-enable */
 }

package/scss/components/overflow-menu/_overflow-menu.scss

@@ -33,12 +33,12 @@
 
     position: relative;
     display: flex;
-    width: convert.to-rem(40px);
-    height: convert.to-rem(40px);
-    min-height: convert.to-rem(40px);
     align-items: center;
     justify-content: center;
+    block-size: convert.to-rem(40px);
     cursor: pointer;
+    inline-size: convert.to-rem(40px);
+    min-block-size: convert.to-rem(40px);
     transition: outline $duration-fast-02 motion(entrance, productive),
       background-color $duration-fast-02 motion(entrance, productive);
 
@@ -56,13 +56,13 @@
   }
 
   .#{$prefix}--overflow-menu--sm {
-    width: convert.to-rem(32px);
-    height: convert.to-rem(32px);
+    block-size: convert.to-rem(32px);
+    inline-size: convert.to-rem(32px);
   }
 
   .#{$prefix}--overflow-menu--lg {
-    width: convert.to-rem(48px);
-    height: convert.to-rem(48px);
+    block-size: convert.to-rem(48px);
+    inline-size: convert.to-rem(48px);
   }
 
   // Overwrite Icon Tooltip focus styles
@@ -90,9 +90,9 @@
   }
 
   .#{$prefix}--overflow-menu__icon {
-    width: convert.to-rem(16px);
-    height: convert.to-rem(16px);
+    block-size: convert.to-rem(16px);
     fill: $icon-primary;
+    inline-size: convert.to-rem(16px);
   }
 
   .#{$prefix}--overflow-menu__wrapper {
@@ -105,13 +105,13 @@
 
     position: absolute;
     z-index: z('floating');
-    top: 32px;
-    left: 0;
     display: none;
-    width: convert.to-rem(160px);
     flex-direction: column;
     align-items: flex-start;
     background-color: $layer;
+    inline-size: convert.to-rem(160px);
+    inset-block-start: 32px;
+    inset-inline-start: 0;
     list-style: none;
 
     &::after {
@@ -147,67 +147,67 @@
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']:not(
       .#{$prefix}--breadcrumb-menu-options
     )::after {
-    top: convert.to-rem(-3px);
-    left: 0;
-    width: convert.to-rem(40px);
-    height: convert.to-rem(3px);
+    block-size: convert.to-rem(3px);
+    inline-size: convert.to-rem(40px);
+    inset-block-start: convert.to-rem(-3px);
+    inset-inline-start: 0;
   }
 
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='top']::after {
-    bottom: convert.to-rem(-8px);
-    left: 0;
-    width: convert.to-rem(40px);
-    height: convert.to-rem(8px);
+    block-size: convert.to-rem(8px);
+    inline-size: convert.to-rem(40px);
+    inset-block-end: convert.to-rem(-8px);
+    inset-inline-start: 0;
   }
 
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='left']::after {
-    top: 0;
-    right: convert.to-rem(-6px);
-    width: convert.to-rem(6px);
-    height: convert.to-rem(40px);
+    block-size: convert.to-rem(40px);
+    inline-size: convert.to-rem(6px);
+    inset-block-start: 0;
+    inset-inline-end: convert.to-rem(-6px);
   }
 
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='right']::after {
-    top: 0;
-    left: convert.to-rem(-6px);
-    width: convert.to-rem(6px);
-    height: convert.to-rem(40px);
+    block-size: convert.to-rem(40px);
+    inline-size: convert.to-rem(6px);
+    inset-block-start: 0;
+    inset-inline-start: convert.to-rem(-6px);
   }
 
   .#{$prefix}--overflow-menu-options--sm.#{$prefix}--overflow-menu-options {
     &[data-floating-menu-direction='bottom']::after,
     &[data-floating-menu-direction='top']::after {
-      width: convert.to-rem(32px);
+      inline-size: convert.to-rem(32px);
     }
 
     &[data-floating-menu-direction='left']::after,
     &[data-floating-menu-direction='right']::after {
-      height: convert.to-rem(32px);
+      block-size: convert.to-rem(32px);
     }
   }
 
   .#{$prefix}--overflow-menu-options--lg.#{$prefix}--overflow-menu-options {
     &[data-floating-menu-direction='bottom']::after,
     &[data-floating-menu-direction='top']::after {
-      width: convert.to-rem(48px);
+      inline-size: convert.to-rem(48px);
     }
 
     &[data-floating-menu-direction='left']::after,
     &[data-floating-menu-direction='right']::after {
-      height: convert.to-rem(48px);
+      block-size: convert.to-rem(48px);
     }
   }
 
   .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='top']::after,
   .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
-    right: 0;
-    left: auto;
+    inset-inline-end: 0;
+    inset-inline-start: auto;
   }
 
   .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='left']::after,
   .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='right']::after {
-    top: auto;
-    bottom: 0;
+    inset-block-end: 0;
+    inset-block-start: auto;
   }
 
   .#{$prefix}--overflow-menu-options--open {
@@ -215,42 +215,42 @@
   }
 
   .#{$prefix}--overflow-menu-options__content {
-    width: 100%;
+    inline-size: 100%;
   }
 
   .#{$prefix}--overflow-menu-options__option {
     @include component-reset.reset;
 
     display: flex;
-    width: 100%;
-    height: convert.to-rem(40px);
     align-items: center;
     padding: 0;
     background-color: transparent;
+    block-size: convert.to-rem(40px);
+    inline-size: 100%;
     transition: background-color $duration-fast-02 motion(entrance, productive);
   }
 
   .#{$prefix}--overflow-menu-options--sm
     .#{$prefix}--overflow-menu-options__option {
-    height: convert.to-rem(32px);
+    block-size: convert.to-rem(32px);
   }
 
   .#{$prefix}--overflow-menu-options--lg
     .#{$prefix}--overflow-menu-options__option {
-    height: convert.to-rem(48px);
+    block-size: convert.to-rem(48px);
   }
 
   .#{$prefix}--overflow-menu--divider {
-    border-top: 1px solid $border-subtle;
+    border-block-start: 1px solid $border-subtle;
   }
 
   .#{$prefix}--overflow-menu--light .#{$prefix}--overflow-menu--divider {
-    border-top: 1px solid $border-subtle;
+    border-block-start: 1px solid $border-subtle;
   }
 
   a.#{$prefix}--overflow-menu-options__btn::before {
     display: inline-block;
-    height: 100%;
+    block-size: 100%;
     content: '';
     vertical-align: middle;
   }
@@ -260,18 +260,18 @@
     @include focus-outline('reset');
 
     display: inline-flex;
-    width: 100%;
-    max-width: 11.25rem;
-    height: 100%;
     align-items: center;
     padding: 0 $spacing-05;
     border: none;
     background-color: transparent;
+    block-size: 100%;
     color: $text-secondary;
     cursor: pointer;
     font-family: inherit;
     font-weight: 400;
-    text-align: left;
+    inline-size: 100%;
+    max-inline-size: 11.25rem;
+    text-align: start;
     transition: outline $duration-fast-02 motion(entrance, productive),
       background-color $duration-fast-02 motion(entrance, productive),
       color $duration-fast-02 motion(entrance, productive);
@@ -345,10 +345,10 @@
   }
 
   .#{$prefix}--overflow-menu--flip {
-    left: -140px;
+    inset-inline-start: -140px;
 
     &::before {
-      left: 145px;
+      inset-inline-start: 145px;
     }
   }