@carbon/styles 1.37.0 → 1.38.0

package/scss/components/contained-list/_contained-list.scss

@@ -14,6 +14,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/convert';
 @use '../../utilities/button-reset';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/custom-property';
@@ -28,6 +29,24 @@
     @include layout.use('density', $default: 'normal');
   }
 
+  .#{$prefix}--contained-list .#{$prefix}--tag {
+    @include layout.redefine-tokens(
+      (
+        size: (
+          height: (
+            xs: convert.to-rem(18px),
+            sm: convert.to-rem(18px),
+            md: convert.to-rem(24px),
+            lg: convert.to-rem(24px),
+            xl: convert.to-rem(24px),
+          ),
+        ),
+      )
+    );
+
+    @include layout.use('size', $default: 'md', $min: 'sm', $max: 'xl');
+  }
+
   .#{$prefix}--contained-list > ul {
     padding: 0;
     margin: 0;
@@ -36,20 +55,20 @@
   .#{$prefix}--contained-list__header {
     position: sticky;
     z-index: 1;
-    top: 0;
     display: flex;
     align-items: center;
+    inset-block-start: 0;
     padding-inline: layout.density('padding-inline');
   }
 
   .#{$prefix}--contained-list__label {
-    width: 100%;
+    inline-size: 100%;
   }
 
   .#{$prefix}--contained-list .#{$prefix}--search {
     position: sticky;
     z-index: 1;
-    top: layout.size('height');
+    inset-block-start: layout.size('height');
 
     &.#{$prefix}--search--expandable .#{$prefix}--search-input {
       background-color: $field;
@@ -57,8 +76,8 @@
   }
 
   .#{$prefix}--contained-list .#{$prefix}--search .#{$prefix}--search-input {
-    border-bottom: 1px solid $border-subtle;
     background-color: $background;
+    border-block-end: 1px solid $border-subtle;
   }
 
   .#{$prefix}--contained-list
@@ -68,7 +87,7 @@
   }
 
   .#{$prefix}--contained-list .#{$prefix}--search .#{$prefix}--search-close {
-    border-right: 2px solid transparent;
+    border-inline-end: 2px solid transparent;
     outline: none;
 
     &:focus {
@@ -80,7 +99,7 @@
     .#{$prefix}--search
     .#{$prefix}--search-input
     ~ .#{$prefix}--search-close:hover {
-    border-bottom: 1px solid transparent;
+    border-block-end: 1px solid transparent;
   }
 
   .#{$prefix}--contained-list
@@ -88,7 +107,7 @@
     .#{$prefix}--search-input:focus
     ~ .#{$prefix}--search-close:hover {
     border: 2px solid $focus;
-    border-left: 0;
+    border-inline-start: 0;
     outline: none;
   }
 
@@ -101,9 +120,9 @@
   .#{$prefix}--contained-list--on-page .#{$prefix}--contained-list__header {
     @include type-style('heading-compact-01');
 
-    height: layout.size('height');
-    border-bottom: 1px solid $border-subtle;
     background-color: $background;
+    block-size: layout.size('height');
+    border-block-end: 1px solid $border-subtle;
     color: $text-primary;
   }
 
@@ -124,8 +143,8 @@
   .#{$prefix}--contained-list--disclosed .#{$prefix}--contained-list__header {
     @include type-style('label-01');
 
-    height: $spacing-07;
     background-color: $layer;
+    block-size: $spacing-07;
     color: $text-secondary;
   }
 
@@ -138,7 +157,7 @@
   }
 
   .#{$prefix}--contained-list-item:not(:first-of-type) {
-    margin-top: -1px;
+    margin-block-start: -1px;
   }
 
   .#{$prefix}--contained-list-item__content {
@@ -167,26 +186,26 @@
 
     @include type-style('body-01');
 
-    min-height: layout.size('height');
     padding: calc(calc((#{layout.size('height')} - var(--temp-1lh)) / 2))
       layout.density('padding-inline');
     color: $text-primary;
+    min-block-size: layout.size('height');
   }
 
   .#{$prefix}--contained-list-item:not(:last-of-type)::before {
     position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: 1px;
     background-color: $border-subtle;
+    block-size: 1px;
     content: '';
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    inset-inline-start: 0;
   }
 
   .#{$prefix}--contained-list--inset-rulers
     .#{$prefix}--contained-list-item:not(:last-of-type)::before {
-    right: layout.density('padding-inline');
-    left: layout.density('padding-inline');
+    inset-inline-end: layout.density('padding-inline');
+    inset-inline-start: layout.density('padding-inline');
   }
 
   .#{$prefix}--contained-list-item--clickable
@@ -227,11 +246,11 @@
   .#{$prefix}--contained-list__action,
   .#{$prefix}--contained-list-item__action {
     position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
     display: flex;
     justify-content: flex-end;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-inline-start: 0;
     pointer-events: none;
   }
 
@@ -249,6 +268,6 @@
 
   .#{$prefix}--contained-list-item__icon {
     display: inline-flex;
-    padding-top: $spacing-01;
+    padding-block-start: $spacing-01;
   }
 }

package/scss/components/content-switcher/_content-switcher.scss

@@ -22,9 +22,9 @@
     @include layout.use('density', $default: 'normal');
 
     display: flex;
-    width: 100%;
-    height: layout.size('height');
     justify-content: space-evenly;
+    block-size: layout.size('height');
+    inline-size: 100%;
   }
 
   .#{$prefix}--content-switcher-btn {
@@ -37,25 +37,25 @@
     display: inline-flex;
     overflow: hidden;
     border: none;
-    border-top: convert.to-rem(1px) solid $border-inverse;
-    border-bottom: convert.to-rem(1px) solid $border-inverse;
     margin: 0;
     background-color: transparent;
+    border-block-end: convert.to-rem(1px) solid $border-inverse;
+    border-block-start: convert.to-rem(1px) solid $border-inverse;
     color: $text-secondary;
-    text-align: left;
+    text-align: start;
     text-decoration: none;
     transition: all $duration-moderate-01 motion(standard, productive);
     white-space: nowrap;
 
     &::after {
       position: absolute;
-      top: 0;
-      left: 0;
       display: block;
-      width: 100%;
-      height: 100%;
       background-color: $layer-selected-inverse;
+      block-size: 100%;
       content: '';
+      inline-size: 100%;
+      inset-block-start: 0;
+      inset-inline-start: 0;
       transform: scaleY(0);
       transform-origin: bottom;
       transition: all $duration-moderate-01 motion(standard, productive);
@@ -109,16 +109,16 @@
 
   .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only)
     .#{$prefix}--content-switcher-btn {
-    width: 100%;
     align-items: center;
     padding: $spacing-03 layout.density('padding-inline');
+    inline-size: 100%;
   }
 
   .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only)
     .#{$prefix}--content-switcher-btn:first-child {
-    border-left: convert.to-rem(1px) solid $border-inverse;
-    border-bottom-left-radius: convert.to-rem(4px);
-    border-top-left-radius: convert.to-rem(4px);
+    border-end-start-radius: convert.to-rem(4px);
+    border-inline-start: convert.to-rem(1px) solid $border-inverse;
+    border-start-start-radius: convert.to-rem(4px);
 
     &:disabled {
       border-color: $border-disabled;
@@ -128,9 +128,9 @@
 
   .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only)
     .#{$prefix}--content-switcher-btn:last-child {
-    border-right: convert.to-rem(1px) solid $border-inverse;
-    border-bottom-right-radius: convert.to-rem(4px);
-    border-top-right-radius: convert.to-rem(4px);
+    border-end-end-radius: convert.to-rem(4px);
+    border-inline-end: convert.to-rem(1px) solid $border-inverse;
+    border-start-end-radius: convert.to-rem(4px);
 
     &:disabled {
       border-color: $border-disabled;
@@ -150,12 +150,12 @@
   .#{$prefix}--content-switcher-btn::before {
     position: absolute;
     z-index: 2;
-    left: 0;
     display: block;
-    width: convert.to-rem(1px);
-    height: convert.to-rem(16px);
     background-color: $border-subtle;
+    block-size: convert.to-rem(16px);
     content: '';
+    inline-size: convert.to-rem(1px);
+    inset-inline-start: 0;
   }
 
   .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only)
@@ -194,13 +194,13 @@
   }
 
   .#{$prefix}--content-switcher__icon + span {
-    margin-left: $spacing-03;
+    margin-inline-start: $spacing-03;
   }
 
   .#{$prefix}--content-switcher__label {
     z-index: 1;
     overflow: hidden;
-    max-width: 100%;
+    max-inline-size: 100%;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -244,9 +244,9 @@
   .#{$prefix}--content-switcher--icon-only
     .#{$prefix}--content-switcher-popover__wrapper:first-child
     .#{$prefix}--content-switcher-btn {
-    border-left: convert.to-rem(1px) solid $border-inverse;
-    border-bottom-left-radius: convert.to-rem(4px);
-    border-top-left-radius: convert.to-rem(4px);
+    border-end-start-radius: convert.to-rem(4px);
+    border-inline-start: convert.to-rem(1px) solid $border-inverse;
+    border-start-start-radius: convert.to-rem(4px);
   }
 
   .#{$prefix}--content-switcher--icon-only
@@ -261,9 +261,9 @@
   .#{$prefix}--content-switcher--icon-only
     .#{$prefix}--content-switcher-popover__wrapper:last-child
     .#{$prefix}--content-switcher-btn {
-    border-right: convert.to-rem(1px) solid $border-inverse;
-    border-bottom-right-radius: convert.to-rem(4px);
-    border-top-right-radius: convert.to-rem(4px);
+    border-end-end-radius: convert.to-rem(4px);
+    border-inline-end: convert.to-rem(1px) solid $border-inverse;
+    border-start-end-radius: convert.to-rem(4px);
   }
 
   .#{$prefix}--content-switcher--icon-only
@@ -277,13 +277,13 @@
 
   .#{$prefix}--content-switcher--lg .#{$prefix}--content-switcher-btn {
     // accounts for the larger icon sizes to keep the switcher at 48px
-    padding-right: convert.to-rem(14px);
-    padding-left: convert.to-rem(14px);
+    padding-inline-end: convert.to-rem(14px);
+    padding-inline-start: convert.to-rem(14px);
   }
 
   .#{$prefix}--content-switcher--lg .#{$prefix}--content-switcher-btn svg {
-    width: 20px;
-    height: 20px;
+    block-size: 20px;
+    inline-size: 20px;
   }
 
   .#{$prefix}--content-switcher--icon-only
@@ -301,7 +301,7 @@
 
   .#{$prefix}--content-switcher--icon-only.#{$prefix}--content-switcher--sm
     .#{$prefix}--btn--sm {
-    height: 2rem;
+    block-size: 2rem;
   }
 
   // Subtle border overrides