@carbon/styles 1.44.0 → 1.45.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.44.0",
+  "version": "1.45.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -65,5 +65,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "d9121f17b1dd935a5734c6eae10af275f72f6dc7"
+  "gitHead": "670dffcae241d9bf9b3a64ea06e100e7e5a08c37"
 }

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

@@ -16,6 +16,7 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../layer' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
@@ -47,7 +48,7 @@
   // Table title text
   //----------------------------------------------------------------------------
   .#{$prefix}--data-table-header {
-    background: $layer;
+    background-color: $layer;
     padding-block-end: $spacing-06;
     padding-block-start: $spacing-05;
     padding-inline: $spacing-05;
@@ -107,13 +108,13 @@
     transition: background-color $duration-fast-01 motion(entrance, productive);
   }
 
-  .#{$prefix}--data-table tbody tr:hover {
-    background: $layer-hover;
+  .#{$prefix}--data-table tbody tr:not([data-child-row]):hover,
+  .#{$prefix}--data-table tbody tr[data-child-row]:hover > td {
+    background-color: $layer-hover;
   }
 
   .#{$prefix}--data-table tbody tr:hover td,
   .#{$prefix}--data-table tbody tr:hover th {
-    background: $layer-hover;
     border-block-end: 1px solid $layer-hover;
     border-block-start: 1px solid $layer-hover;
     color: $text-primary;
@@ -202,7 +203,6 @@
 
   .#{$prefix}--data-table td,
   .#{$prefix}--data-table tbody th {
-    background: $layer;
     border-block-end: 1px solid $border-subtle;
     border-block-start: 1px solid $layer;
     color: $text-secondary;
@@ -349,20 +349,34 @@
     tbody
     tr:not(.#{$prefix}--parent-row):nth-child(even)
     td {
-    background-color: $layer-accent;
     border-block-end: 1px solid $layer-accent;
     border-block-start: 1px solid $layer-accent;
   }
 
+  .#{$prefix}--data-table--zebra
+    tbody
+    tr:not(.#{$prefix}--parent-row):not(
+      .#{$prefix}--data-table--selected
+    ):nth-child(even) {
+    background-color: $layer-accent;
+  }
+
   .#{$prefix}--data-table--zebra
     tbody
     tr:not(.#{$prefix}--parent-row):hover
     td {
-    background-color: $layer-hover;
     border-block-end: 1px solid $layer-hover;
     border-block-start: 1px solid $layer-hover;
   }
 
+  .#{$prefix}--data-table--zebra
+    tbody
+    tr:not(.#{$prefix}--parent-row):not(
+      .#{$prefix}--data-table--selected
+    ):hover {
+    background-color: $layer-hover;
+  }
+
   //----------------------------------------------------------------------------
   // Select
   //----------------------------------------------------------------------------
@@ -382,7 +396,7 @@
   .#{$prefix}--data-table th.#{$prefix}--table-column-checkbox {
     // Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position
     position: static;
-    background: $layer-accent;
+    background-color: $layer-accent;
     inline-size: convert.to-rem(32px);
     transition: background-color $duration-fast-01 motion(entrance, productive);
   }
@@ -462,13 +476,19 @@
     tr:nth-child(odd).#{$prefix}--data-table--selected
     td,
   tr.#{$prefix}--data-table--selected td {
-    background-color: $layer-selected;
     // Bottom border acts as separator from other rows
     border-block-end: 1px solid $layer-active;
     border-block-start: 1px solid $layer-selected;
     color: $text-primary;
   }
 
+  .#{$prefix}--data-table--zebra
+    tbody
+    tr:nth-child(odd).#{$prefix}--data-table--selected,
+  tr.#{$prefix}--data-table--selected {
+    background-color: $layer-selected;
+  }
+
   // First row
   .#{$prefix}--data-table--zebra
     tbody
@@ -515,12 +535,18 @@
     tr:nth-child(odd).#{$prefix}--data-table--selected:hover
     td,
   .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover td {
-    background: $data-table-column-hover;
     border-block-end: 1px solid $data-table-column-hover;
     border-block-start: 1px solid $data-table-column-hover;
     color: $text-primary;
   }
 
+  .#{$prefix}--data-table--zebra
+    tbody
+    tr:nth-child(odd).#{$prefix}--data-table--selected:hover,
+  .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover {
+    background-color: $data-table-column-hover;
+  }
+
   // selected overflow menu
   .#{$prefix}--data-table--selected
     .#{$prefix}--overflow-menu
@@ -919,6 +945,51 @@
     margin: convert.to-rem(-3px) 0;
   }
 
+  // Slug styles
+  .#{$prefix}--data-table .#{$prefix}--table-column-slug {
+    inline-size: $spacing-05;
+    padding-inline-end: 0;
+  }
+
+  .#{$prefix}--data-table
+    tbody
+    tr:has(> .#{$prefix}--table-column-slug--active) {
+    @include ai-gradient('left', 50%);
+
+    background-attachment: fixed;
+  }
+
+  .#{$prefix}--data-table
+    thead
+    th.#{$prefix}--table-sort__header--slug
+    .#{$prefix}--table-sort,
+  .#{$prefix}--data-table
+    thead
+    th:has(> .#{$prefix}--table-header-label--slug) {
+    @include ai-gradient('top', 100%);
+  }
+
+  .#{$prefix}--table-column-slug .#{$prefix}--slug {
+    position: absolute;
+    transform: translateY(-50%);
+  }
+
+  .#{$prefix}--data-table--xl .#{$prefix}--table-column-slug .#{$prefix}--slug {
+    transform: translateY(1px);
+  }
+
+  // Slug inside header styles
+  th .#{$prefix}--table-header-label.#{$prefix}--table-header-label--slug {
+    display: flex;
+    align-items: center;
+  }
+
+  th
+    .#{$prefix}--table-header-label.#{$prefix}--table-header-label--slug
+    .#{$prefix}--slug {
+    margin-inline-start: $spacing-03;
+  }
+
   // Windows HCM fix
   // stylelint-disable-next-line no-duplicate-selectors
   .#{$prefix}--data-table-content {

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

@@ -52,7 +52,7 @@
     padding-block-end: 0;
     padding-block-start: 0;
     transition: padding $duration-moderate-01 motion(standard, productive),
-      background-color $duration-moderate-01 motion(standard, productive);
+      background-color $duration-fast-01 motion(standard, productive);
   }
 
   tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row)
@@ -65,15 +65,35 @@
 
   //child row visible
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] {
-    transition: height $duration-moderate-01 motion(standard, productive);
+    transition: height $duration-moderate-01 motion(standard, productive),
+      background-color $duration-fast-01 motion(standard, productive);
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td {
     border-block-end: 1px solid $border-subtle;
     padding-inline-start: 3.5rem;
-    transition: padding-bottom $duration-fast-02 motion(standard, productive),
-      transform $duration-fast-02 motion(standard, productive),
-      background-color $duration-fast-02 motion(standard, productive);
+    transition: padding-bottom $duration-moderate-01
+        motion(standard, productive),
+      transform $duration-moderate-01 motion(standard, productive);
+  }
+
+  // Increase padding inside expandable row when only a slug OR checkbox is present in row
+  tbody:has(> tr.#{$prefix}--parent-row--slug)
+    > tr.#{$prefix}--expandable-row[data-child-row]
+    td,
+  tbody:has(td.#{$prefix}--table-column-checkbox)
+    > tr.#{$prefix}--expandable-row[data-child-row]
+    td {
+    padding-inline-start: convert.to-rem(88px);
+  }
+
+  // Increase padding inside expandable row when slug AND checkbox is present in row
+  tbody:has(> tr.#{$prefix}--parent-row--slug):has(
+      td.#{$prefix}--table-column-checkbox
+    )
+    > tr.#{$prefix}--expandable-row[data-child-row]
+    td {
+    padding-inline-start: convert.to-rem(120px);
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
@@ -107,8 +127,9 @@
   tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) td,
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row td,
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row {
-    transition: height $duration-moderate-02 motion(standard, productive),
-      background-color $duration-fast-02 motion(standard, productive);
+    transition: height $duration-moderate-01 motion(standard, productive),
+      background-color $duration-fast-01 motion(standard, productive),
+      border-color $duration-fast-01 motion(standard, productive);
   }
 
   // hovering on collapsed parent
@@ -180,6 +201,14 @@
     padding-inline-start: convert.to-rem(6px);
   }
 
+  // Hide bottom border of checkbox column when expanded
+  .#{$prefix}--data-table
+    td.#{$prefix}--table-expand[data-previous-value='collapsed']
+    + .#{$prefix}--table-column-checkbox {
+    border-block-end: 1px solid transparent;
+    box-shadow: none;
+  }
+
   .#{$prefix}--data-table
     th.#{$prefix}--table-expand
     + .#{$prefix}--table-column-checkbox
@@ -272,7 +301,7 @@
     td.#{$prefix}--table-expand
     + td::after {
     position: absolute;
-    background: $layer-accent;
+    background-color: $layer-accent;
     block-size: convert.to-rem(1px);
     content: '';
     inline-size: convert.to-rem(8px);
@@ -286,7 +315,7 @@
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover
     td.#{$prefix}--table-expand
     + td::after {
-    background: $layer-hover;
+    background-color: $layer-hover;
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected
@@ -316,8 +345,8 @@
     + tr[data-child-row]
     td {
     transition: transform $duration-moderate-01 motion(standard, productive),
-      border-bottom $duration-moderate-01 motion(standard, productive),
-      border-top $duration-moderate-01 motion(standard, productive);
+      border-bottom $duration-fast-01 motion(standard, productive),
+      border-top $duration-fast-01 motion(standard, productive);
   }
 
   .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:hover td,
@@ -335,7 +364,7 @@
   .#{$prefix}--data-table--zebra
     tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover
     td {
-    background: $layer-hover;
+    background-color: $layer-hover;
     border-block-end: 1px solid $layer-hover;
     border-block-start: 1px solid $layer-hover;
   }
@@ -344,22 +373,23 @@
   // Selected
   //----------------------------------------------------------------------------
   // Parent collapsed
+
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected {
+    background-color: $layer-selected;
+  }
+
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:first-of-type td {
-    background: $layer-selected;
-    border-block-end: 1px solid $border-subtle;
     border-block-start: 1px solid $layer-active;
     box-shadow: 0 1px $layer-active;
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected td {
-    background: $layer-selected;
-    border-block-end: 1px solid transparent;
+    border-block-end: 1px solid $layer-active;
     box-shadow: 0 1px $layer-active;
     color: $text-primary;
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:last-of-type td {
-    background: $layer-selected;
     border-block-end: 1px solid transparent;
     box-shadow: 0 1px $border-subtle;
   }
@@ -369,7 +399,7 @@
       .#{$prefix}--expandable-row
     ):hover
     td {
-    background: $layer-selected-hover;
+    background-color: $layer-selected-hover;
     border-block-end: 1px solid $border-subtle;
     border-block-start: 1px solid $layer-selected-hover;
     box-shadow: 0 1px $layer-selected-hover;
@@ -394,7 +424,7 @@
     td,
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
     td:first-of-type {
-    background: $layer-selected-hover;
+    background-color: $layer-selected-hover;
     border-block-end: 1px solid transparent;
     border-block-start: 1px solid $layer-selected-hover;
     box-shadow: 0 1px $layer-selected-hover;
@@ -425,7 +455,28 @@
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
     + tr[data-child-row]
     td {
-    background: $layer-selected;
+    background-color: $layer-selected;
+  }
+
+  // Slug styles
+  .#{$prefix}--parent-row .#{$prefix}--table-column-slug,
+  .#{$prefix}--parent-row
+    .#{$prefix}--table-column-slug
+    + td.cds--table-expand[data-previous-value='collapsed'] {
+    box-shadow: none;
+  }
+
+  .#{$prefix}--parent-row.#{$prefix}--expandable-row
+    .#{$prefix}--table-column-slug,
+  .#{$prefix}--parent-row.#{$prefix}--expandable-row
+    .#{$prefix}--table-column-slug
+    + td.cds--table-expand[data-previous-value='collapsed'] {
+    border-block-end: 1px solid transparent;
+  }
+
+  .#{$prefix}--parent-row--slug td,
+  .#{$prefix}--data-table tr.#{$prefix}--parent-row--slug:hover td {
+    border-block-start: 1px solid transparent;
   }
 
   // Windows HCM fix

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

@@ -248,6 +248,12 @@
     margin-block-start: convert.to-rem(13px);
   }
 
+  // Slug styles
+  .#{$prefix}--table-sort__header--slug .#{$prefix}--slug {
+    margin-inline-end: auto;
+    margin-inline-start: convert.to-rem(8px);
+  }
+
   // Windows HCM fix
   .#{$prefix}--table-sort__icon,
   .#{$prefix}--table-sort__icon-unsorted {

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

@@ -30,7 +30,8 @@
     .#{$prefix}--combo-box
     .#{$prefix}--text-input {
     overflow: hidden;
-    padding: convert.to-rem(33px) $spacing-10 convert.to-rem(13px) $spacing-05;
+    padding-block: convert.to-rem(33px) convert.to-rem(13px);
+    padding-inline: $spacing-05 $spacing-10;
     text-overflow: ellipsis;
     transition: none;
     white-space: nowrap;

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

@@ -410,4 +410,16 @@
     .#{$prefix}--date-picker-input__wrapper--slug {
     @include ai-gradient;
   }
+
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper--slug
+    .#{$prefix}--date-picker__input,
+  .#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker-input__wrapper--slug
+    .#{$prefix}--date-picker__input,
+  .#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker-input__wrapper--slug
+    .#{$prefix}--date-picker__input {
+    padding-inline-end: $spacing-10;
+  }
 }

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

@@ -122,7 +122,7 @@
   .#{$prefix}--list-box__wrapper--fluid
     :not(.#{$prefix}--list-box--up)
     .#{$prefix}--list-box__menu {
-    inset-block-start: calc(100% + convert.to-rem(3px));
+    inset-block-start: calc(100% + convert.to-rem(1px));
   }
 
   // Invalid / Warning styles
@@ -277,4 +277,57 @@
     animation: 3000ms ease-in-out skeleton infinite;
     background: $skeleton-element;
   }
+
+  // Slug styles
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--slug {
+    inset-block-start: convert.to-rem(42px);
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--slug,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--slug {
+    inset-inline-end: $spacing-08;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    button.#{$prefix}--list-box__field,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid[data-invalid]
+    button.#{$prefix}--list-box__field {
+    padding-inline-end: $spacing-10;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty),
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug.#{$prefix}--list-box__wrapper--fluid--invalid
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty) {
+    padding-inline-end: convert.to-rem(88px);
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field:has(
+      .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty)
+    )
+    ~ .#{$prefix}--slug,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--list-box__field:has(
+      .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty)
+    )
+    ~ .#{$prefix}--slug {
+    inset-inline-end: $spacing-10;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty) {
+    padding-inline-end: $spacing-12;
+  }
 }

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

@@ -282,6 +282,27 @@
     inset-block-start: convert.to-rem(43px);
   }
 
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number__input-wrapper--slug
+    .#{$prefix}--slug,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--slug.#{$prefix}--number__input-wrapper--warning
+    .#{$prefix}--slug {
+    inset-inline-end: convert.to-rem(88px);
+  }
+
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--slug
+    input,
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number__input-wrapper--slug
+    input[data-invalid],
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--slug.#{$prefix}--number__input-wrapper--warning
+    input {
+    padding-inline-end: convert.to-rem(120px);
+  }
+
   .#{$prefix}--number-input--fluid .#{$prefix}--number__input-wrapper--slug {
     @include ai-gradient;
   }

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

@@ -63,7 +63,8 @@
 
   .#{$prefix}--select--fluid .#{$prefix}--select__arrow {
     block-size: 1rem;
-    inset-block-start: $spacing-07;
+    inset-block-start: convert.to-rem(34px);
+    inset-inline-end: $spacing-04;
   }
 
   .#{$prefix}--select--fluid .#{$prefix}--select__divider {
@@ -195,4 +196,16 @@
     svg {
     fill: $icon-disabled;
   }
+
+  // Slug styles
+  .#{$prefix}--select--fluid .#{$prefix}--select--slug .#{$prefix}--slug {
+    inset-block-start: convert.to-rem(42px);
+    inset-inline-end: $spacing-08;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--slug
+    .#{$prefix}--select-input {
+    padding-inline-end: $spacing-10;
+  }
 }

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,