@carbon/styles 1.55.0-rc.0 → 1.55.1-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.55.0-rc.0",
+  "version": "1.55.1-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -68,5 +68,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "600138750484cf814dc1b927ed4c277301b5290a"
+  "gitHead": "c6ef02eb0fa5b2dcaccbbe60d45f26884a167948"
 }

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

@@ -191,9 +191,10 @@
   }
 
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
+    .#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__invalid-icon,
   .#{$prefix}--list-box__wrapper--fluid
-    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box.#{$prefix}--list-box--warning
     .#{$prefix}--list-box__invalid-icon {
     inset-block-start: convert.to-rem(81px);
     inset-inline-end: $spacing-05;
@@ -355,11 +356,21 @@
 
   .#{$prefix}--list-box__wrapper--fluid:has(.#{$prefix}--multi-select)
     .#{$prefix}--list-box__menu-icon {
-    inset-inline-end: calc($spacing-04);
+    inset-inline-end: $spacing-04;
   }
 
   .#{$prefix}--list-box__wrapper--fluid:has(.#{$prefix}--dropdown)
     .#{$prefix}--list-box__menu-icon {
-    inset-inline-end: calc($spacing-04);
+    inset-inline-end: $spacing-04;
+  }
+
+  // remove slug divider when element is invalid and fluid
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--slug::before,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--slug::before {
+    display: none;
   }
 }

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

@@ -153,9 +153,11 @@
 
   .#{$prefix}--select--fluid
     .#{$prefix}--select--invalid
+    .#{$prefix}--select-input__wrapper[data-invalid]
     .#{$prefix}--select__invalid-icon,
   .#{$prefix}--select--fluid
     .#{$prefix}--select--warning
+    .#{$prefix}--select-input__wrapper
     .#{$prefix}--select__invalid-icon {
     inset-block-start: convert.to-rem(73px);
     inset-inline-end: $spacing-05;
@@ -208,4 +210,11 @@
     .#{$prefix}--select-input {
     padding-inline-end: $spacing-10;
   }
+
+  // remove slug divider when element is invalid and fluid
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
+    .#{$prefix}--slug::before {
+    display: none;
+  }
 }

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

@@ -236,4 +236,11 @@
     ~ .#{$prefix}--slug {
     inset-inline-end: $spacing-05;
   }
+
+  // Remove ai border when invalid
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--text-area--invalid {
+    border-block-end-color: transparent;
+  }
 }

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/tabs/_tabs.scss

@@ -277,14 +277,16 @@
 
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item {
       background-color: $layer-accent;
+      // Draws the border without affecting the inner-content
+      box-shadow: convert.to-rem(-1px) 0 0 0 $border-strong;
+      margin-inline-start: 0;
     }
 
     &.#{$prefix}--tabs--contained
-      .#{$prefix}--tabs__nav-item
+      .#{$prefix}--tabs__nav-item--selected
+      + div
       + .#{$prefix}--tabs__nav-item {
-      // Draws the border without affecting the inner-content
-      box-shadow: convert.to-rem(-1px) 0 0 0 $border-strong;
-      margin-inline-start: 0;
+      box-shadow: convert.to-rem(-1px) 0 0 0 transparent;
     }
 
     .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link {
@@ -293,57 +295,104 @@
         outline $duration-fast-01 motion(standard, productive);
     }
 
+    &.#{$prefix}--tabs--dismissable .#{$prefix}--tabs__nav-link {
+      padding-inline-end: $spacing-08;
+    }
+
+    &.#{$prefix}--tabs--dismissable.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-link {
+      padding-inline-end: calc($spacing-09 - 1px);
+    }
+
     //-----------------------------
     // Icon
     //-----------------------------
 
-    &.#{$prefix}--tabs--contained
-      .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--disabled)
-      .#{$prefix}--tabs__nav-item--icon
-      .#{$prefix}--tabs__nav-item--close-icon {
-      &:hover {
-        background-color: inherit;
-      }
+    .#{$prefix}--tabs__nav-item--close {
+      position: relative;
+      display: flex;
+      align-items: center;
+      inset-inline-start: calc(-#{$spacing-04} - 1px);
+      margin-inline-start: calc(-#{$spacing-06} + 1px);
+    }
+
+    &:not(.#{$prefix}--tabs--contained)
+      .#{$prefix}--tabs__nav-item--close--hidden {
+      @include visually-hidden;
+
+      position: static;
+      inline-size: convert.to-rem(3px);
+    }
+
+    &.#{$prefix}--tabs--contained.#{$prefix}--tabs--full-width
+      .#{$prefix}--tabs__nav-item--close--hidden {
+      display: none;
+    }
+
+    .#{$prefix}--tabs__nav-item--close-icon {
+      @include button-reset.reset();
+
+      block-size: convert.to-rem(24px);
+      inline-size: convert.to-rem(24px);
+      padding-block: $spacing-02;
+      padding-inline: $spacing-02;
+      pointer-events: auto;
 
       svg {
-        padding: $spacing-02;
-        margin: -$spacing-02;
-        block-size: 24px;
-        inline-size: 24px;
+        block-size: convert.to-rem(16px);
+        fill: $text-secondary;
+        inline-size: convert.to-rem(16px);
       }
 
       svg:hover {
-        background-color: $layer-accent-hover;
+        fill: $text-primary;
+      }
+
+      &:hover {
+        background-color: $layer-hover;
+      }
+
+      &:focus,
+      &:active {
+        @include focus-outline('outline');
       }
     }
 
-    &.#{$prefix}--tabs--contained
-      .#{$prefix}--tabs__nav-item:not(
-        .#{$prefix}--tabs__nav-item--disabled
-      ).#{$prefix}--tabs__nav-item--selected
-      .#{$prefix}--tabs__nav-item--icon
+    .#{$prefix}--tabs__nav-item:hover
+      + .#{$prefix}--tabs__nav-item--close
       .#{$prefix}--tabs__nav-item--close-icon
-      svg:hover {
-      background-color: $layer-hover;
+      svg {
+      fill: $text-primary;
     }
 
-    .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--disabled)
-      .#{$prefix}--tabs__nav-item--icon
-      .#{$prefix}--tabs__nav-item--close-icon:hover {
-      background-color: $background-hover;
+    .#{$prefix}--tabs__nav-item--close-icon--selected {
+      svg {
+        fill: $text-primary;
+      }
+    }
+
+    .#{$prefix}--tabs__nav-item:hover
+      + .#{$prefix}--tabs__nav-item--close
+      .#{$prefix}--tabs__nav-item--close-icon--disabled,
+    .#{$prefix}--tabs__nav-item--close-icon--disabled,
+    .#{$prefix}--tabs__nav-item--close-icon--disabled:hover {
+      background-color: inherit;
+      cursor: not-allowed;
+
+      svg {
+        fill: $tab-text-disabled;
+      }
+
+      &:focus,
+      &:active {
+        @include focus-outline('reset');
+      }
     }
 
     .#{$prefix}--tabs__nav-item--icon {
       display: flex;
       align-items: center;
       padding-inline-start: $spacing-03;
-
-      .#{$prefix}--tabs__nav-item--close-icon {
-        padding: $spacing-02;
-        margin: -$spacing-02;
-        line-height: 0;
-        pointer-events: auto;
-      }
     }
 
     .#{$prefix}--tabs__nav-item--icon-left {

package/scss/components/tag/_tag.scss

@@ -258,12 +258,13 @@
     outline-offset: -1px;
   }
 
-  .#{$prefix}--tag--disabled,
+  .#{$prefix}--tag--disabled:not(.#{$prefix}--tag--operational),
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
   .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
     @include tag-theme($layer, $text-disabled);
 
     box-shadow: none;
+    outline: none;
 
     &:hover {
       cursor: not-allowed;

package/scss/components/tile/_tile.scss

@@ -85,6 +85,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
     &:focus {
       @include focus-outline('outline');
+
+      text-decoration: none;
     }
 
     &:hover,
@@ -398,7 +400,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
     border: 1px solid transparent;
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
-      0 24px 40px -24px $ai-drop-shadow;
+      0 4px 8px 0 $ai-drop-shadow;
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--expandable:hover {
@@ -423,7 +425,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
     @include ai-popover-gradient('hover', 0, 'layer');
 
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+      0 4px 10px 2px $ai-drop-shadow;
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::before,
@@ -431,10 +434,16 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     opacity: 1;
   }
 
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:focus,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable:focus {
+    outline-offset: -1px;
+  }
+
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
     @include ai-popover-gradient('selected', 0, 'layer');
 
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+      0 4px 8px 0 $ai-drop-shadow;
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::after {

package/scss/utilities/_ai-gradient.scss

@@ -115,6 +115,7 @@
     background: linear-gradient(
           to top,
           theme.$ai-aura-start $start,
+          15%,
           theme.$ai-aura-end 50%
         )
         padding-box,
@@ -129,6 +130,7 @@
           to top,
           $background $start,
           theme.$ai-aura-start $start,
+          15%,
           theme.$ai-aura-end 50%
         )
         padding-box,