fix(multi-select): adjust AI label spacing when clear button appears (carbon-design-system#19450)

* fix(multi-select): adjust AI label spacing when clear button appears

* Use spacing token for block-size

Co-authored-by: Anna Wen <[email protected]>

---------

Co-authored-by: Anna Wen <[email protected]>

Author: 2 people

packages/web-components/src/components/multi-select/multi-select.scss

@@ -16,6 +16,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/checkbox';
 @use '@carbon/styles/scss/components/tag';
+@use '@carbon/styles/scss/utilities/convert';
 
 :host(#{$prefix}-multi-select) {
   outline: none;
@@ -59,6 +60,12 @@ $css--plex: true !default;
   outline-offset: -#{$spacing-01};
 }
 
+:host(#{$prefix}-multi-select[filterable])
+  .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+  ~ ::slotted(#{$prefix}-ai-label) {
+  inset-inline-end: calc($spacing-10 + 18px);
+}
+
 :host(#{$prefix}-multi-select[direction='top']) {
   @extend .#{$prefix}--list-box--up;
 
@@ -169,7 +176,8 @@ $css--plex: true !default;
   ::slotted(#{$prefix}-slug) {
     position: absolute;
     inset-block-start: 50%;
-    inset-inline-end: $spacing-08;
+    inset-inline-end: calc($spacing-08 + 9px);
+    margin-block-start: convert.to-rem(0.5px);
   }
 
   ::slotted(#{$prefix}-ai-label:not([revert-active])),
@@ -178,6 +186,17 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-multi-select[ai-label]) ::slotted(#{$prefix}-ai-label)::after {
+  position: absolute;
+  display: block;
+  background-color: $border-subtle-01;
+  block-size: $spacing-05;
+  content: '';
+  inline-size: convert.to-rem(1px);
+  inset-block-start: 0;
+  inset-inline-end: convert.to-rem(-9px);
+}
+
 :host(#{$prefix}-multi-select[ai-label][warn]),
 :host(#{$prefix}-multi-select[ai-label][invalid]) {
   .#{$prefix}--list-box {