@carbon/styles 1.37.0 → 1.38.0-rc.0

package/scss/components/popover/_popover.scss

@@ -130,11 +130,11 @@ $popover-caret-height: custom-property.get-var(
     position: absolute;
     z-index: z('floating');
     display: none;
-    width: max-content;
-    max-width: convert.to-rem(368px);
     background-color: $popover-background-color;
     border-radius: $popover-border-radius;
     color: $popover-text-color;
+    inline-size: max-content;
+    max-inline-size: convert.to-rem(368px);
     pointer-events: auto;
   }
 
@@ -192,30 +192,52 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--bottom
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
-    bottom: 0;
-    left: 50%;
+    inset-block-end: 0;
+    inset-inline-start: 50%;
     transform: translate(-50%, calc(100% + $popover-offset));
   }
 
+  [dir='rtl']
+    .#{$prefix}--popover--bottom
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    transform: translate(50%, calc(100% + $popover-offset));
+  }
+
   .#{$prefix}--popover--bottom-left
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
-    bottom: 0;
-    left: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
     transform: translate(
       calc(-1 * $popover-offset),
       calc(100% + $popover-offset)
     );
   }
 
+  [dir='rtl']
+    .#{$prefix}--popover--bottom-left
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    inset-inline-end: 0;
+    inset-inline-start: initial;
+  }
+
   .#{$prefix}--popover--bottom-right
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
-    right: 0;
-    bottom: 0;
+    inset-block-end: 0;
+    inset-inline-end: 0;
     transform: translate($popover-offset, calc(100% + $popover-offset));
   }
 
+  [dir='rtl']
+    .#{$prefix}--popover--bottom-right
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    inset-inline-start: 0;
+  }
+
   // Popover hover area placement
   .#{$prefix}--popover--bottom
     > .#{$prefix}--popover
@@ -226,10 +248,10 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--bottom-right
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content::before {
-    top: 0;
-    right: 0;
-    left: 0;
-    height: $popover-offset;
+    block-size: $popover-offset;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-inline-start: 0;
     transform: translateY(-100%);
   }
 
@@ -243,14 +265,29 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--bottom-right
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret {
-    bottom: 0;
-    left: 50%;
-    width: $popover-caret-width;
-    height: $popover-caret-height;
+    block-size: $popover-caret-height;
     clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+    inline-size: $popover-caret-width;
+    inset-block-end: 0;
+    inset-inline-start: 50%;
     transform: translate(-50%, $popover-offset);
   }
 
+  [dir='rtl']
+    .#{$prefix}--popover--bottom
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+  [dir='rtl']
+    .#{$prefix}--popover--bottom-left
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+  [dir='rtl']
+    .#{$prefix}--popover--bottom-right
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret {
+    transform: translate(50%, $popover-offset);
+  }
+
   //-----------------------------------------------------------------------------
   // Top
   //-----------------------------------------------------------------------------
@@ -259,30 +296,52 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--top
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
-    top: 0;
-    left: 50%;
+    inset-block-start: 0;
+    inset-inline-start: 50%;
     transform: translate(-50%, calc(-100% - $popover-offset));
   }
 
+  [dir='rtl']
+    .#{$prefix}--popover--top
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    transform: translate(50%, calc(-100% - $popover-offset));
+  }
+
   .#{$prefix}--popover--top-left
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     transform: translate(
       calc(-1 * $popover-offset),
       calc(-100% - $popover-offset)
     );
   }
 
+  [dir='rtl']
+    .#{$prefix}--popover--top-left
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    inset-inline-end: 0;
+    inset-inline-start: initial;
+  }
+
   .#{$prefix}--popover--top-right
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
-    top: 0;
-    right: 0;
+    inset-block-start: 0;
+    inset-inline-end: 0;
     transform: translate($popover-offset, calc(-100% - $popover-offset));
   }
 
+  [dir='rtl']
+    .#{$prefix}--popover--top-right
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    inset-inline-start: 0;
+  }
+
   // Popover hover area placement
   .#{$prefix}--popover--top
     > .#{$prefix}--popover
@@ -293,10 +352,10 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--top-right
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content::before {
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: $popover-offset;
+    block-size: $popover-offset;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    inset-inline-start: 0;
     transform: translateY(100%);
   }
 
@@ -308,14 +367,29 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--top-right
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret {
-    top: 0;
-    left: 50%;
-    width: $popover-caret-width;
-    height: $popover-caret-height;
+    block-size: $popover-caret-height;
     clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+    inline-size: $popover-caret-width;
+    inset-block-start: 0;
+    inset-inline-start: 50%;
     transform: translate(-50%, calc(-1 * $popover-offset));
   }
 
+  [dir='rtl']
+    .#{$prefix}--popover--top
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+  [dir='rtl']
+    .#{$prefix}--popover--top-left
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+  [dir='rtl']
+    .#{$prefix}--popover--top-right
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret {
+    transform: translate(50%, calc(-1 * $popover-offset));
+  }
+
   //-----------------------------------------------------------------------------
   // Right
   //-----------------------------------------------------------------------------
@@ -324,8 +398,8 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--right
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
-    top: 50%;
-    left: 100%;
+    inset-block-start: 50%;
+    inset-inline-start: 100%;
     // Add in 0.1px to prevent rounding errors where the content is
     // moved farther than the caret
     transform: translate($popover-offset, -50%);
@@ -334,8 +408,8 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--right-top
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
-    top: 50%;
-    left: 100%;
+    inset-block-start: 50%;
+    inset-inline-start: 100%;
     transform: translate(
       $popover-offset,
       calc(0.5 * $popover-offset * -1 - 16px)
@@ -345,11 +419,27 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--right-bottom
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
-    bottom: 50%;
-    left: 100%;
+    inset-block-end: 50%;
+    inset-inline-start: 100%;
     transform: translate($popover-offset, calc(0.5 * $popover-offset + 16px));
   }
 
+  [dir='rtl']
+    .#{$prefix}--popover--right
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  [dir='rtl']
+    .#{$prefix}--popover--right-bottom
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  [dir='rtl']
+    .#{$prefix}--popover--right-top
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    inset-inline-end: 100%;
+    inset-inline-start: initial;
+  }
+
   // Popover hover area placement
   .#{$prefix}--popover--right
     > .#{$prefix}--popover
@@ -360,10 +450,10 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--right-bottom
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content::before {
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: $popover-offset;
+    inline-size: $popover-offset;
+    inset-block-end: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     transform: translateX(-100%);
   }
 
@@ -377,14 +467,30 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--right-bottom
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret {
-    top: 50%;
-    left: 100%;
-    width: $popover-caret-height;
-    height: $popover-caret-width;
+    block-size: $popover-caret-width;
     clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+    inline-size: $popover-caret-height;
+    inset-block-start: 50%;
+    inset-inline-start: 100%;
     transform: translate(calc($popover-offset - 100%), -50%);
   }
 
+  [dir='rtl']
+    .#{$prefix}--popover--right
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+  [dir='rtl']
+    .#{$prefix}--popover--right-top
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+  [dir='rtl']
+    .#{$prefix}--popover--right-bottom
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret {
+    inset-inline-end: 100%;
+    inset-inline-start: initial;
+  }
+
   //-----------------------------------------------------------------------------
   // Left
   //-----------------------------------------------------------------------------
@@ -393,8 +499,8 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--left
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
-    top: 50%;
-    right: 100%;
+    inset-block-start: 50%;
+    inset-inline-end: 100%;
     // Add in 0.1px to prevent rounding errors where the content is
     // moved farther than the caret
     transform: translate(calc(-1 * $popover-offset + 0.1px), -50%);
@@ -403,8 +509,8 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--left-top
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
-    top: -50%;
-    right: 100%;
+    inset-block-start: -50%;
+    inset-inline-end: 100%;
     // Add in 0.1px to prevent rounding errors where the content is
     // moved farther than the caret
     transform: translate(
@@ -416,8 +522,8 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--left-bottom
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
-    right: 100%;
-    bottom: -50%;
+    inset-block-end: -50%;
+    inset-inline-end: 100%;
     // Add in 0.1px to prevent rounding errors where the content is
     // moved farther than the caret
     transform: translate(
@@ -426,6 +532,22 @@ $popover-caret-height: custom-property.get-var(
     );
   }
 
+  [dir='rtl']
+    .#{$prefix}--popover--left
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  [dir='rtl']
+    .#{$prefix}--popover--left-bottom
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  [dir='rtl']
+    .#{$prefix}--popover--left-top
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    inset-inline-end: initial;
+    inset-inline-start: 100%;
+  }
+
   // Popover hover area placement
   .#{$prefix}--popover--left
     > .#{$prefix}--popover
@@ -436,10 +558,10 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--left-bottom
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content::before {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: $popover-offset;
+    inline-size: $popover-offset;
+    inset-block-end: 0;
+    inset-block-start: 0;
+    inset-inline-end: 0;
     transform: translateX(100%);
   }
 
@@ -453,14 +575,30 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--left-bottom
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret {
-    top: 50%;
-    right: 100%;
-    width: $popover-caret-height;
-    height: $popover-caret-width;
+    block-size: $popover-caret-width;
     clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+    inline-size: $popover-caret-height;
+    inset-block-start: 50%;
+    inset-inline-end: 100%;
     transform: translate(calc(-1 * $popover-offset + 100%), -50%);
   }
 
+  [dir='rtl']
+    .#{$prefix}--popover--left
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+  [dir='rtl']
+    .#{$prefix}--popover--left-top
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+  [dir='rtl']
+    .#{$prefix}--popover--left-bottom
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret {
+    inset-inline-end: initial;
+    inset-inline-start: 100%;
+  }
+
   //-----------------------------------------------------------------------------
   // Tab Tip Variant
   //-----------------------------------------------------------------------------
@@ -479,10 +617,10 @@ $popover-caret-height: custom-property.get-var(
 
     position: relative;
     display: inline-flex;
-    width: convert.to-rem(32px);
-    height: convert.to-rem(32px);
     align-items: center;
     justify-content: center;
+    block-size: convert.to-rem(32px);
+    inline-size: convert.to-rem(32px);
 
     &:focus {
       @include focus-outline('outline');
@@ -503,11 +641,11 @@ $popover-caret-height: custom-property.get-var(
     .#{$prefix}--popover--tab-tip__button:not(:focus)::after {
     position: absolute;
     z-index: z('floating') + 1;
-    bottom: 0;
-    width: 100%;
-    height: 2px;
     background: theme.$layer;
+    block-size: 2px;
     content: '';
+    inline-size: 100%;
+    inset-block-end: 0;
   }
 
   .#{$prefix}--popover--tab-tip__button svg {

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

@@ -27,10 +27,10 @@
     @include type-style('body-compact-01');
 
     display: flex;
-    min-width: convert.to-rem(48px);
     justify-content: space-between;
     color: $text-primary;
     margin-block-end: $spacing-03;
+    min-inline-size: convert.to-rem(48px);
   }
 
   .#{$prefix}--progress-bar__label-text {
@@ -41,31 +41,35 @@
 
   .#{$prefix}--progress-bar__track {
     position: relative;
-    width: 100%;
-    min-width: convert.to-rem(48px);
-    height: convert.to-rem(8px);
     background-color: $layer;
+    block-size: convert.to-rem(8px);
+    inline-size: 100%;
+    min-inline-size: convert.to-rem(48px);
   }
 
   .#{$prefix}--progress-bar--big .#{$prefix}--progress-bar__track {
-    height: convert.to-rem(8px);
+    block-size: convert.to-rem(8px);
   }
 
   .#{$prefix}--progress-bar--small .#{$prefix}--progress-bar__track {
-    height: convert.to-rem(4px);
+    block-size: convert.to-rem(4px);
   }
 
   .#{$prefix}--progress-bar__bar {
     display: block;
-    width: 100%;
-    height: 100%;
     background-color: currentColor;
+    block-size: 100%;
     color: $interactive;
+    inline-size: 100%;
     transform: scaleX(0);
-    transform-origin: 0 center #{'/*rtl:100% center*/'};
+    transform-origin: 0 center;
     transition: transform $duration-fast-02 motion(standard, productive);
   }
 
+  [dir='rtl'] .#{$prefix}--progress-bar__bar {
+    transform-origin: 100% center;
+  }
+
   .#{$prefix}--progress-bar--indeterminate
     .#{$prefix}--progress-bar__track::after {
     position: absolute;
@@ -84,11 +88,18 @@
     inset: 0;
   }
 
+  [dir='rtl']
+    .#{$prefix}--progress-bar--indeterminate
+    .#{$prefix}--progress-bar__track::after {
+    animation-name: progress-bar-indeterminate-rtl;
+  }
+
   .#{$prefix}--progress-bar__helper-text {
     @include type-style('helper-text-01');
 
-    margin-top: $spacing-03;
     color: $text-secondary;
+
+    margin-block-start: $spacing-03;
   }
 
   .#{$prefix}--progress-bar__status-icon {
@@ -139,6 +150,17 @@
     }
   }
 
+  @keyframes progress-bar-indeterminate-rtl {
+    0% {
+      background-position-x: -105%;
+    }
+
+    80%,
+    100% {
+      background-position-x: 25%;
+    }
+  }
+
   .#{$prefix}--progress-bar--inline {
     display: flex;
     align-items: center;
@@ -146,7 +168,7 @@
 
   .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__label {
     flex-shrink: 0;
-    margin-bottom: 0;
+    margin-block-end: 0;
     margin-inline-end: layout.density('padding-inline');
   }