@carbon/styles 1.37.0 → 1.38.0-rc.0

package/scss/components/fluid-date-picker/_fluid-date-picker.scss

@@ -24,8 +24,8 @@
 
   .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker {
     position: relative;
-    width: 100%;
-    height: 100%;
+    block-size: 100%;
+    inline-size: 100%;
     transition: background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
@@ -33,13 +33,13 @@
   .#{$prefix}--date-picker--fluid .#{$prefix}--label {
     position: absolute;
     z-index: 1;
-    top: convert.to-rem(13px);
-    left: $spacing-05;
     display: flex;
-    width: calc(100% - 2rem);
-    height: convert.to-rem(16px);
     align-items: center;
     margin: 0;
+    block-size: convert.to-rem(16px);
+    inline-size: calc(100% - 2rem);
+    inset-block-start: convert.to-rem(13px);
+    inset-inline-start: $spacing-05;
   }
 
   .#{$prefix}--date-picker--fluid .#{$prefix}--label::-webkit-scrollbar,
@@ -63,11 +63,11 @@
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker-input__wrapper
     .#{$prefix}--date-picker__input {
-    min-width: convert.to-rem(144px);
-    min-height: convert.to-rem(64px);
     padding: convert.to-rem(32px) $spacing-05 convert.to-rem(13px);
-    border-bottom: none;
     background: transparent;
+    border-block-end: none;
+    min-block-size: convert.to-rem(64px);
+    min-inline-size: convert.to-rem(144px);
   }
 
   // Simple
@@ -85,22 +85,22 @@
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker--simple
     .#{$prefix}--date-picker--fluid--warn {
-    border-bottom: 1px solid $border-strong;
+    border-block-end: 1px solid $border-strong;
   }
 
   // Single, Range
   .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker__icon {
-    top: convert.to-rem(43px);
+    inset-block-start: convert.to-rem(43px);
   }
 
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker--single
     .#{$prefix}--date-picker__input {
-    width: 100%;
+    inline-size: 100%;
   }
 
   .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker--single {
-    border-bottom: none;
+    border-block-end: none;
   }
 
   .#{$prefix}--date-picker--fluid
@@ -109,7 +109,7 @@
       .#{$prefix}--date-picker__input--invalid
     ),
   .#{$prefix}--date-picker--single .#{$prefix}--date-picker--fluid--warn {
-    border-bottom: 1px solid $border-strong;
+    border-block-end: 1px solid $border-strong;
   }
 
   // Range
@@ -120,7 +120,7 @@
     .#{$prefix}--date-picker-container:not(
       .#{$prefix}--date-picker--fluid--invalid
     ) {
-    border-bottom: 1px solid $border-strong;
+    border-block-end: 1px solid $border-strong;
   }
 
   .#{$prefix}--date-picker--fluid
@@ -129,22 +129,22 @@
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker--range
     .#{$prefix}--date-picker-container {
-    width: 100%;
-    min-width: convert.to-rem(144px);
-    min-height: convert.to-rem(63px);
+    inline-size: 100%;
+    min-block-size: convert.to-rem(63px);
+    min-inline-size: convert.to-rem(144px);
   }
 
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker--range
     > .#{$prefix}--date-picker-container:first-child {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker--range
     > .#{$prefix}--date-picker-container:last-child
     .#{$prefix}--date-picker__input {
-    border-left: 1px solid $border-strong;
+    border-inline-start: 1px solid $border-strong;
   }
 
   // Invalid
@@ -168,7 +168,7 @@
     .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid
     + .#{$prefix}--date-picker-container
     .#{$prefix}--date-picker__input {
-    border-left: none;
+    border-inline-start: none;
   }
 
   .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid
@@ -191,7 +191,7 @@
   .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--warn
     .#{$prefix}--date-picker--range
     .#{$prefix}--date-picker-container {
-    border-bottom: 1px solid transparent;
+    border-block-end: 1px solid transparent;
   }
 
   .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid
@@ -209,7 +209,7 @@
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:last-child
     .#{$prefix}--date-picker__input {
-    border-left: 1px solid transparent;
+    border-inline-start: 1px solid transparent;
   }
 
   .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid
@@ -225,33 +225,33 @@
     .#{$prefix}--date-picker--range
     .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:last-child::after {
     position: absolute;
-    top: convert.to-rem(8px);
-    right: 0;
     display: block;
-    width: 1px;
-    height: calc(100% - 1rem);
     background: $border-strong;
+    block-size: calc(100% - 1rem);
     content: '';
+    inline-size: 1px;
+    inset-block-start: convert.to-rem(8px);
+    inset-inline-end: 0;
   }
 
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:last-child::after {
-    left: 0;
+    inset-inline-start: 0;
   }
 
   .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker__divider {
-    width: calc(100% - 2rem);
     border-style: solid;
     border-color: $border-subtle;
-    border-bottom: none;
     margin: 0 1rem;
+    border-block-end: none;
+    inline-size: calc(100% - 2rem);
   }
 
   .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid
     .#{$prefix}--date-picker__icon--invalid,
   .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--warn
     .#{$prefix}--date-picker__icon--warn {
-    top: convert.to-rem(80px);
+    inset-block-start: convert.to-rem(80px);
   }
 
   .#{$prefix}--date-picker--fluid
@@ -280,9 +280,9 @@
     ~ .#{$prefix}--form-requirement {
     display: block;
     overflow: visible;
-    max-height: 100%;
     padding: $spacing-03 convert.to-rem(40px) $spacing-03 $spacing-05;
-    margin-top: 0;
+    margin-block-start: 0;
+    max-block-size: 100%;
   }
 
   .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid
@@ -302,47 +302,47 @@
   .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--warn
     .#{$prefix}--date-picker--range
     + .#{$prefix}--date-picker__icon {
-    top: convert.to-rem(80px);
+    inset-block-start: convert.to-rem(80px);
   }
 
   // Skeleton
   .#{$prefix}--date-picker--fluid__skeleton {
-    height: convert.to-rem(64px);
-    border-bottom: 1px solid $skeleton-element;
     background: $skeleton-background;
+    block-size: convert.to-rem(64px);
+    border-block-end: 1px solid $skeleton-element;
   }
 
   .#{$prefix}--date-picker--fluid__skeleton--container {
     position: relative;
-    width: 100%;
-    height: 100%;
+    block-size: 100%;
+    inline-size: 100%;
   }
 
   .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--skeleton {
     position: absolute;
-    top: $spacing-05;
-    left: $spacing-05;
-    width: 25%;
-    height: convert.to-rem(8px);
+    block-size: convert.to-rem(8px);
+    inline-size: 25%;
+    inset-block-start: $spacing-05;
+    inset-inline-start: $spacing-05;
   }
 
   .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--label {
-    margin-bottom: convert.to-rem(4px);
+    margin-block-end: convert.to-rem(4px);
   }
 
   .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--text-input {
     position: absolute;
-    top: convert.to-rem(36px);
-    left: $spacing-05;
-    width: 50%;
-    height: convert.to-rem(8px);
     padding: 0;
+    block-size: convert.to-rem(8px);
+    inline-size: 50%;
+    inset-block-start: convert.to-rem(36px);
+    inset-inline-start: $spacing-05;
   }
 
   .#{$prefix}--date-picker--fluid__skeleton--container
     .#{$prefix}--date-picker__icon {
-    top: auto;
-    bottom: $spacing-03;
+    inset-block-end: $spacing-03;
+    inset-block-start: auto;
   }
 
   // Range skeleton
@@ -354,19 +354,19 @@
   .#{$prefix}--date-picker--fluid__skeleton--range
     .#{$prefix}--date-picker--fluid__skeleton--container {
     display: flex;
-    width: 50%;
     flex-direction: column;
+    inline-size: 50%;
   }
 
   .#{$prefix}--date-picker--fluid__skeleton--range
     .#{$prefix}--date-picker--fluid__skeleton--container:first-of-type {
-    border-right: 1px solid $skeleton-element;
+    border-inline-end: 1px solid $skeleton-element;
   }
 
   .#{$prefix}--date-picker--fluid__skeleton--range
     .#{$prefix}--date-picker--fluid__skeleton--container
     .#{$prefix}--date-picker__icon {
-    bottom: $spacing-03;
+    inset-block-end: $spacing-03;
   }
 
   // Readonly
@@ -380,7 +380,7 @@
     ):not(.#{$prefix}--date-picker--fluid--warn)
     .#{$prefix}--date-picker
     .#{$prefix}--date-picker__input {
-    border-bottom-color: $border-subtle;
+    border-block-end-color: $border-subtle;
   }
 
   .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--readonly:not(
@@ -389,6 +389,6 @@
     .#{$prefix}--date-picker--range
     > .#{$prefix}--date-picker-container:last-child
     .#{$prefix}--date-picker__input {
-    border-left-color: $border-subtle;
+    border-inline-start-color: $border-subtle;
   }
 }

package/scss/components/fluid-list-box/_fluid-list-box.scss

@@ -19,27 +19,27 @@
 @mixin fluid-list-box {
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper {
     position: relative;
-    height: 100%;
     background: $field;
+    block-size: 100%;
     transition: background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box {
-    min-height: convert.to-rem(64px);
     padding: 0;
+    min-block-size: convert.to-rem(64px);
   }
 
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--label {
     position: absolute;
     z-index: 1;
-    top: convert.to-rem(13px);
-    left: $spacing-05;
     display: flex;
-    width: calc(100% - 2rem);
-    height: convert.to-rem(16px);
     align-items: center;
     margin: 0;
+    block-size: convert.to-rem(16px);
+    inline-size: calc(100% - 2rem);
+    inset-block-start: convert.to-rem(13px);
+    inset-inline-start: $spacing-05;
   }
 
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--label::-webkit-scrollbar,
@@ -61,28 +61,28 @@
   }
 
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__field {
-    padding-top: convert.to-rem(33px);
-    padding-bottom: convert.to-rem(13px);
-    padding-left: $spacing-05;
+    padding-block-end: convert.to-rem(13px);
+    padding-block-start: convert.to-rem(33px);
+    padding-inline-start: $spacing-05;
   }
 
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__menu-icon {
-    width: 1rem;
-    height: 1rem;
+    block-size: 1rem;
+    inline-size: 1rem;
   }
 
   .#{$prefix}--list-box__wrapper--fluid:not(
       .#{$prefix}--list-box__wrapper--fluid--condensed
     )
     .#{$prefix}--list-box__menu-item {
-    height: $spacing-10;
+    block-size: $spacing-10;
   }
 
   .#{$prefix}--list-box__wrapper--fluid:not(
       .#{$prefix}--list-box__wrapper--fluid--condensed
     )
     .#{$prefix}--list-box__menu-item__selected-icon {
-    top: convert.to-rem(20px);
+    inset-block-start: convert.to-rem(20px);
   }
 
   // Disabled styles
@@ -122,7 +122,7 @@
   .#{$prefix}--list-box__wrapper--fluid
     :not(.#{$prefix}--list-box--up)
     .#{$prefix}--list-box__menu {
-    top: calc(100% + convert.to-rem(3px));
+    inset-block-start: calc(100% + convert.to-rem(3px));
   }
 
   // Invalid / Warning styles
@@ -146,7 +146,7 @@
   .#{$prefix}--list-box__wrapper--fluid
     .#{$prefix}--combo-box.#{$prefix}--list-box--warning
     .#{$prefix}--text-input {
-    border-bottom: 1px solid transparent;
+    border-block-end: 1px solid transparent;
   }
 
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
@@ -167,7 +167,7 @@
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
     .#{$prefix}--list-box,
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box--warning {
-    border-bottom: 1px solid transparent;
+    border-block-end: 1px solid transparent;
   }
 
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
@@ -176,13 +176,13 @@
     .#{$prefix}--list-box--warning
     ~ .#{$prefix}--form-requirement {
     padding: convert.to-rem(8px) 4rem convert.to-rem(8px) $spacing-05;
-    margin-top: 0;
+    margin-block-start: 0;
   }
 
   .#{$prefix}--list-box__wrapper--fluid
     .#{$prefix}--list-box--warning
     ~ .#{$prefix}--form-requirement {
-    border-bottom: 1px solid $border-strong;
+    border-block-end: 1px solid $border-strong;
   }
 
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
@@ -190,21 +190,21 @@
   .#{$prefix}--list-box__wrapper--fluid
     .#{$prefix}--list-box--warning
     .#{$prefix}--list-box__invalid-icon {
-    top: convert.to-rem(81px);
-    right: $spacing-05;
+    inset-block-start: convert.to-rem(81px);
+    inset-inline-end: $spacing-05;
     pointer-events: none;
   }
 
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
     .#{$prefix}--list-box[data-invalid]:not(.#{$prefix}--combo-box)
     .#{$prefix}--list-box__field {
-    padding-right: $spacing-09;
+    padding-inline-end: $spacing-09;
   }
 
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
     .#{$prefix}--list-box[data-invalid].#{$prefix}--combo-box
     .#{$prefix}--text-input {
-    padding-right: $spacing-10;
+    padding-inline-end: $spacing-10;
   }
 
   // Error + Warning divider
@@ -221,8 +221,8 @@
     ~ .#{$prefix}--list-box__divider {
     display: block;
     border: none;
-    border-bottom: 1px solid $border-subtle;
     margin: 0 1rem;
+    border-block-end: 1px solid $border-subtle;
   }
 
   .#{$prefix}--list-box__wrapper--fluid
@@ -238,34 +238,34 @@
   .#{$prefix}--list-box__wrapper--fluid
     .#{$prefix}--list-box--up
     .#{$prefix}--list-box__menu {
-    bottom: $spacing-10;
+    inset-block-end: $spacing-10;
   }
 
   // Skeleton styles
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--skeleton {
-    border-bottom: 1px solid $skeleton-element;
     background: $skeleton-background;
+    border-block-end: 1px solid $skeleton-element;
   }
 
   .#{$prefix}--list-box__wrapper--fluid
     .#{$prefix}--skeleton
     .#{$prefix}--list-box__field {
     position: absolute;
-    top: convert.to-rem(36px);
-    left: $spacing-05;
-    width: 50%;
-    height: convert.to-rem(8px);
     padding: 0;
+    block-size: convert.to-rem(8px);
+    inline-size: 50%;
+    inset-block-start: convert.to-rem(36px);
+    inset-inline-start: $spacing-05;
   }
 
   .#{$prefix}--list-box__wrapper--fluid
     .#{$prefix}--skeleton
     .#{$prefix}--list-box__label {
     position: absolute;
-    top: $spacing-05;
-    left: $spacing-05;
-    width: 25%;
-    height: convert.to-rem(8px);
+    block-size: convert.to-rem(8px);
+    inline-size: 25%;
+    inset-block-start: $spacing-05;
+    inset-inline-start: $spacing-05;
   }
 
   .#{$prefix}--list-box__wrapper--fluid

package/scss/components/fluid-multiselect/_fluid-multiselect.scss

@@ -27,7 +27,7 @@
 
   .#{$prefix}--list-box__wrapper--fluid
     .#{$prefix}--tag.#{$prefix}--tag--filter {
-    margin-top: 1.25rem;
+    margin-block-start: 1.25rem;
   }
 
   // Filterable
@@ -41,7 +41,7 @@
     .#{$prefix}--multi-select--filterable
     .#{$prefix}--list-box__field
     .#{$prefix}--text-input {
-    border-bottom: 1px solid transparent;
+    border-block-end: 1px solid transparent;
   }
 
   .#{$prefix}--list-box__wrapper--fluid

package/scss/components/fluid-number-input/_fluid-number-input.scss

@@ -19,20 +19,20 @@
 @mixin fluid-number-input {
   .#{$prefix}--number-input--fluid {
     position: relative;
-    height: 100%;
     background: $field;
+    block-size: 100%;
   }
 
   .#{$prefix}--number-input--fluid .#{$prefix}--label {
     position: absolute;
     z-index: 1;
-    top: convert.to-rem(13px);
-    left: $spacing-05;
     display: flex;
-    width: calc(100% - 2rem);
-    height: convert.to-rem(16px);
     align-items: center;
     margin: 0;
+    block-size: convert.to-rem(16px);
+    inline-size: calc(100% - 2rem);
+    inset-block-start: convert.to-rem(13px);
+    inset-inline-start: $spacing-05;
   }
 
   .#{$prefix}--number-input--fluid .#{$prefix}--label::-webkit-scrollbar,
@@ -58,16 +58,16 @@
   }
 
   .#{$prefix}--number-input--fluid input[type='number'] {
-    min-height: convert.to-rem(64px);
     padding: convert.to-rem(32px) convert.to-rem(80px) convert.to-rem(13px)
       $spacing-05;
     background: transparent;
+    min-block-size: convert.to-rem(64px);
     outline: none;
   }
 
   .#{$prefix}--number-input--fluid .#{$prefix}--number__controls {
-    top: convert.to-rem(23px);
-    height: convert.to-rem(40px);
+    block-size: convert.to-rem(40px);
+    inset-block-start: convert.to-rem(23px);
     transform: translate(0);
   }
 
@@ -76,7 +76,7 @@
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
-    border-bottom: 1px solid transparent;
+    border-block-end: 1px solid transparent;
   }
 
   .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
@@ -108,12 +108,12 @@
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:hover::before {
-    top: auto;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 1px;
     background: $focus;
+    block-size: 1px;
+    inline-size: 100%;
+    inset-block-end: 0;
+    inset-block-start: auto;
+    inset-inline-start: 0;
   }
   // End weirdness
 
@@ -126,7 +126,7 @@
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:hover {
-    border-bottom: 1px solid $focus;
+    border-block-end: 1px solid $focus;
     outline: none;
   }
 
@@ -134,8 +134,8 @@
     input[type='number']
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn::after {
-    top: 0;
-    height: calc(100% - convert.to-rem(1px));
+    block-size: calc(100% - convert.to-rem(1px));
+    inset-block-start: 0;
   }
 
   .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
@@ -149,15 +149,15 @@
     input[type='number']
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn.up-icon::after {
-    height: calc(100%);
+    block-size: calc(100%);
   }
 
   .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
     input[type='number']
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn.up-icon:hover::after {
-    height: calc(100%);
     background-color: $focus;
+    block-size: calc(100%);
   }
 
   .#{$prefix}--number-input--fluid--invalid
@@ -178,8 +178,8 @@
   }
 
   .#{$prefix}--number-input--fluid .#{$prefix}--number__invalid {
-    top: convert.to-rem(73px);
-    right: $spacing-05;
+    inset-block-start: convert.to-rem(73px);
+    inset-inline-end: $spacing-05;
     pointer-events: none;
   }
 
@@ -192,7 +192,7 @@
   .#{$prefix}--number-input--fluid
     .#{$prefix}--number__input-wrapper--warning
     input[type='number'] {
-    border-bottom: 1px solid transparent;
+    border-block-end: 1px solid transparent;
   }
 
   .#{$prefix}--number-input--fluid
@@ -207,13 +207,13 @@
     .#{$prefix}--number__input-wrapper--warning
     + .#{$prefix}--number-input__divider {
     position: absolute;
-    top: convert.to-rem(63px);
     display: block;
-    width: calc(100% - 2rem);
-    height: convert.to-rem(1px);
     border: none;
-    border-bottom: 1px solid $border-subtle;
     margin: 0 1rem;
+    block-size: convert.to-rem(1px);
+    border-block-end: 1px solid $border-subtle;
+    inline-size: calc(100% - 2rem);
+    inset-block-start: convert.to-rem(63px);
   }
 
   .#{$prefix}--number-input--fluid .#{$prefix}--form-requirement {
@@ -231,7 +231,7 @@
   .#{$prefix}--number-input--fluid--invalid
     .#{$prefix}--number[data-invalid]
     input[type='number'] {
-    border-bottom: 1px solid transparent;
+    border-block-end: 1px solid transparent;
   }
 
   .#{$prefix}--number-input--fluid--invalid
@@ -260,7 +260,7 @@
     input[type='number']
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
-    border-bottom: none;
+    border-block-end: none;
   }
 
   .#{$prefix}--number-input--fluid--invalid
@@ -274,7 +274,7 @@
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
     border: initial;
-    border-bottom-width: convert.to-rem(1px);
+    border-block-end-width: convert.to-rem(1px);
   }
 
   // Disabled states
@@ -282,7 +282,7 @@
       .#{$prefix}--number-input--fluid--invalid
     )
     .#{$prefix}--number {
-    border-bottom: 1px solid $border-subtle;
+    border-block-end: 1px solid $border-subtle;
   }
 
   .#{$prefix}--number-input--fluid--disabled.#{$prefix}--number-input--fluid--invalid