@carbon/styles 1.44.0 → 1.45.0-rc.0

package/scss/components/menu/_menu.scss

@@ -35,6 +35,7 @@
     max-inline-size: 18rem;
     min-inline-size: 10rem;
     opacity: 0;
+    overflow-y: auto;
     visibility: hidden;
   }
 
@@ -66,7 +67,7 @@
     display: grid;
     align-items: center;
     block-size: 2rem;
-    color: $text-primary;
+    color: $text-secondary;
     column-gap: $spacing-03;
     cursor: pointer;
     grid-template-columns: 1fr max-content;
@@ -76,10 +77,19 @@
     &:focus {
       @include focus-outline('outline');
     }
+
+    svg {
+      color: $icon-secondary;
+    }
   }
 
   .#{$prefix}--menu-item:hover {
     background-color: $layer-hover;
+    color: $text-primary;
+
+    svg {
+      color: $icon-primary;
+    }
   }
 
   $supported-sizes: (

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

@@ -223,6 +223,10 @@
     padding: convert.to-rem(15px) 0;
   }
 
+  .#{$prefix}--actionable-notification__button-wrapper {
+    display: flex;
+  }
+
   .#{$prefix}--actionable-notification--toast
     .#{$prefix}--actionable-notification__text-wrapper {
     padding: convert.to-rem(15px) 0 convert.to-rem(23px) 0;

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

@@ -438,7 +438,8 @@
     padding-inline-end: convert.to-rem(144px);
   }
 
-  .#{$prefix}--number__input-wrapper--slug input[type='number'] {
+  .#{$prefix}--number__input-wrapper--slug input[type='number'],
+  .#{$prefix}--number__input-wrapper--slug input[type='number']:disabled {
     @include ai-gradient;
 
     padding-inline-end: convert.to-rem(112px);

package/scss/components/popover/_popover.scss

@@ -172,7 +172,7 @@ $popover-caret-height: custom-property.get-var(
     will-change: transform;
   }
 
-  .#{$prefix}--popover--open
+  .#{$prefix}--popover--caret.#{$prefix}--popover--open
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret {
     display: block;

package/scss/components/slider/_slider.scss

@@ -21,6 +21,7 @@
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert';
+@use '../../utilities/custom-property';
 
 /// Slider styles
 /// @access public
@@ -85,35 +86,131 @@
     transition: background $duration-fast-02 motion(standard, productive);
   }
 
-  .#{$prefix}--slider__thumb {
+  .#{$prefix}--slider__thumb-wrapper {
     position: absolute;
     z-index: 3;
+    block-size: convert.to-rem(14px);
+    inline-size: convert.to-rem(14px);
+    transform: translate(-50%, -50%);
+    @include custom-property.declaration('tooltip-padding-inline', $spacing-03);
+    @include custom-property.declaration('popover-offset', $spacing-03);
+
+    .#{$prefix}--slider-container--rtl & {
+      transform: translate(50%, -50%);
+    }
+  }
+
+  .#{$prefix}--slider__thumb-wrapper--lower,
+  .#{$prefix}--slider__thumb-wrapper--upper {
+    block-size: 24px;
+    inline-size: 16px;
+    @include custom-property.declaration(
+      'popover-offset',
+      custom-property.get-var('popover-caret-height', $spacing-03)
+    );
+  }
+
+  .#{$prefix}--slider__thumb-wrapper--lower {
+    transform: translate(-100%, -50%);
+
+    > .#{$prefix}--popover > .#{$prefix}--popover-content {
+      transform: translate(
+        50%,
+        calc(-100% - custom-property.get-var('popover-offset', 0rem))
+      );
+    }
+
+    > .#{$prefix}--popover > .#{$prefix}--popover-caret {
+      inset-inline-end: 0;
+      inset-inline-start: revert;
+      transform: translate(
+        50%,
+        calc(-1 * custom-property.get-var('popover-offset', 0rem))
+      );
+    }
+  }
+
+  .#{$prefix}--slider-container--rtl .#{$prefix}--slider__thumb-wrapper--lower {
+    transform: translate(100%, -50%);
+
+    > .#{$prefix}--popover > .#{$prefix}--popover-content {
+      transform: translate(
+        0,
+        calc(-100% - custom-property.get-var('popover-offset', 0rem))
+      );
+    }
+
+    > .#{$prefix}--popover > .#{$prefix}--popover-caret {
+      transform: translate(
+        -50%,
+        calc(-1 * custom-property.get-var('popover-offset', 0rem))
+      );
+    }
+  }
+
+  .#{$prefix}--slider__thumb-wrapper--upper {
+    transform: translate(0, -50%);
+
+    > .#{$prefix}--popover > .#{$prefix}--popover-content {
+      transform: translate(
+        -50%,
+        calc(-100% - custom-property.get-var('popover-offset', 0rem))
+      );
+    }
+
+    > .#{$prefix}--popover > .#{$prefix}--popover-caret {
+      inset-inline-start: 0;
+      transform: translate(
+        -50%,
+        calc(-1 * custom-property.get-var('popover-offset', 0rem))
+      );
+    }
+  }
+
+  .#{$prefix}--slider-container--rtl .#{$prefix}--slider__thumb-wrapper--upper {
+    transform: translate(0, -50%);
+
+    > .#{$prefix}--popover > .#{$prefix}--popover-content {
+      transform: translate(
+        0,
+        calc(-100% - custom-property.get-var('popover-offset', 0rem))
+      );
+    }
+
+    > .#{$prefix}--popover > .#{$prefix}--popover-caret {
+      transform: translate(
+        50%,
+        calc(-1 * custom-property.get-var('popover-offset', 0rem))
+      );
+    }
+  }
+
+  .#{$prefix}--slider__thumb {
+    position: absolute;
     border-radius: 50%;
     background: $layer-selected-inverse;
-    block-size: convert.to-rem(14px);
     box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
-    inline-size: convert.to-rem(14px);
+    inset: 0;
     outline: none;
-    transform: translate(-50%, -50%);
     transition: transform $duration-fast-02 motion(standard, productive),
       background $duration-fast-02 motion(standard, productive),
       box-shadow $duration-fast-02 motion(standard, productive);
 
     &:hover {
       // 20px / 14px = 1.4286
-      transform: translate(-50%, -50%) scale(1.4286);
+      transform: scale(1.4286);
     }
 
     &:focus {
       background-color: $interactive;
       box-shadow: inset 0 0 0 2px $interactive, inset 0 0 0 3px $layer;
       // 20px / 14px = 1.4286
-      transform: translate(-50%, -50%) scale(1.4286);
+      transform: scale(1.4286);
     }
 
     &:active {
       box-shadow: inset 0 0 0 2px $interactive;
-      transform: translate(-50%, -50%) scale(1.4286);
+      transform: scale(1.4286);
     }
   }
 
@@ -128,14 +225,12 @@
 
   .#{$prefix}--slider__thumb--lower,
   .#{$prefix}--slider__thumb--upper {
-    display: block;
+    position: absolute;
     /* stylelint-disable-next-line declaration-property-value-disallowed-list */
     border-radius: unset;
     background-color: transparent;
-    block-size: 24px;
     box-shadow: none;
-    inline-size: 16px;
-    transform: translate(-100%, -50%);
+    inset: 0;
     transition: none;
 
     &::before {
@@ -151,7 +246,7 @@
     }
 
     &:hover {
-      transform: translate(-100%, -50%);
+      transform: none;
 
       .#{$prefix}--slider__thumb-icon {
         fill: $text-secondary;
@@ -160,13 +255,13 @@
 
     &:active {
       box-shadow: none;
-      transform: translate(-100%, -50%);
+      transform: none;
     }
 
     &:focus {
       background-color: transparent;
       box-shadow: none;
-      transform: translate(-100%, -50%);
+      transform: none;
 
       .#{$prefix}--slider__thumb-icon {
         display: none;
@@ -185,23 +280,17 @@
   }
 
   .#{$prefix}--slider__thumb--upper {
-    transform: translate(0, -50%);
+    transform: none;
 
     &::before {
       inset-inline-end: auto;
       inset-inline-start: 0;
     }
 
-    &:hover {
-      transform: translate(0, -50%);
-    }
-
-    &:active {
-      transform: translate(0, -50%);
-    }
-
+    &:hover,
+    &:active,
     &:focus {
-      transform: translate(0, -50%);
+      transform: none;
     }
   }
 
@@ -213,6 +302,10 @@
     position: relative;
   }
 
+  .#{$prefix}--slider-text-input-wrapper--hidden {
+    display: none;
+  }
+
   .#{$prefix}--slider-text-input,
   .#{$prefix}-slider-text-input {
     -moz-appearance: textfield;
@@ -226,11 +319,9 @@
     }
   }
 
-  .#{$prefix}--slider-text-input--hidden {
-    display: none;
-  }
-
-  .#{$prefix}--slider__thumb:focus ~ .#{$prefix}--slider__filled-track {
+  .#{$prefix}--slider__thumb:focus ~ .#{$prefix}--slider__filled-track,
+  .#{$prefix}--slider__thumb-wrapper:focus-within
+    ~ .#{$prefix}--slider__filled-track {
     background-color: $border-interactive;
   }
 
@@ -368,17 +459,20 @@
   }
 
   .#{$prefix}--slider-container.#{$prefix}--skeleton {
+    .#{$prefix}--slider__thumb-wrapper {
+      inset-inline-start: 50%;
+    }
+
     .#{$prefix}--slider__thumb {
       cursor: default;
-      inset-inline-start: 50%;
       pointer-events: none;
     }
 
-    .#{$prefix}--slider__thumb--lower {
+    .#{$prefix}--slider__thumb-wrapper--lower {
       inset-inline-start: 0;
     }
 
-    .#{$prefix}--slider__thumb--upper {
+    .#{$prefix}--slider__thumb-wrapper--upper {
       inset-inline-start: 100%;
     }
   }