@carbon/styles 1.42.1 → 1.44.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.42.1",
+  "version": "1.44.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
     "@carbon/grid": "^11.21.0",
     "@carbon/layout": "^11.20.0",
     "@carbon/motion": "^11.16.0",
-    "@carbon/themes": "^11.27.1",
+    "@carbon/themes": "^11.27.0",
     "@carbon/type": "^11.25.0",
     "@ibm/plex": "6.0.0-next.6"
   },
@@ -65,5 +65,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "30bacc5d251cb7579b313091b607b075f98c144c"
+  "gitHead": "c9e8c54239275eb4451b25f7f11c4b8bf40ddd43"
 }

package/scss/components/button/_button.scss

@@ -390,6 +390,12 @@
     }
   }
 
+  .#{$prefix}--btn-set .#{$prefix}--btn.#{$prefix}--btn--loading {
+    border-color: transparent;
+    background-color: transparent;
+    box-shadow: none;
+  }
+
   // Windows HCM fix
   .#{$prefix}--btn:focus {
     @include high-contrast-mode('focus');

package/scss/components/combo-button/_combo-button.scss

@@ -29,7 +29,7 @@
   @each $size, $trigger in $triggerSizes {
     .#{$prefix}--combo-button__container--#{$size}
       .#{$prefix}--combo-button__primary-action {
-      min-inline-size: 10rem - convert.to-rem(1px) - $trigger;
+      min-inline-size: 12rem - convert.to-rem(1px) - $trigger;
     }
   }
 

package/scss/components/data-table/expandable/_data-table-expandable.scss

@@ -215,7 +215,7 @@
     align-items: center;
     justify-content: center;
     padding: 0 $spacing-03;
-    // Account for the border in `.bx--table-expand`
+    // Account for the border in `.cds--table-expand`
     block-size: calc(100% + 1px);
     inline-size: 100%;
     vertical-align: inherit;

package/scss/components/date-picker/_date-picker.scss

@@ -13,6 +13,7 @@
 @use '../../theme' as *;
 @use '../../spacing' as *;
 @use '../../type' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/component-reset';
 @use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
@@ -55,7 +56,7 @@
     align-items: center;
   }
 
-  .#{$prefix}--date-picker-input__wrapper span {
+  .#{$prefix}--date-picker-input__wrapper > span {
     position: relative;
   }
 
@@ -176,7 +177,6 @@
 
   .#{$prefix}--date-picker__input:disabled ~ .#{$prefix}--date-picker__icon {
     cursor: not-allowed;
-    fill: $icon-disabled;
   }
 
   .#{$prefix}--date-picker--range
@@ -189,6 +189,32 @@
     inline-size: convert.to-rem(143.5px);
   }
 
+  // Styles for `Slug` rendered inside `DatePickerInput`
+  .#{$prefix}--date-picker-input__wrapper--slug .#{$prefix}--slug {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-08;
+    transform: translateY(-50%);
+  }
+
+  .#{$prefix}--date-picker-input__wrapper--slug
+    .#{$prefix}--date-picker__input {
+    @include ai-gradient;
+
+    padding-inline-end: $spacing-10;
+  }
+
+  // Read-only State
+  .#{$prefix}--date-picker__input[readonly] {
+    background: transparent;
+    border-block-end-color: $border-subtle;
+    cursor: text;
+  }
+
+  .#{$prefix}--date-picker__input[readonly] + .#{$prefix}--date-picker__icon {
+    fill: $icon-disabled;
+  }
+
   // Skeleton State
   .#{$prefix}--date-picker.#{$prefix}--skeleton input,
   .#{$prefix}--date-picker__input.#{$prefix}--skeleton {
@@ -205,7 +231,6 @@
     @include skeleton;
 
     block-size: convert.to-rem(14px);
-
     inline-size: convert.to-rem(75px);
   }
 
@@ -214,15 +239,4 @@
   .#{$prefix}--date-picker__icon {
     @include high-contrast-mode('icon-fill');
   }
-
-  // readonly
-  .#{$prefix}--date-picker__input[readonly] {
-    background: transparent;
-    border-block-end-color: $border-subtle;
-    cursor: text;
-  }
-
-  .#{$prefix}--date-picker__input[readonly] + .#{$prefix}--date-picker__icon {
-    fill: $icon-disabled;
-  }
 }

package/scss/components/dropdown/_dropdown.scss

@@ -155,7 +155,7 @@
 
   button.#{$prefix}--dropdown-text {
     border: none;
-    // button-reset mixin contradicts with bx--dropdown-text styles
+    // button-reset mixin contradicts with cds--dropdown-text styles
     background: none;
     color: $text-primary;
     inline-size: 100%;
@@ -171,7 +171,7 @@
 
     display: block;
     overflow: hidden;
-    // Account for the border in `.bx--dropdown`
+    // Account for the border in `.cds--dropdown`
     block-size: calc(100% + 1px);
     // 2rem + SVG width
     padding-inline-end: convert.to-rem(42px);
@@ -284,13 +284,13 @@
   // We don't want to apply focus styles via focus selector when using the aria-activedescendant structure
   .#{$prefix}--dropdown-list[aria-activedescendant]
     .#{$prefix}--dropdown-link:focus {
-    // Copied from .bx--dropdown-link styles
+    // Copied from .cds--dropdown-link styles
     padding: convert.to-rem(11px) 0;
     margin: 0 $spacing-05;
     outline: none;
   }
 
-  // Need added weight for item that is :focused and .bx--dropdown--focused
+  // Need added weight for item that is :focused and .cds--dropdown--focused
   .#{$prefix}--dropdown-list[aria-activedescendant]
     .#{$prefix}--dropdown--focused:focus {
     // copied from default focus styles

package/scss/components/file-uploader/_file-uploader.scss

@@ -53,7 +53,7 @@
   }
 
   // This class is of old markup with "select file" button
-  // New code should use link-style "select file" UI (`.bx--file-browse-btn`)
+  // New code should use link-style "select file" UI (`.cds--file-browse-btn`)
   // TODO: deprecate this block
   .#{$prefix}--file-btn {
     display: inline-flex;
@@ -160,7 +160,7 @@
     }
 
     .#{$prefix}--inline-loading__animation .#{$prefix}--loading {
-      // Vanilla markup has `.bx--inline-loading__animation` which is used for `margin-right` adjustment
+      // Vanilla markup has `.cds--inline-loading__animation` which is used for `margin-right` adjustment
       margin-inline-end: 0;
     }
 

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

@@ -12,6 +12,7 @@
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../date-picker';
@@ -397,4 +398,16 @@
     .#{$prefix}--date-picker__input {
     border-inline-start-color: $border-subtle;
   }
+
+  // Slug styles
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper--slug
+    .#{$prefix}--slug {
+    inset-block-start: convert.to-rem(43px);
+  }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper--slug {
+    @include ai-gradient;
+  }
 }

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

@@ -12,6 +12,7 @@
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../number-input';
@@ -71,93 +72,76 @@
     transform: translate(0);
   }
 
-  .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn,
   .#{$prefix}--number-input--fluid
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
-    border-block-end: 1px solid transparent;
+    border-block-end-color: $focus;
+    box-shadow: inset 0 -1px $focus;
   }
 
-  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
-    .#{$prefix}--number {
-    @include focus-outline('outline');
-  }
-
-  // Weird overrides (needed to override focus borders on stepper buttons when hovered while input has focus)
-  .#{$prefix}--number-input--fluid:not(
-      .#{$prefix}--number-input--fluid--invalid
-    )
-    .#{$prefix}--number
-    .#{$prefix}--number__input-wrapper:not(
-      .#{$prefix}--number__input-wrapper--warning
-    )
+  .#{$prefix}--number-input--fluid
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn:hover {
-    outline: 2px solid transparent;
+    .#{$prefix}--number__control-btn:last-of-type {
+    box-shadow: inset 0 -1px $focus, inset -2px 0 $focus;
   }
 
-  .#{$prefix}--number-input--fluid:not(
-      .#{$prefix}--number-input--fluid--invalid
-    )
-    .#{$prefix}--number
-    .#{$prefix}--number__input-wrapper:not(
-      .#{$prefix}--number__input-wrapper--warning
-    )
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn:hover::before {
-    background: $focus;
-    block-size: 1px;
-    inline-size: 100%;
-    inset-block-end: 0;
-    inset-block-start: auto;
-    inset-inline-start: 0;
-  }
-  // End weirdness
-
-  .#{$prefix}--number-input--fluid:not(
-      .#{$prefix}--number-input--fluid--invalid
-    )
-    .#{$prefix}--number-input-wrapper:not(
-      .#{$prefix}--number-input-wrapper__warning
-    )
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid--invalid
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn:hover {
-    border-block-end: 1px solid $focus;
-    outline: none;
+    .#{$prefix}--number__control-btn {
+    border-block-end-color: transparent;
+    box-shadow: none;
   }
 
   .#{$prefix}--number-input--fluid
-    input[type='number']
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='number']:focus
     ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn::after {
-    block-size: calc(100% - convert.to-rem(1px));
-    inset-block-start: 0;
+    .#{$prefix}--number__control-btn:last-of-type,
+  .#{$prefix}--number-input--fluid--invalid
+    input[type='number'][data-invalid]:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:last-of-type {
+    box-shadow: inset -2px 0 $focus;
   }
 
-  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
-    input[type='number']
+  .#{$prefix}--number-input--fluid--invalid
+    input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn.up-icon::after {
-    background: $focus;
+    .#{$prefix}--number__control-btn:last-of-type:hover {
+    box-shadow: inset -2px 0 $support-error;
   }
 
-  .#{$prefix}--number-input--fluid
-    input[type='number']
+  .#{$prefix}--number-input--fluid--invalid
+    input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn.up-icon::after {
-    block-size: calc(100%);
+    .#{$prefix}--number__control-btn:hover {
+    box-shadow: none;
   }
 
   .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
-    input[type='number']
+    .#{$prefix}--number {
+    @include focus-outline('outline');
+  }
+
+  .#{$prefix}--number-input--fluid:not(
+      .#{$prefix}--number-input--fluid--invalid
+    )
+    .#{$prefix}--number-input-wrapper:not(
+      .#{$prefix}--number-input-wrapper__warning
+    )
+    input[type='number']:focus
     ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn.up-icon:hover::after {
-    background-color: $focus;
-    block-size: calc(100%);
+    .#{$prefix}--number__control-btn:hover {
+    border-block-end: 1px solid $focus;
+    outline: none;
   }
 
   .#{$prefix}--number-input--fluid--invalid
@@ -290,4 +274,15 @@
     input[type='number']:disabled {
     background-color: transparent;
   }
+
+  // Slug styles
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--slug
+    .#{$prefix}--slug {
+    inset-block-start: convert.to-rem(43px);
+  }
+
+  .#{$prefix}--number-input--fluid .#{$prefix}--number__input-wrapper--slug {
+    @include ai-gradient;
+  }
 }

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

@@ -12,6 +12,7 @@
 @use '../../config' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 
@@ -216,4 +217,9 @@
     block-size: 4rem;
     inline-size: 80%;
   }
+
+  // Slug styles
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper--slug {
+    @include ai-gradient;
+  }
 }

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

@@ -185,4 +185,11 @@
     inset-block-start: convert.to-rem(36px);
     inset-inline-start: $spacing-05;
   }
+
+  // Slug styles
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper--slug
+    .#{$prefix}--slug {
+    inset-block-start: convert.to-rem(43px);
+  }
 }

package/scss/components/inline-loading/_inline-loading.scss

@@ -83,6 +83,15 @@ $-loading-gap-small: 110;
   .#{$prefix}--loading--small .#{$prefix}--inline-loading__svg {
     stroke: $interactive;
   }
+
+  .#{$prefix}--btn .#{$prefix}--inline-loading--btn {
+    min-block-size: 0;
+
+    .#{$prefix}--inline-loading__text {
+      @include type-style('body-short-01');
+    }
+  }
+
   /* If IE11 Don't show check animation */
   @media screen and (-ms-high-contrast: active),
     screen and (-ms-high-contrast: none) {

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

@@ -16,6 +16,7 @@
 @use '../../spacing' as *;
 @use '../../motion' as *;
 @use '../../layer' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/button-reset';
 @use '../../utilities/component-reset';
@@ -307,7 +308,7 @@ $list-box-menu-width: convert.to-rem(300px);
     display: inline-flex;
     overflow: hidden;
     align-items: center;
-    // Account for the border in `.bx--list-box`
+    // Account for the border in `.cds--list-box`
     block-size: calc(100% + 1px);
     cursor: pointer;
     outline: none;
@@ -888,6 +889,58 @@ $list-box-menu-width: convert.to-rem(300px);
     text-overflow: ellipsis;
   }
 
+  // Slug styles
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-08;
+    transform: translateY(-50%);
+  }
+
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--list-box {
+    @include ai-gradient;
+  }
+
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--text-input {
+    padding-inline-end: $spacing-10;
+  }
+
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--list-box__field,
+  .#{$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
+    .#{$prefix}--slug,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--slug {
+    inset-inline-end: $spacing-10;
+  }
+
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    ~ .#{$prefix}--slug {
+    inset-inline-end: $spacing-10;
+  }
+
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    ~ .#{$prefix}--slug,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    ~ .#{$prefix}--slug {
+    inset-inline-end: convert.to-rem(88px);
+  }
+
   // Windows HCM fix
   .#{$prefix}--list-box__field,
   .#{$prefix}--list-box__menu,

package/scss/components/menu-button/_menu-button.scss

@@ -14,8 +14,12 @@
 /// @access public
 /// @group menu-button
 @mixin menu-button {
+  .#{$prefix}--menu-button__container {
+    display: inline-block;
+  }
+
   .#{$prefix}--menu-button__trigger:not(.#{$prefix}--btn--ghost) {
-    min-inline-size: 10rem;
+    min-inline-size: 12rem;
   }
 
   .#{$prefix}--menu-button__trigger svg {