@carbon/styles 1.54.0 → 1.55.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.54.0",
+  "version": "1.55.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -68,5 +68,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "4bdd6802dd612af764ef76162141333d35bd84f4"
+  "gitHead": "0163f7e7932f667a892bc75f0aa35464f726f4ec"
 }

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

@@ -8,6 +8,7 @@
 @use '../list-box';
 @use '../../config' as *;
 @use '../../theme' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 
 /// Combo box styles
@@ -36,6 +37,12 @@
     @include focus-outline('outline');
   }
 
+  .#{$prefix}--list-box--expanded
+    .#{$prefix}--combo-box--input--focus.#{$prefix}--text-input {
+    outline-offset: convert.to-rem(-1px);
+    outline-width: convert.to-rem(1px);
+  }
+
   .#{$prefix}--combo-box .#{$prefix}--list-box__field,
   .#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__field,

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

@@ -1003,7 +1003,7 @@
   .#{$prefix}--data-table tbody tr.#{$prefix}--data-table--slug-row:hover,
   tr.#{$prefix}--data-table--slug-row:hover
     + .#{$prefix}--expandable-row[data-child-row],
-  tr.#{$prefix}--expandable-row--hover
+  tr.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row--hover
     + .#{$prefix}--expandable-row[data-child-row]:hover,
   tr.#{$prefix}--expandable-row--hover.#{$prefix}--data-table--slug-row,
   tr.#{$prefix}--data-table--selected.#{$prefix}--parent-row.#{$prefix}--expandable-row--hover.#{$prefix}--data-table--slug-row {

package/scss/components/dropdown/_dropdown.scss

@@ -93,6 +93,10 @@
     border-block-end-color: $border-subtle;
   }
 
+  .#{$prefix}--dropdown--open .cds--list-box__field {
+    outline: none;
+  }
+
   .#{$prefix}--dropdown--invalid {
     @include focus-outline('invalid');
 

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

@@ -69,4 +69,11 @@
     + .#{$prefix}--list-box__invalid-icon {
     inset-inline-end: 1rem;
   }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    :not(.#{$prefix}--list-box--up)
+    .#{$prefix}--combo-box
+    .#{$prefix}--list-box__menu {
+    inset-block-start: calc(100% + convert.to-rem(1px));
+  }
 }

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

@@ -114,15 +114,20 @@
     outline-offset: 0;
   }
 
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus:has(
+      .#{$prefix}--list-box--expanded
+    ) {
+    outline-width: convert.to-rem(1px);
+  }
+
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__field:focus {
     outline: none;
     outline-offset: 0;
   }
 
-  .#{$prefix}--list-box__wrapper--fluid
-    :not(.#{$prefix}--list-box--up)
+  .#{$prefix}--list-box__wrapper--fluid:not(.#{$prefix}--list-box--up)
     .#{$prefix}--list-box__menu {
-    inset-block-start: calc(100% + convert.to-rem(1px));
+    inset-block-start: calc(100%);
   }
 
   // Invalid / Warning styles
@@ -235,8 +240,7 @@
   }
 
   // direction - top
-  .#{$prefix}--list-box__wrapper--fluid
-    .#{$prefix}--list-box--up
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box--up
     .#{$prefix}--list-box__menu {
     inset-block-end: $spacing-10;
   }

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

@@ -12,6 +12,7 @@
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../multiselect';
 @use '../fluid-list-box';
@@ -49,4 +50,11 @@
     .#{$prefix}--list-box__field {
     align-items: baseline;
   }
+
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--multi-select--filterable__wrapper:not(
+      .#{$prefix}--list-box--up
+    )
+    .#{$prefix}--list-box__menu {
+    inset-block-start: calc(100% + convert.to-rem(1px));
+  }
 }

package/scss/components/modal/_modal.scss

@@ -473,12 +473,6 @@
       0 24px 40px -24px $ai-drop-shadow;
   }
 
-  .#{$prefix}--modal--slug .#{$prefix}--slug {
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-  }
-
   .#{$prefix}--modal--slug
     .#{$prefix}--modal-content.#{$prefix}--modal-scroll-content {
     mask-image: linear-gradient(
@@ -500,6 +494,8 @@
   .#{$prefix}--modal--slug
     .#{$prefix}--modal-container-body
     > .#{$prefix}--slug {
+    position: absolute;
+    inset-block-start: convert.to-rem(10px);
     inset-inline-end: convert.to-rem(48px);
   }
 

package/scss/components/multiselect/_multiselect.scss

@@ -93,6 +93,17 @@
     @include focus-outline('outline');
   }
 
+  .#{$prefix}--multi-select.#{$prefix}--list-box--expanded
+    .#{$prefix}--list-box__field--wrapper:has(
+      button[aria-activedescendant]:not([aria-activedescendant=''])
+    ),
+  .#{$prefix}--multi-select--filterable.#{$prefix}--list-box--expanded:has(
+      input[aria-activedescendant]:not([aria-activedescendant=''])
+    ) {
+    outline-offset: convert.to-rem(-1px);
+    outline-width: convert.to-rem(1px);
+  }
+
   .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected
     .#{$prefix}--text-input,
   .#{$prefix}--multi-select.#{$prefix}--multi-select--selected

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

@@ -59,7 +59,7 @@
     font-weight: 400;
     inline-size: 100%;
     min-inline-size: 9.375rem;
-    padding-inline-end: convert.to-rem(96px);
+    padding-inline-end: $spacing-12;
     padding-inline-start: $spacing-05;
     transition: background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
@@ -157,7 +157,6 @@
     align-items: center;
     justify-content: center;
     block-size: 100%;
-    border-block-end: convert.to-rem(1px) solid $border-strong;
     color: $icon-primary;
 
     svg {
@@ -174,6 +173,7 @@
 
     &:hover {
       background-color: $field-hover;
+      box-shadow: 0 -1px 0 $border-strong inset;
       color: $icon-primary;
       cursor: pointer;
     }
@@ -206,15 +206,18 @@
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
-    border-block-end-color: $focus;
-    box-shadow: inset 0 2px $focus, inset 0 -1px $focus;
+    border-width: 2px 0;
+    border-style: solid;
+    border-color: $focus;
+    box-shadow: none;
+    outline-offset: -2px;
   }
 
   .#{$prefix}--number
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn:last-of-type {
-    box-shadow: inset 0 2px $focus, inset 0 -1px $focus, inset -2px 0 $focus;
+    .#{$prefix}--number__control-btn:last-of-type:hover {
+    box-shadow: -4px 0 0 -2px $focus inset;
   }
 
   // add invalid box-shadow to number controls only when invalid input is not focused
@@ -222,15 +225,18 @@
     input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:last-of-type:hover {
-    box-shadow: inset 0 2px $support-error, inset 0 -1px $support-error,
-      inset -2px 0 $support-error;
+    box-shadow: -4px 0 0 -2px $support-error inset;
   }
 
   .#{$prefix}--number
     input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:hover {
-    box-shadow: inset 0 2px $support-error, inset 0 -1px $support-error;
+    border-width: 2px 0;
+    border-style: solid;
+    border-color: $support-error;
+    box-shadow: none;
+    outline-offset: -2px;
   }
 
   .#{$prefix}--number
@@ -295,7 +301,7 @@
   .#{$prefix}--number__invalid {
     position: absolute;
     fill: $support-error;
-    inset-inline-end: convert.to-rem(96px);
+    inset-inline-end: $spacing-12;
   }
 
   .#{$prefix}--number--lg .#{$prefix}--number__invalid {
@@ -314,7 +320,7 @@
   .#{$prefix}--number--lg
     .#{$prefix}--number__invalid
     + .#{$prefix}--number__rule-divider {
-    inset-inline-end: convert.to-rem(96px);
+    inset-inline-end: $spacing-12;
   }
 
   .#{$prefix}--number--sm
@@ -349,7 +355,7 @@
   }
 
   .#{$prefix}--number--lg .#{$prefix}--number__controls {
-    inline-size: convert.to-rem(96px);
+    inline-size: $spacing-12;
   }
 
   .#{$prefix}--number--lg .#{$prefix}--number__control-btn {
@@ -424,18 +430,60 @@
   .#{$prefix}--number__input-wrapper--slug .#{$prefix}--slug {
     position: absolute;
     inset-block-start: 50%;
-    inset-inline-end: convert.to-rem(88px);
+    inset-inline-end: $spacing-12;
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--number__input-wrapper--slug .#{$prefix}--slug::before,
+  .#{$prefix}--number__input-wrapper--slug
+    .#{$prefix}--number__control-btn::before,
   .#{$prefix}--number__input-wrapper--slug
-    input[data-invalid]
-    ~ .#{$prefix}--slug,
-  .#{$prefix}--number__input-wrapper--slug.#{$prefix}--number__input-wrapper--warning
-    .#{$prefix}--slug {
-    inset-inline-end: convert.to-rem(120px);
+    .#{$prefix}--number__control-btn::after {
+    position: absolute;
+    background-color: $border-subtle;
+    block-size: convert.to-rem(16px);
+    content: '';
+    inline-size: convert.to-rem(1px);
+  }
+  .#{$prefix}--number__input-wrapper--slug .#{$prefix}--slug::before {
+    display: none;
+    inset-inline-start: convert.to-rem(-16px);
+  }
+  .#{$prefix}--number__control-btn::after {
+    display: block;
+    inset-inline-end: 0;
+  }
+
+  .#{$prefix}--number__input-wrapper--slug
+    .#{$prefix}--number__control-btn::before {
+    display: block;
+    inset-inline-end: $spacing-08;
+  }
+  .#{$prefix}--number__input-wrapper--slug
+    .#{$prefix}--number__control-btn:focus::before {
+    display: none;
+  }
+  .#{$prefix}--number__control-btn:hover::after,
+  .#{$prefix}--number__control-btn:hover::before {
+    display: none;
+    inset-inline-end: 0;
+  }
+  .#{$prefix}--number__input-wrapper:has(.#{$prefix}--number__control-btn:hover)
+    ~ .#{$prefix}--number__input-wrapper--slug::after {
+    display: none;
+  }
+  .#{$prefix}--number__control-btn:has(.up-icon)::after,
+  .#{$prefix}--number__control-btn:has(.up-icon)::before {
+    display: none;
   }
 
+  .#{$prefix}--number__input-wrapper--slug .#{$prefix}--number__invalid {
+    inset-inline-end: $spacing-13 - $spacing-05;
+  }
+  .#{$prefix}--number__input-wrapper--slug:has(.#{$prefix}--number__invalid)
+    .#{$prefix}--slug::before {
+    display: block;
+  }
   .#{$prefix}--number
     .#{$prefix}--number__input-wrapper--slug
     input[data-invalid],
@@ -450,18 +498,8 @@
   .#{$prefix}--number__input-wrapper--slug input[type='number']:disabled {
     @include ai-gradient;
 
-    padding-inline-end: convert.to-rem(112px);
-  }
-
-  .#{$prefix}--number__input-wrapper--slug
-    input[type='number']:not([data-invalid]):not(
-      :has(~ .#{$prefix}--slug--revert)
-    )
-    ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn {
-    border-block-end-color: $ai-border-strong;
+    padding-inline-end: convert.to-rem(145px);
   }
-
   // Skeleton State
   .#{$prefix}--number.#{$prefix}--skeleton {
     @include skeleton;
@@ -473,7 +511,6 @@
       display: none;
     }
   }
-
   // Windows HCM fix
   /* stylelint-disable */
   .#{$prefix}--number__control-btn:hover,
@@ -490,3 +527,20 @@
   }
   /* stylelint-enable */
 }
+.#{$prefix}--number__controls:hover .#{$prefix}--number__control-btn::after {
+  display: none;
+}
+
+.#{$prefix}--number__input-wrapper--slug .#{$prefix}--number__rule-divider {
+  display: none;
+}
+
+.#{$prefix}--number__input-wrapper--slug
+  .#{$prefix}--number__control-btn:hover {
+  box-shadow: 0 -1px 0 $ai-border-strong inset;
+}
+//hide dividers on button focus
+.#{$prefix}--number__controls:focus-within
+  .#{$prefix}--number__control-btn::after {
+  display: none;
+}

package/scss/components/select/_select.scss

@@ -281,13 +281,36 @@
   }
 
   // Slug styles
+
+  $divider-width: 1px;
+
   .#{$prefix}--select--slug .#{$prefix}--slug {
     position: absolute;
     inset-block-start: 50%;
-    inset-inline-end: $spacing-08;
+    inset-inline-end: calc($spacing-08 + 8px + $divider-width);
+    margin-block-start: convert.to-rem(0.5px);
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--select--slug .#{$prefix}--slug::after,
+  .#{$prefix}--select--slug .#{$prefix}--slug::before {
+    position: absolute;
+    background-color: $border-subtle-01;
+    block-size: convert.to-rem(16px);
+    content: '';
+    inline-size: convert.to-rem(1px);
+  }
+
+  .#{$prefix}--select--slug .#{$prefix}--slug::before {
+    display: none;
+    inset-inline-start: calc(-#{$spacing-03} - #{$divider-width});
+  }
+
+  .#{$prefix}--select--slug .#{$prefix}--slug::after {
+    display: block;
+    inset-inline-end: calc(-#{$spacing-03} - #{$divider-width});
+  }
+
   .#{$prefix}--select--slug
     .#{$prefix}--select-input:not(:has(~ .#{$prefix}--slug--revert)) {
     @include ai-gradient;
@@ -295,16 +318,25 @@
     padding-inline-end: $spacing-10;
   }
 
-  .#{$prefix}--select--slug.#{$prefix}--select--invalid
-    .#{$prefix}--select-input,
-  .#{$prefix}--select--slug.#{$prefix}--select--warning
-    .#{$prefix}--select-input {
+  .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
+    .#{$prefix}--select-input:not(:has(~ .#{$prefix}--slug--revert)) {
     padding-inline-end: $spacing-12;
   }
 
-  .#{$prefix}--select--slug.#{$prefix}--select--invalid .#{$prefix}--slug,
-  .#{$prefix}--select--slug.#{$prefix}--select--warning .#{$prefix}--slug {
-    inset-inline-end: $spacing-10;
+  .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
+    .#{$prefix}--slug::before {
+    display: block;
+  }
+
+  .#{$prefix}--select--slug
+    .#{$prefix}--select-input__wrapper[data-invalid]
+    .#{$prefix}--select-input
+    ~ .#{$prefix}--select__invalid-icon,
+  .#{$prefix}--select--slug
+    .#{$prefix}--select-input__wrapper
+    .#{$prefix}--select-input
+    ~ .#{$prefix}--select__invalid-icon {
+    inset-inline-end: $spacing-11;
   }
 
   // Windows HCM fix