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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.44.0-rc.0",
+  "version": "1.45.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.0",
+    "@carbon/themes": "^11.28.0",
     "@carbon/type": "^11.25.0",
     "@ibm/plex": "6.0.0-next.6"
   },
@@ -65,5 +65,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "c9e8c54239275eb4451b25f7f11c4b8bf40ddd43"
+  "gitHead": "451ce652bb9e0fcd30fc28a41ddee1a1daedfd34"
 }

package/scss/__tests__/theme-test.js

@@ -136,6 +136,16 @@ describe('@carbon/styles/scss/theme', () => {
         "slug-callout-gradient-bottom",
         "slug-callout-aura-start",
         "slug-callout-aura-end",
+        "slug-callout-gradient-top-hover",
+        "slug-callout-gradient-bottom-hover",
+        "slug-callout-aura-start-hover-01",
+        "slug-callout-aura-start-hover-02",
+        "slug-callout-aura-end-hover-01",
+        "slug-callout-aura-end-hover-02",
+        "slug-callout-gradient-top-selected",
+        "slug-callout-gradient-bottom-selected",
+        "slug-callout-aura-start-selected",
+        "slug-callout-aura-end-selected",
         "ai-gradient-start-01",
         "ai-gradient-start-02",
         "ai-gradient-end",

package/scss/components/accordion/_accordion.scss

@@ -59,7 +59,6 @@ $content-padding: 0 0 0 $spacing-05 !default;
     display: list-item;
     overflow: visible;
     border-block-start: 1px solid $border-subtle;
-    transition: all $duration-fast-02 motion(standard, productive);
 
     &:last-child {
       border-block-end: 1px solid $border-subtle;
@@ -144,11 +143,18 @@ $content-padding: 0 0 0 $spacing-05 !default;
     text-align: start;
   }
 
+  .#{$prefix}--accordion__wrapper {
+    // Properties for when the accordion closes
+    padding: 0;
+    max-block-size: 0;
+    opacity: 0;
+    transition: all $duration-fast-02 motion(entrance, productive);
+    writing-mode: horizontal-tb;
+  }
+
   .#{$prefix}--accordion__content {
-    display: none;
+    overflow: hidden;
     padding-inline: layout.density('padding-inline');
-    // Transition property for when the accordion closes
-    transition: padding motion(standard, productive) $duration-fast-02;
 
     // Custom breakpoints based on issue #4993
     @include breakpoint-up(480px) {
@@ -189,44 +195,14 @@ $content-padding: 0 0 0 $spacing-05 !default;
     display: block;
   }
 
-  @keyframes collapse-accordion {
-    0% {
-      @include -content-visible;
-    }
-
-    100% {
-      @include -content-hidden;
-    }
-  }
-
-  @keyframes expand-accordion {
-    0% {
-      @include -content-hidden;
-    }
-
-    100% {
-      @include -content-visible;
-    }
-  }
-
-  .#{$prefix}--accordion__item--collapsing .#{$prefix}--accordion__content {
-    animation: $duration-fast-02 motion(standard, productive) collapse-accordion;
-  }
-
-  .#{$prefix}--accordion__item--expanding .#{$prefix}--accordion__content {
-    animation: $duration-fast-02 motion(standard, productive) expand-accordion;
-  }
-
   .#{$prefix}--accordion__item--active {
     overflow: visible;
 
-    .#{$prefix}--accordion__content {
-      display: block;
+    .#{$prefix}--accordion__wrapper {
+      // Properties for when the accordion opens
+      opacity: 1;
       padding-block: $spacing-03;
       padding-block-end: $spacing-06;
-      // Transition property for when the accordion opens
-      transition: padding-top motion(entrance, productive) $duration-fast-02,
-        padding-bottom motion(entrance, productive) $duration-fast-02;
     }
 
     .#{$prefix}--accordion__arrow {

package/scss/components/checkbox/_checkbox.scss

@@ -361,4 +361,24 @@
     .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::after {
     transform: scale(1.2) rotate3d(0.5, 1, 0, 158deg);
   }
+
+  // Slug styles
+  .#{$prefix}--checkbox-group--slug legend.#{$prefix}--label,
+  .#{$prefix}--checkbox-wrapper--slug .#{$prefix}--checkbox-label-text {
+    display: flex;
+  }
+
+  .#{$prefix}--checkbox-group--slug legend.#{$prefix}--label .#{$prefix}--slug,
+  .#{$prefix}--checkbox-wrapper--slug
+    .#{$prefix}--checkbox-label-text
+    .#{$prefix}--slug {
+    margin-inline-start: $spacing-03;
+  }
+
+  .#{$prefix}--checkbox-wrapper--slug
+    .#{$prefix}--checkbox-label-text
+    .#{$prefix}--slug__button--inline {
+    line-height: inherit;
+    margin-block-start: convert.to-rem(-1px);
+  }
 }

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