@carbon/styles 1.44.0-rc.0 → 1.45.0-rc.0

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

@@ -42,7 +42,7 @@
     align-items: center;
     margin: 0;
     block-size: convert.to-rem(16px);
-    inline-size: calc(100% - 2rem);
+    inline-size: auto;
     inset-block-start: convert.to-rem(13px);
     inset-inline-start: $spacing-05;
   }
@@ -222,4 +222,15 @@
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper--slug {
     @include ai-gradient;
   }
+
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--text-area--invalid
+    ~ .#{$prefix}--slug,
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--text-area--warn
+    ~ .#{$prefix}--slug {
+    inset-inline-end: $spacing-05;
+  }
 }

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

@@ -92,10 +92,10 @@
 
   .#{$prefix}--text-input--fluid
     .#{$prefix}--text-input--invalid
-    + .#{$prefix}--text-input__divider,
+    ~ .#{$prefix}--text-input__divider,
   .#{$prefix}--text-input--fluid
     .#{$prefix}--text-input--warning
-    + .#{$prefix}--text-input__divider {
+    ~ .#{$prefix}--text-input__divider {
     display: block;
     border-style: solid;
     border-color: $border-subtle;
@@ -190,6 +190,27 @@
   .#{$prefix}--text-input--fluid
     .#{$prefix}--text-input__field-wrapper--slug
     .#{$prefix}--slug {
-    inset-block-start: convert.to-rem(43px);
+    inset-block-start: convert.to-rem(42px);
+  }
+
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input--invalid
+    ~ .#{$prefix}--slug,
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input--warning
+    ~ .#{$prefix}--slug {
+    inset-inline-end: $spacing-05;
+  }
+
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper--slug
+    .#{$prefix}--text-input,
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper--slug
+    .#{$prefix}--text-input--invalid,
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper--slug
+    .#{$prefix}--text-input--warning {
+    padding-inline-end: $spacing-08;
   }
 }

package/scss/components/fluid-time-picker/_fluid-time-picker.scss

@@ -112,7 +112,9 @@
     padding-block-start: convert.to-rem(30px);
   }
 
-  .#{$prefix}--select--fluid:last-of-type .#{$prefix}--select-input {
+  .#{$prefix}--time-picker--fluid
+    .#{$prefix}--select--fluid:last-of-type
+    .#{$prefix}--select-input {
     border-inline-end: 2px solid transparent;
   }
 

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

@@ -369,7 +369,7 @@ $list-box-menu-width: convert.to-rem(300px);
   .#{$prefix}--list-box--warning
     .#{$prefix}--list-box__field
     .#{$prefix}--text-input--empty {
-    padding-inline-end: carbon--mini-units(9);
+    padding-inline-end: $spacing-10;
   }
 
   .#{$prefix}--list-box[data-invalid]
@@ -902,19 +902,39 @@ $list-box-menu-width: convert.to-rem(300px);
   }
 
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--list-box__field,
-  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--text-input {
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--text-input--empty {
     padding-inline-end: $spacing-10;
   }
 
   .#{$prefix}--list-box__wrapper--slug
-    .#{$prefix}--list-box--invalid
+    .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty) {
+    padding-inline-end: $spacing-12;
+  }
+
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--text-input--empty,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid[data-invalid]
     .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--text-input--empty,
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--warning
     .#{$prefix}--list-box__field {
     padding-inline-end: $spacing-12;
   }
 
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty),
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty) {
+    padding-inline-end: convert.to-rem(120px);
+  }
+
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--invalid
     .#{$prefix}--slug,

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/radio-button/_radio-button.scss

@@ -280,4 +280,27 @@ $radio-border-width: 1px !default;
     margin-inline-end: 0;
     margin-inline-start: $spacing-03;
   }
+
+  // Slug styles
+  .#{$prefix}--radio-button-group--slug legend.#{$prefix}--label,
+  .#{$prefix}--radio-button-wrapper--slug
+    .#{$prefix}--radio-button__label-text {
+    display: flex;
+  }
+
+  .#{$prefix}--radio-button-group--slug
+    legend.#{$prefix}--label
+    .#{$prefix}--slug,
+  .#{$prefix}--radio-button-wrapper--slug
+    .#{$prefix}--radio-button__label-text
+    .#{$prefix}--slug {
+    margin-inline-start: $spacing-03;
+  }
+
+  .#{$prefix}--radio-button-wrapper--slug
+    .#{$prefix}--radio-button__label-text
+    .#{$prefix}--slug__button--inline {
+    line-height: inherit;
+    margin-block-start: convert.to-rem(-1px);
+  }
 }

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%;
     }
   }

package/scss/components/slug/_slug.scss

@@ -4,6 +4,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/convert';
 
 $sizes: (
@@ -324,22 +325,12 @@ $sizes: (
 
   // Slug callout styles
   .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--slug-content {
+    @include callout-gradient();
+
     border: 1px solid $border-subtle;
     border-radius: 16px;
     // 84px seems to make this fully opaque?
     backdrop-filter: blur(25px);
-    background: linear-gradient(
-        0deg,
-        $slug-callout-aura-start 0%,
-        $slug-callout-aura-end 33%,
-        transparent 100%
-      ),
-      linear-gradient(
-          180deg,
-          $slug-callout-gradient-top 0%,
-          $slug-callout-gradient-bottom 100%
-        )
-        rgba(0, 0, 0, 0.01);
     // box-shadow seems to match the spec better
     // than the same values plugged into `drop-shadow`
     // filter: drop-shadow(-45px 45px 100px rgba(0, 0, 0, 0.2));

package/scss/components/tile/_tile.scss

@@ -13,6 +13,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/button-reset';
 @use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
@@ -368,6 +369,107 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     fill: $icon-disabled;
   }
 
+  // Slug styles
+  .#{$prefix}--tile > .#{$prefix}--slug,
+  .#{$prefix}--tile--expandable > div > .#{$prefix}--slug,
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon {
+    position: absolute;
+    inset-block-start: $spacing-05;
+    inset-inline-end: $spacing-05;
+  }
+
+  .#{$prefix}--tile.#{$prefix}--tile--selectable > .#{$prefix}--slug {
+    inset-inline-end: $spacing-08;
+  }
+
+  .#{$prefix}--tile.#{$prefix}--tile--clickable > .#{$prefix}--slug {
+    pointer-events: none;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile {
+    @include callout-gradient();
+
+    border: 1px solid $border-tile;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--expandable:hover {
+    @include callout-gradient();
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
+    position: absolute;
+    display: block;
+    block-size: 100%;
+    content: '';
+    inline-size: 100%;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    opacity: 0;
+    transition: opacity $duration-fast-02 motion(standard, productive);
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
+    @include callout-gradient('hover');
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::before,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable:hover::before {
+    opacity: 1;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
+    @include callout-gradient('selected');
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected::after {
+    opacity: 1;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected {
+    border-color: $border-inverse;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
+    .#{$prefix}--tile-content,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable
+    .#{$prefix}--tile-content {
+    position: relative;
+    z-index: 1;
+    cursor: pointer;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable > .#{$prefix}--slug,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
+    > .#{$prefix}--tile__checkmark {
+    z-index: 1;
+  }
+
+  .#{$prefix}--tile--expandable:has(
+      .#{$prefix}--slug > .#{$prefix}--popover--open
+    ) {
+    overflow: visible;
+  }
+
+  // To Do: Replace svg overrides with actual AI icon
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon rect {
+    stroke: $icon-primary;
+  }
+
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon path {
+    fill: $icon-primary;
+  }
+
+  // Tile with slug and rounded corners
+  .#{$prefix}--tile--slug-rounded,
+  .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::after,
+  .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--clickable::before {
+    border-radius: $spacing-05;
+  }
+
   // Windows HCM fix
   .#{$prefix}--tile__chevron svg,
   .#{$prefix}--tile__checkmark svg,