@carbon/styles 1.37.0 → 1.38.0-rc.0

package/scss/components/text-input/_text-input.scss

@@ -36,14 +36,15 @@
     @include type-style('body-compact-01');
     @include focus-outline('reset');
 
-    width: 100%;
-    height: layout.size('height');
     padding: 0 layout.density('padding-inline');
     border: none;
-    border-bottom: 1px solid $border-strong;
     background-color: $field;
+    block-size: layout.size('height');
+    border-block-end: 1px solid $border-strong;
     color: $text-primary;
     font-family: inherit;
+
+    inline-size: 100%;
     transition: background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
 
@@ -58,15 +59,15 @@
   }
 
   .#{$prefix}--password-input {
-    padding-right: $spacing-08;
+    padding-inline-end: $spacing-08;
   }
 
   .#{$prefix}--text-input--sm.#{$prefix}--password-input {
-    padding-right: $spacing-07;
+    padding-inline-end: $spacing-07;
   }
 
   .#{$prefix}--text-input--lg.#{$prefix}--password-input {
-    padding-right: $spacing-09;
+    padding-inline-end: $spacing-09;
   }
 
   .#{$prefix}--text-input::placeholder {
@@ -84,15 +85,15 @@
   .#{$prefix}--text-input__field-wrapper {
     position: relative;
     display: flex;
-    width: 100%;
+    inline-size: 100%;
   }
 
   .#{$prefix}--text-input__invalid-icon {
     position: absolute;
-    // top/transform used to center invalid icon in IE11
-    top: 50%;
-    right: $spacing-05;
     fill: $support-error;
+    // top/transform used to center invalid icon in IE11
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-05;
     transform: translateY(-50%);
   }
 
@@ -115,28 +116,28 @@
     @include focus-outline('reset');
 
     position: absolute;
-    right: 0;
     display: flex;
-    width: convert.to-rem(40px);
-    height: 100%;
-    min-height: auto;
     align-items: center;
     justify-content: center;
     padding: 0;
     border: 0;
     background: none;
+    block-size: 100%;
     cursor: pointer;
+    inline-size: convert.to-rem(40px);
+    inset-inline-end: 0;
+    min-block-size: auto;
     transition: outline $duration-fast-01 motion(standard, productive);
   }
 
   .#{$prefix}--text-input--sm
     + .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
-    width: convert.to-rem(32px);
+    inline-size: convert.to-rem(32px);
   }
 
   .#{$prefix}--text-input--lg
     + .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
-    width: convert.to-rem(48px);
+    inline-size: convert.to-rem(48px);
   }
 
   .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
@@ -165,20 +166,20 @@
 
   .#{$prefix}--text-input--invalid,
   .#{$prefix}--text-input--warning {
-    padding-right: $spacing-08;
+    padding-inline-end: $spacing-08;
   }
 
   .#{$prefix}--text-input--invalid.#{$prefix}--password-input {
-    padding-right: convert.to-rem(64px);
+    padding-inline-end: convert.to-rem(64px);
   }
 
   .#{$prefix}--text-input--invalid
     + .#{$prefix}--text-input--password__visibility__toggle {
-    right: $spacing-05;
+    inset-inline-end: $spacing-05;
   }
 
   .#{$prefix}--password-input-wrapper .#{$prefix}--text-input__invalid-icon {
-    right: $spacing-08;
+    inset-inline-end: $spacing-08;
   }
 
   .#{$prefix}--text-input:disabled
@@ -199,12 +200,12 @@
   .#{$prefix}--text-input__counter-alert {
     position: absolute;
     overflow: hidden;
-    width: 1px;
-    height: 1px;
     padding: 0;
     border: 0;
     margin: -1px;
+    block-size: 1px;
     clip: rect(0, 0, 0, 0);
+    inline-size: 1px;
   }
 
   //-----------------------------
@@ -213,8 +214,9 @@
   .#{$prefix}--text-input:disabled {
     @include focus-outline('reset');
 
-    border-bottom: 1px solid transparent;
     background-color: $field;
+
+    border-block-end: 1px solid transparent;
     color: $text-disabled;
     cursor: not-allowed;
     // Needed to fix disabled text in Safari #6673
@@ -240,7 +242,7 @@
     box-shadow: none;
 
     .#{$prefix}--text-input--password__visibility__toggle {
-      right: $spacing-08;
+      inset-inline-end: $spacing-08;
     }
   }
 
@@ -266,12 +268,12 @@
   .#{$prefix}--form--fluid .#{$prefix}--label {
     position: absolute;
     z-index: 1;
-    top: convert.to-rem(13px);
-    left: $spacing-05;
     display: flex;
-    height: convert.to-rem(16px);
     align-items: center;
     margin: 0;
+    block-size: convert.to-rem(16px);
+    inset-block-start: convert.to-rem(13px);
+    inset-inline-start: $spacing-05;
   }
 
   .#{$prefix}--form--fluid .#{$prefix}--form__helper-text {
@@ -279,8 +281,8 @@
   }
 
   .#{$prefix}--form--fluid .#{$prefix}--text-input {
-    min-height: convert.to-rem(64px);
     padding: convert.to-rem(32px) $spacing-05 convert.to-rem(13px);
+    min-block-size: convert.to-rem(64px);
   }
 
   .#{$prefix}--text-input__divider,
@@ -290,7 +292,7 @@
 
   .#{$prefix}--form--fluid .#{$prefix}--text-input--invalid,
   .#{$prefix}--form--fluid .#{$prefix}--text-input--warning {
-    border-bottom: none;
+    border-block-end: none;
   }
 
   .#{$prefix}--form--fluid
@@ -302,12 +304,12 @@
     display: block;
     border-style: solid;
     border-color: $border-subtle;
-    border-bottom: none;
     margin: 0 1rem;
+    border-block-end: none;
   }
 
   .#{$prefix}--form--fluid .#{$prefix}--text-input__invalid-icon {
-    top: convert.to-rem(80px);
+    inset-block-start: convert.to-rem(80px);
   }
 
   .#{$prefix}--form--fluid
@@ -320,7 +322,7 @@
   }
 
   .#{$prefix}--form--fluid .#{$prefix}--text-input__field-wrapper--warning {
-    border-bottom: 1px solid $border-strong;
+    border-block-end: 1px solid $border-strong;
   }
 
   .#{$prefix}--form--fluid
@@ -359,31 +361,31 @@
   }
 
   .#{$prefix}--text-input-wrapper .#{$prefix}--label--inline--sm {
-    margin-top: convert.to-rem(9px);
+    margin-block-start: convert.to-rem(9px);
   }
 
   .#{$prefix}--text-input-wrapper .#{$prefix}--label--inline--lg {
-    margin-top: convert.to-rem(17px);
+    margin-block-start: convert.to-rem(17px);
   }
 
   .#{$prefix}--text-input__label-helper-wrapper {
-    max-width: convert.to-rem(128px);
     flex: 2;
     flex-direction: column;
-    margin-right: convert.to-rem(24px);
+    margin-inline-end: convert.to-rem(24px);
+    max-inline-size: convert.to-rem(128px);
     overflow-wrap: break-word;
   }
 
   .#{$prefix}--text-input-wrapper .#{$prefix}--form__helper-text--inline {
-    margin-top: convert.to-rem(2px);
+    margin-block-start: convert.to-rem(2px);
   }
 
   .#{$prefix}--text-input__field-outer-wrapper {
     display: flex;
-    width: 100%;
     flex: 1 1 auto;
     flex-direction: column;
     align-items: flex-start;
+    inline-size: 100%;
   }
 
   .#{$prefix}--text-input__field-outer-wrapper--inline {
@@ -394,8 +396,8 @@
   .#{$prefix}--text-input-wrapper--inline .cds--form-requirement {
     display: block;
     overflow: visible;
-    max-height: convert.to-rem(200px);
     font-weight: 400;
+    max-block-size: convert.to-rem(200px);
   }
 
   .#{$prefix}--text-input-wrapper--inline--invalid .cds--form-requirement {
@@ -408,8 +410,8 @@
 
   .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper--readonly,
   .#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
-    border-bottom-color: $border-subtle;
     background: transparent;
+    border-block-end-color: $border-subtle;
   }
 
   // Windows HCM fix
@@ -422,8 +424,8 @@
 
   .#{$prefix}--text-input__label-wrapper {
     display: flex;
-    width: 100%;
     justify-content: space-between;
+    inline-size: 100%;
 
     .#{$prefix}--text-input__label-counter {
       align-self: end;

package/scss/components/tile/_tile.scss

@@ -37,10 +37,10 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
     position: relative;
     display: block;
-    min-width: 8rem;
-    min-height: 4rem;
     padding: layout.density('padding-inline');
     background-color: $layer;
+    min-block-size: 4rem;
+    min-inline-size: 8rem;
     outline: 2px solid transparent;
     outline-offset: -2px;
 
@@ -157,9 +157,9 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
   .#{$prefix}--tile__checkmark {
     position: absolute;
-    height: 1rem;
     border: none;
     background: transparent;
+    block-size: 1rem;
     inset-block-start: layout.density('padding-inline');
     inset-inline-end: layout.density('padding-inline');
     opacity: 0;
@@ -182,10 +182,10 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile__chevron {
     position: absolute;
     display: flex;
-    width: $-icon-container-size;
-    height: $-icon-container-size;
     align-items: center;
     justify-content: center;
+    block-size: $-icon-container-size;
+    inline-size: $-icon-container-size;
     inset-block-end: 0;
     inset-inline-end: 0;
 
@@ -212,10 +212,10 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
     position: absolute;
     display: flex;
-    width: $-icon-container-size;
-    height: $-icon-container-size;
     align-items: center;
     justify-content: center;
+    block-size: $-icon-container-size;
+    inline-size: $-icon-container-size;
     inset-block-end: 0;
     inset-inline-end: 0;
 
@@ -233,12 +233,12 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--expandable {
     position: relative;
     overflow: hidden;
-    width: 100%;
     border: 0;
     color: inherit;
     cursor: pointer;
     font-family: inherit;
     font-size: inherit;
+    inline-size: 100%;
     text-align: start;
     transition: max-height $duration-moderate-01 motion(standard, productive);
 
@@ -302,7 +302,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
       // Safari-only media query
       // Fixes an issue with scrolling
       // and absolutely positioned elements (#8119)
-      @media not all and (min-resolution: 0.001dpcm) {
+      @media not all and (resolution >= 0.001dpcm) {
         @supports (-webkit-appearance: none) and (stroke-color: transparent) {
           overflow-y: auto;
         }
@@ -330,8 +330,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile-content {
-    width: 100%;
-    height: 100%;
+    block-size: 100%;
+    inline-size: 100%;
   }
 
   .#{$prefix}--tile-input {

package/scss/components/time-picker/_time-picker.scss

@@ -27,7 +27,7 @@
 
   .#{$prefix}--time-picker__select {
     justify-content: center;
-    margin-left: $spacing-01;
+    margin-inline-start: $spacing-01;
   }
 
   .#{$prefix}--time-picker__input {
@@ -38,10 +38,10 @@
 
   .#{$prefix}--time-picker__error__icon {
     position: absolute;
-    top: 50%;
-    right: 1rem;
     display: flex;
-    height: 100%;
+    block-size: 100%;
+    inset-block-start: 50%;
+    inset-inline-end: 1rem;
     place-items: center;
     // top/transform used to center invalid icon in IE11
     transform: translateY(-50%);
@@ -52,11 +52,11 @@
   }
 
   .#{$prefix}--time-picker .#{$prefix}--select-input {
-    width: auto;
-    min-width: auto;
-    padding-right: convert.to-rem(48px);
     margin: 0;
+    inline-size: auto;
     line-height: 1;
+    min-inline-size: auto;
+    padding-inline-end: convert.to-rem(48px);
   }
 
   .#{$prefix}--time-picker__input-field {
@@ -64,9 +64,9 @@
     @include type-style('code-02');
 
     display: flex;
-    width: 4.875rem;
-    height: convert.to-rem(40px);
     align-items: center;
+    block-size: convert.to-rem(40px);
+    inline-size: 4.875rem;
     transition: outline $duration-fast-01 motion(standard, productive),
       background-color $duration-fast-01 motion(standard, productive);
 
@@ -76,7 +76,7 @@
   }
 
   .#{$prefix}--time-picker__input-field-error {
-    width: 6.175rem;
+    inline-size: 6.175rem;
   }
 
   // V11: Possibly deprecate
@@ -89,8 +89,8 @@
 
     &:disabled,
     &:hover:disabled {
-      border-bottom: 1px solid transparent;
       background-color: transparent;
+      border-block-end: 1px solid transparent;
       color: $text-disabled;
       cursor: not-allowed;
     }
@@ -98,25 +98,25 @@
 
   .#{$prefix}--time-picker--sm .#{$prefix}--select-input,
   .#{$prefix}--time-picker--sm .#{$prefix}--time-picker__input-field {
-    height: convert.to-rem(32px);
-    max-height: convert.to-rem(32px);
+    block-size: convert.to-rem(32px);
+    max-block-size: convert.to-rem(32px);
   }
 
   .#{$prefix}--time-picker--lg .#{$prefix}--select-input,
   .#{$prefix}--time-picker--lg .#{$prefix}--time-picker__input-field {
-    height: convert.to-rem(48px);
-    max-height: convert.to-rem(48px);
+    block-size: convert.to-rem(48px);
+    max-block-size: convert.to-rem(48px);
   }
 
   // readonly
   .#{$prefix}--time-picker--readonly .#{$prefix}--time-picker__input-field {
-    border-bottom-color: $border-subtle;
     background-color: transparent;
+    border-block-end-color: $border-subtle;
   }
 
   .#{$prefix}--time-picker--readonly .#{$prefix}--select-input {
-    border-bottom-color: $border-subtle;
     background-color: transparent;
+    border-block-end-color: $border-subtle;
     cursor: default;
   }
 

package/scss/components/toggle/_toggle.scss

@@ -29,8 +29,8 @@
     @include type-style('label-01');
 
     display: block;
-    margin-bottom: $spacing-05;
     color: $text-secondary;
+    margin-block-end: $spacing-05;
   }
 
   .#{$prefix}--toggle__button {
@@ -51,21 +51,21 @@
 
   .#{$prefix}--toggle__switch {
     position: relative;
-    width: convert.to-rem(48px);
-    height: convert.to-rem(24px);
     background-color: $toggle-off;
+    block-size: convert.to-rem(24px);
     border-radius: convert.to-rem(12px);
+    inline-size: convert.to-rem(48px);
     transition: background-color $duration-fast-01 motion(exit, productive);
 
     &::before {
       position: absolute;
-      top: convert.to-rem(3px);
-      left: convert.to-rem(3px);
-      width: convert.to-rem(18px);
-      height: convert.to-rem(18px);
       background-color: $icon-on-color;
+      block-size: convert.to-rem(18px);
       border-radius: 50%;
       content: '';
+      inline-size: convert.to-rem(18px);
+      inset-block-start: convert.to-rem(3px);
+      inset-inline-start: convert.to-rem(3px);
       transition: transform $duration-fast-01 motion(exit, productive);
 
       @media screen and (prefers-reduced-motion: reduce) {
@@ -97,12 +97,12 @@
   }
 
   .#{$prefix}--toggle__appearance--sm .#{$prefix}--toggle__switch {
-    width: convert.to-rem(32px);
-    height: convert.to-rem(16px);
+    block-size: convert.to-rem(16px);
+    inline-size: convert.to-rem(32px);
 
     &::before {
-      width: convert.to-rem(10px);
-      height: convert.to-rem(10px);
+      block-size: convert.to-rem(10px);
+      inline-size: convert.to-rem(10px);
     }
   }
 
@@ -113,11 +113,11 @@
 
   .#{$prefix}--toggle__check {
     position: absolute;
-    top: convert.to-rem(6px);
-    right: convert.to-rem(5px);
-    width: convert.to-rem(6px);
-    height: convert.to-rem(5px);
+    block-size: convert.to-rem(5px);
     fill: $support-success;
+    inline-size: convert.to-rem(6px);
+    inset-block-start: convert.to-rem(6px);
+    inset-inline-end: convert.to-rem(5px);
     visibility: hidden;
   }
 
@@ -162,16 +162,16 @@
     background-color: transparent;
 
     &::before {
-      top: convert.to-rem(2px);
-      left: convert.to-rem(2px);
       background-color: $text-primary;
+      inset-block-start: convert.to-rem(2px);
+      inset-inline-start: convert.to-rem(2px);
     }
   }
 
   .#{$prefix}--toggle--readonly .#{$prefix}--toggle__check {
-    top: convert.to-rem(5px);
-    right: convert.to-rem(4px);
     fill: $background;
+    inset-block-start: convert.to-rem(5px);
+    inset-inline-end: convert.to-rem(4px);
   }
 
   .#{$prefix}--toggle--readonly .#{$prefix}--toggle__text {
@@ -204,16 +204,29 @@
   .#{$prefix}--toggle--skeleton .#{$prefix}--toggle__skeleton-circle {
     @include circular-skeleton;
 
-    width: convert.to-rem(18px);
-    height: convert.to-rem(18px);
+    block-size: convert.to-rem(18px);
     border-radius: 50%;
+
+    inline-size: convert.to-rem(18px);
   }
 
   .#{$prefix}--toggle--skeleton .#{$prefix}--toggle__skeleton-rectangle {
     @include skeleton;
 
-    width: convert.to-rem(24px);
-    height: convert.to-rem(8px);
-    margin-left: convert.to-rem(8px);
+    block-size: convert.to-rem(8px);
+
+    inline-size: convert.to-rem(24px);
+    margin-inline-start: convert.to-rem(8px);
+  }
+
+  // RTL overrides
+  [dir='rtl'] .#{$prefix}--toggle__switch--checked::before {
+    transform: translateX(convert.to-rem(-24px));
+  }
+
+  [dir='rtl']
+    .#{$prefix}--toggle__appearance--sm
+    .#{$prefix}--toggle__switch--checked::before {
+    transform: translateX(convert.to-rem(-16px));
   }
 }

package/scss/components/toggletip/_toggletip.scss

@@ -19,8 +19,9 @@
   .#{$prefix}--toggletip-label {
     @include type.type-style('body-01');
 
-    margin-right: spacing.$spacing-03;
     color: theme.$text-secondary;
+
+    margin-inline-end: spacing.$spacing-03;
   }
 
   .#{$prefix}--toggletip-button {
@@ -70,8 +71,8 @@
     @include type.type-style('body-01');
 
     display: grid;
-    max-width: 18rem;
     padding: spacing.$spacing-05;
+    max-inline-size: 18rem;
     row-gap: spacing.$spacing-05;
   }
 

package/scss/components/tooltip/_tooltip.scss

@@ -34,10 +34,11 @@ $tooltip-padding-inline: custom-property.get-var(
   .#{$prefix}--tooltip-content {
     @include type.type-style('body-01');
 
-    max-width: convert.to-rem(288px);
     padding: $tooltip-padding-block $tooltip-padding-inline;
 
     color: theme.$text-inverse;
+
+    max-inline-size: convert.to-rem(288px);
   }
 }
 
@@ -45,7 +46,7 @@ $tooltip-padding-inline: custom-property.get-var(
   .#{$prefix}--definition-term {
     @include button-reset.reset;
 
-    border-bottom: 1px dotted theme.$border-strong;
+    border-block-end: 1px dotted theme.$border-strong;
     border-radius: 0;
 
     color: theme.$text-primary;
@@ -54,18 +55,19 @@ $tooltip-padding-inline: custom-property.get-var(
   .#{$prefix}--definition-term:focus {
     @include focus-outline.focus-outline;
 
-    border-bottom-color: theme.$border-interactive;
+    border-block-end-color: theme.$border-interactive;
   }
 
   .#{$prefix}--definition-term:hover {
-    border-bottom-color: theme.$border-interactive;
+    border-block-end-color: theme.$border-interactive;
   }
 
   .#{$prefix}--definition-tooltip {
     @include type.type-style('body-01');
 
-    max-width: convert.to-rem(176px);
     padding: convert.to-rem(8px) convert.to-rem(16px);
+
+    max-inline-size: convert.to-rem(176px);
   }
 }