@carbon/styles 1.67.0 → 1.68.0

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

@@ -21,7 +21,8 @@
     position: relative;
     background: $field;
     block-size: 100%;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 

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

@@ -84,7 +84,9 @@
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:last-of-type {
-    box-shadow: inset 0 -1px $focus, inset -2px 0 $focus;
+    box-shadow:
+      inset 0 -1px $focus,
+      inset -2px 0 $focus;
   }
 
   .#{$prefix}--number-input--fluid

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

@@ -21,7 +21,8 @@
     position: relative;
     background: $field;
     block-size: 100%;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 

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

@@ -21,7 +21,8 @@
     position: relative;
     background: $field;
     block-size: 100%;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 

package/scss/components/list-box/_list-box.scss

@@ -515,7 +515,7 @@ $list-box-menu-width: convert.to-rem(300px);
     display: none;
     background-color: $layer;
     inline-size: $list-box-width;
-    inset-inline: 0 0;
+    inset-inline: 0;
     overflow-y: auto;
     transition: max-height $duration-fast-02 motion(standard, productive);
 
@@ -669,7 +669,8 @@ $list-box-menu-width: convert.to-rem(300px);
     padding-inline-end: $spacing-06;
     text-decoration: none;
     text-overflow: ellipsis;
-    transition: border-color $duration-fast-01 motion(standard, productive),
+    transition:
+      border-color $duration-fast-01 motion(standard, productive),
       color $duration-fast-01 motion(standard, productive);
     white-space: nowrap;
 

package/scss/components/loading/_animation.scss

@@ -30,7 +30,8 @@
 
 @mixin stop {
   // Animate the container
-  animation: #{$prefix}--rotate-end-p1 700ms motion.$ease-out forwards,
+  animation:
+    #{$prefix}--rotate-end-p1 700ms motion.$ease-out forwards,
     #{$prefix}--rotate-end-p2 700ms motion.$ease-out 700ms forwards;
 
   // Animate the stroke

package/scss/components/modal/_modal.scss

@@ -37,13 +37,15 @@
     inset-block-start: 0;
     inset-inline-start: 0;
     opacity: 0;
-    transition: opacity $duration-moderate-02 motion(exit, expressive),
+    transition:
+      opacity $duration-moderate-02 motion(exit, expressive),
       visibility 0ms linear $duration-moderate-02;
     visibility: hidden;
 
     &.is-visible {
       opacity: 1;
-      transition: opacity $duration-moderate-02 motion(entrance, expressive),
+      transition:
+        opacity $duration-moderate-02 motion(entrance, expressive),
         visibility 0ms linear;
       visibility: inherit;
 
@@ -370,7 +372,8 @@
 
     border: 1px solid transparent;
     background-color: $layer;
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       0 24px 40px -24px $ai-drop-shadow;
   }
 
@@ -378,7 +381,8 @@
     .#{$prefix}--modal-container:has(.#{$prefix}--modal-footer) {
     @include ai-popover-gradient('default', 64px, 'layer');
 
-    box-shadow: inset 0 -80px 0 -16px $layer,
+    box-shadow:
+      inset 0 -80px 0 -16px $layer,
       inset 0 -160px 70px -65px $ai-inner-shadow,
       0 24px 40px -24px $ai-drop-shadow;
   }
@@ -416,7 +420,7 @@
   }
 
   // Windows HCM fix
-  /* stylelint-disable no-duplicate-selectors */
+
   .#{$prefix}--modal-close__icon {
     @include high-contrast-mode('icon-fill');
   }
@@ -424,5 +428,4 @@
   .#{$prefix}--modal-close:focus {
     @include high-contrast-mode('focus');
   }
-  /* stylelint-enable no-duplicate-selectors */
 }

package/scss/components/notification/_actionable-notification.scss

@@ -373,7 +373,8 @@
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:focus {
     border-color: $focus-inverse;
     background-color: $notification-action-tertiary-inverse;
-    box-shadow: inset 0 0 0 button-vars.$button-outline-width $focus-inverse,
+    box-shadow:
+      inset 0 0 0 button-vars.$button-outline-width $focus-inverse,
       inset 0 0 0 button-vars.$button-border-width $background-inverse;
     color: $notification-action-tertiary-inverse-text;
   }
@@ -439,7 +440,8 @@
     inset-inline-end: 0;
     max-inline-size: convert.to-rem(48px);
     min-inline-size: convert.to-rem(48px);
-    transition: outline $duration-fast-02 motion(standard, productive),
+    transition:
+      outline $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive);
 
     &:focus {
@@ -475,7 +477,7 @@
   }
 
   // Windows HCM fix
-  /* stylelint-disable */
+
   .#{$prefix}--actionable-notification {
     @include high-contrast-mode('outline');
   }
@@ -491,5 +493,4 @@
     .#{$prefix}--actionable-notification__close-icon {
     @include high-contrast-mode('icon-fill');
   }
-  /* stylelint-enable */
 }

package/scss/components/notification/_inline-notification.scss

@@ -277,7 +277,8 @@
     inset-inline-end: 0;
     max-inline-size: convert.to-rem(48px);
     min-inline-size: convert.to-rem(48px);
-    transition: outline $duration-fast-02 motion(standard, productive),
+    transition:
+      outline $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive);
 
     &:focus {
@@ -306,7 +307,7 @@
   }
 
   // Windows HCM fix
-  /* stylelint-disable */
+
   .#{$prefix}--inline-notification {
     @include high-contrast-mode('outline');
   }
@@ -323,5 +324,4 @@
     .#{$prefix}--inline-notification__close-icon {
     @include high-contrast-mode('icon-fill');
   }
-  /* stylelint-enable */
 }

package/scss/components/notification/_toast-notification.scss

@@ -165,7 +165,9 @@
     margin-inline-start: auto;
     min-block-size: convert.to-rem(48px);
     min-inline-size: convert.to-rem(48px);
-    transition: outline $transition-base, background-color $transition-base;
+    transition:
+      outline $transition-base,
+      background-color $transition-base;
 
     &:focus {
       outline: 2px solid $focus-inverse;
@@ -222,7 +224,7 @@
   }
 
   // Windows HCM fix
-  /* stylelint-disable */
+
   .#{$prefix}--toast-notification {
     @include high-contrast-mode('outline');
   }
@@ -235,5 +237,4 @@
   .#{$prefix}--toast-notification .#{$prefix}--toast-notification__icon {
     @include high-contrast-mode('icon-fill');
   }
-  /* stylelint-enable */
 }

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

@@ -60,7 +60,8 @@
     inline-size: 100%;
     min-inline-size: 9.375rem;
     padding-inline: $spacing-05 $spacing-12;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
 
     &:focus {
@@ -511,7 +512,7 @@
     }
   }
   // Windows HCM fix
-  /* stylelint-disable */
+
   .#{$prefix}--number__control-btn:hover,
   .#{$prefix}--number__control-btn:focus {
     @include high-contrast-mode('focus');
@@ -524,7 +525,6 @@
   .#{$prefix}--number__control-btn svg {
     @include high-contrast-mode('icon-fill');
   }
-  /* stylelint-enable */
 }
 .#{$prefix}--number__controls:hover .#{$prefix}--number__control-btn::after {
   display: none;

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

@@ -40,7 +40,8 @@
     cursor: pointer;
     inline-size: convert.to-rem(40px);
     min-block-size: convert.to-rem(40px);
-    transition: outline $duration-fast-02 motion(entrance, productive),
+    transition:
+      outline $duration-fast-02 motion(entrance, productive),
       background-color $duration-fast-02 motion(entrance, productive);
 
     &:focus {
@@ -272,7 +273,8 @@
     inline-size: 100%;
     max-inline-size: 11.25rem;
     text-align: start;
-    transition: outline $duration-fast-02 motion(entrance, productive),
+    transition:
+      outline $duration-fast-02 motion(entrance, productive),
       background-color $duration-fast-02 motion(entrance, productive),
       color $duration-fast-02 motion(entrance, productive);
 

package/scss/components/pagination/_pagination.scss

@@ -220,7 +220,8 @@
     fill: $icon-primary;
     inline-size: convert.to-rem(40px);
     min-block-size: convert.to-rem(32px);
-    transition: outline $duration-fast-02 motion(standard, productive),
+    transition:
+      outline $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive);
   }
 
@@ -283,7 +284,7 @@
   }
 
   // Windows HCM fix
-  // stylelint-disable-next-line no-duplicate-selectors
+
   .#{$prefix}--pagination__button,
   .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
     @include high-contrast-mode('outline');

package/scss/components/pagination/_unstable_pagination.scss

@@ -85,7 +85,8 @@
     fill: $icon-primary;
     inline-size: convert.to-rem(40px);
     min-block-size: convert.to-rem(32px);
-    transition: outline $duration-fast-02 motion(standard, productive),
+    transition:
+      outline $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive);
   }
 

package/scss/components/pagination-nav/_pagination-nav.scss

@@ -88,7 +88,8 @@
     outline: 0;
     text-align: center;
     text-decoration: none;
-    transition: background-color $duration-fast-02 motion(standard, productive),
+    transition:
+      background-color $duration-fast-02 motion(standard, productive),
       color $duration-fast-02 motion(standard, productive);
     user-select: none;
 
@@ -142,7 +143,7 @@
     max-block-size: layout.size('height');
     text-indent: calc(50% - 4.5px);
     // Override some Firefox user-agent styles
-    @-moz-document url-prefix() {
+    @document url-prefix() {
       text-indent: 0;
     }
   }

package/scss/components/popover/_popover.scss

@@ -62,7 +62,6 @@ $popover-text-color: custom-property.get-var(
 // The distance between the popover container and the triggering element
 // Specify the distance between the popover and the trigger. This value must
 // have a unit otherwise the `calc()` expression will not work
-// stylelint-disable-next-line length-zero-no-unit
 $popover-offset: custom-property.get-var('popover-offset', 0rem);
 
 // Customize the dimensions of the caret by specifying its width or height.
@@ -105,11 +104,10 @@ $popover-caret-height: custom-property.get-var(
   }
 
   // Drop shadow modifier
-  .#{$prefix}--popover--drop-shadow .#{$prefix}--popover {
-    @include custom-property.declaration(
-      'popover-drop-shadow',
-      drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))
-    );
+  .#{$prefix}--popover--drop-shadow
+    .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
   }
 
   // Caret tip modifier
@@ -297,7 +295,7 @@ $popover-caret-height: custom-property.get-var(
     > .#{$prefix}--popover-content::before {
     block-size: $popover-offset;
     inset-block-start: 0;
-    inset-inline: 0 0;
+    inset-inline: 0;
     transform: translateY(-100%);
   }
 
@@ -460,7 +458,7 @@ $popover-caret-height: custom-property.get-var(
     > .#{$prefix}--popover-content::before {
     block-size: $popover-offset;
     inset-block-end: 0;
-    inset-inline: 0 0;
+    inset-inline: 0;
     transform: translateY(100%);
   }
 
@@ -616,7 +614,7 @@ $popover-caret-height: custom-property.get-var(
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content::before {
     inline-size: $popover-offset;
-    inset-block: 0 0;
+    inset-block: 0;
     inset-inline-start: 0;
     transform: translateX(-100%);
   }
@@ -783,7 +781,7 @@ $popover-caret-height: custom-property.get-var(
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content::before {
     inline-size: $popover-offset;
-    inset-block: 0 0;
+    inset-block: 0;
     inset-inline-end: 0;
     transform: translateX(100%);
   }

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

@@ -91,7 +91,8 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     line-height: 1.45;
     max-inline-size: convert.to-rem(88px);
     text-overflow: ellipsis;
-    transition: box-shadow $duration-fast-02 motion(standard, productive),
+    transition:
+      box-shadow $duration-fast-02 motion(standard, productive),
       color $duration-fast-02 motion(standard, productive);
     white-space: nowrap;
 

package/scss/components/search/_search.scss

@@ -54,7 +54,8 @@
 
     inline-size: 100%;
     text-overflow: ellipsis;
-    transition: background-color $duration-fast-02 motion(standard, productive),
+    transition:
+      background-color $duration-fast-02 motion(standard, productive),
       outline $duration-fast-02 motion(standard, productive);
 
     &:focus {
@@ -199,7 +200,8 @@
     fill: $icon-primary;
     inline-size: convert.to-rem(40px);
     opacity: 1;
-    transition: opacity $duration-fast-02 motion(standard, productive),
+    transition:
+      opacity $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive),
       outline $duration-fast-02 motion(standard, productive),
       border $duration-fast-02 motion(standard, productive);
@@ -324,7 +326,8 @@
   .#{$prefix}--search--expandable .#{$prefix}--search-input {
     padding: 0;
     inline-size: 0;
-    transition: padding $duration-fast-01 motion(standard, productive),
+    transition:
+      padding $duration-fast-01 motion(standard, productive),
       width 0s linear $duration-fast-01;
 
     &::placeholder {

package/scss/components/select/_select.scss

@@ -75,7 +75,7 @@
     }
 
     // Select text renders a little high on Firefox
-    @-moz-document url-prefix() {
+    @document url-prefix() {
       // Removes dotted inner focus
       &:-moz-focusring,
       &::-moz-focus-inner {
@@ -344,7 +344,7 @@
   }
 
   // Windows HCM fix
-  // stylelint-disable-next-line no-duplicate-selectors
+
   .#{$prefix}--select__arrow {
     @include high-contrast-mode('icon-fill');
   }

package/scss/components/slider/_slider.scss

@@ -187,10 +187,13 @@
     position: absolute;
     border-radius: 50%;
     background: $layer-selected-inverse;
-    box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
+    box-shadow:
+      inset 0 0 0 1px transparent,
+      inset 0 0 0 2px transparent;
     inset: 0;
     outline: none;
-    transition: transform $duration-fast-02 motion(standard, productive),
+    transition:
+      transform $duration-fast-02 motion(standard, productive),
       background $duration-fast-02 motion(standard, productive),
       box-shadow $duration-fast-02 motion(standard, productive);
 
@@ -201,7 +204,9 @@
 
     &:focus {
       background-color: $interactive;
-      box-shadow: inset 0 0 0 2px $interactive, inset 0 0 0 3px $layer;
+      box-shadow:
+        inset 0 0 0 2px $interactive,
+        inset 0 0 0 3px $layer;
       // 20px / 14px = 1.4286
       transform: scale(1.4286);
     }
@@ -372,19 +377,36 @@
 
     &:hover {
       cursor: not-allowed;
-      transform: translate(-50%, -50%);
+      transform: none;
     }
 
     &:focus {
       background-color: $border-disabled;
       box-shadow: none;
       outline: none;
-      transform: translate(-50%, -50%);
+      transform: none;
     }
 
     &:active {
       background: $border-disabled;
-      transform: translate(-50%, -50%);
+      box-shadow: none;
+      transform: none;
+    }
+  }
+
+  .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb--lower,
+  .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb--upper {
+    background-color: transparent;
+
+    &:active,
+    &:hover,
+    &:focus {
+      background-color: transparent;
+      transform: none;
+    }
+
+    .#{$prefix}--slider__thumb-icon {
+      fill: $border-disabled;
     }
   }
 
@@ -479,7 +501,7 @@
   }
 
   // Windows HCM fix
-  /* stylelint-disable */
+
   .#{$prefix}--slider__thumb {
     @include high-contrast-mode('outline');
   }
@@ -489,5 +511,4 @@
   .#{$prefix}--slider__track {
     @include high-contrast-mode('outline');
   }
-  /* stylelint-enable */
 }

package/scss/components/slug/_slug.scss

@@ -76,7 +76,8 @@ $sizes: (
     color: $text-primary;
     font-weight: 600;
     outline: none;
-    transition: color $duration-fast-01 motion(entrance, productive),
+    transition:
+      color $duration-fast-01 motion(entrance, productive),
       border-color $duration-fast-01 motion(entrance, productive),
       box-shadow $duration-fast-01 motion(entrance, productive),
       background $duration-fast-01 motion(entrance, productive);
@@ -114,7 +115,9 @@ $sizes: (
 
   .#{$prefix}--slug .#{$prefix}--slug__button:hover:active {
     background: $border-inverse;
-    box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $focus-inset;
+    box-shadow:
+      inset 0 0 0 1px $focus,
+      inset 0 0 0 2px $focus-inset;
     color: $text-inverse;
   }
 
@@ -192,7 +195,8 @@ $sizes: (
     inset-inline-start: 0;
     opacity: 1;
     transform: translateY(-50%);
-    transition: background $duration-fast-01 motion(entrance, productive),
+    transition:
+      background $duration-fast-01 motion(entrance, productive),
       box-shadow $duration-fast-01 motion(entrance, productive);
   }
 
@@ -254,7 +258,8 @@ $sizes: (
     border: 1px solid transparent;
     border-radius: convert.to-rem(8px);
     // Need to make tokens
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       -40px 44px 60px -24px $ai-popover-shadow-outer-01,
       -56px 64px 64px -24px $ai-popover-shadow-outer-02;
     color: $text-primary;
@@ -707,7 +712,9 @@ $sizes: (
 
   .#{$prefix}--slug .#{$prefix}--slug-actions .#{$prefix}--btn:focus {
     border-color: $focus;
-    box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $background;
+    box-shadow:
+      inset 0 0 0 1px $focus,
+      inset 0 0 0 2px $background;
   }
 
   .#{$prefix}--slug .#{$prefix}--slug-actions .#{$prefix}--btn--primary {

package/scss/components/tabs/_tabs.scss

@@ -137,6 +137,14 @@
       &:focus {
         @include focus-outline('outline');
       }
+
+      &:hover {
+        background-color: $background-hover;
+      }
+
+      &:active {
+        background-color: $background-active;
+      }
     }
 
     .#{$prefix}--tab--overflow-nav-button--hidden {
@@ -147,16 +155,29 @@
       margin: 0;
       background-color: $layer-accent;
       inline-size: $spacing-09;
+
+      &:hover {
+        background-color: $layer-accent-hover;
+      }
+
+      &:active {
+        background-color: $layer-accent-active;
+      }
     }
 
     .#{$prefix}--tab--overflow-nav-button svg {
       z-index: 2;
       fill: $icon-primary;
+
+      &:active,
+      &:hover {
+        fill: $icon-primary;
+      }
     }
 
     .#{$prefix}--tab--overflow-nav-button--next {
-      position: absolute;
-      inset-block: 0 0;
+      position: relative;
+      inset-block: 0;
       inset-inline-end: 0;
     }
 
@@ -187,9 +208,9 @@
     }
 
     .#{$prefix}--tab--overflow-nav-button--previous {
-      position: absolute;
+      position: relative;
       z-index: 1;
-      inset-block: 0 0;
+      inset-block: 0;
       inset-inline-start: 0;
     }
 
@@ -332,7 +353,8 @@
     }
 
     .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link {
-      transition: color $duration-fast-01 motion(standard, productive),
+      transition:
+        color $duration-fast-01 motion(standard, productive),
         border-bottom-color $duration-fast-01 motion(standard, productive),
         outline $duration-fast-01 motion(standard, productive);
     }
@@ -463,7 +485,8 @@
       text-align: start;
       text-decoration: none;
       text-overflow: ellipsis;
-      transition: border $duration-fast-01 motion(standard, productive),
+      transition:
+        border $duration-fast-01 motion(standard, productive),
         outline $duration-fast-01 motion(standard, productive);
       white-space: nowrap;
 
@@ -504,6 +527,10 @@
       overflow-x: visible;
     }
 
+    .#{$prefix}--tabs__nav-item--icon-only {
+      margin-inline-end: convert.to-rem(1px);
+    }
+
     .#{$prefix}--tabs__nav-item--icon-only,
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon-only {
       display: flex;

package/scss/components/tag/_tag.scss

@@ -303,7 +303,8 @@
     color: currentColor;
     cursor: pointer;
     inline-size: layout.size('height');
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       box-shadow $duration-fast-01 motion(standard, productive);
 
     svg {
@@ -396,8 +397,12 @@
     border-color: currentColor;
   }
 
+  .#{$prefix}--tag--filter .#{$prefix}--slug {
+    min-inline-size: convert.to-rem(32.14px);
+  }
+
   // Windows HCM fix
-  /* stylelint-disable */
+
   .#{$prefix}--tag {
     @include high-contrast-mode('outline');
   }
@@ -424,7 +429,6 @@
     + .#{$prefix}--tag-label-tooltip {
     max-inline-size: convert.to-rem(158px);
   }
-  /* stylelint-enable */
 
   .#{$prefix}--interactive--tag-children {
     display: inline-flex;