fix(combo-box): align invalid style and ai-label position (#20978)

Author: heloiselui

packages/web-components/src/components/combo-box/combo-box.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2024
+// Copyright IBM Corp. 2019, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -41,14 +41,6 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-combo-box[isClosable]) {
-  .#{$prefix}--list-box__invalid-icon {
-    /* stylelint-disable declaration-no-important */
-    inset-inline-end: to-rem(66px) !important;
-    /* stylelint-enable declaration-no-important */
-  }
-}
-
 :host(#{$prefix}-combo-box[disabled]),
 :host(#{$prefix}-combo-box[read-only]) {
   .#{$prefix}--list-box__selection {
@@ -126,15 +118,36 @@ $css--plex: true !default;
 :host(#{$prefix}-combo-box[ai-label]) {
   @extend .#{$prefix}--list-box__wrapper--slug;
 
+  .#{$prefix}--list-box__wrapper--decorator {
+    @include ai-gradient;
+  }
+
   .#{$prefix}--list-box__field {
     padding: 0;
   }
 
+  .#{$prefix}--list-box__invalid-icon {
+    /* stylelint-disable-next-line declaration-no-important */
+    inset-inline-end: to-rem(83px) !important;
+  }
+
+  ::slotted(#{$prefix}-ai-label)::after,
+  ::slotted(#{$prefix}-slug)::after {
+    position: absolute;
+    display: block;
+    background-color: $border-subtle-01;
+    block-size: $spacing-05;
+    content: '';
+    inline-size: to-rem(1px);
+    inset-block-start: 0;
+    inset-inline-end: to-rem(-9px);
+  }
+
   ::slotted(#{$prefix}-ai-label),
   ::slotted(#{$prefix}-slug) {
     position: absolute;
     inset-block-start: 50%;
-    inset-inline-end: $spacing-08;
+    inset-inline-end: calc($spacing-08 + 9px);
   }
 
   ::slotted(#{$prefix}-ai-label:not([revert-active])),
@@ -143,25 +156,76 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-combo-box[ai-label][isclosable]) {
+:host(#{$prefix}-combo-box[ai-label][isClosable]) {
   ::slotted(#{$prefix}-ai-label),
   ::slotted(#{$prefix}-slug) {
-    inset-inline-end: $spacing-10;
+    inset-inline-end: calc($spacing-10 + 18px);
+  }
+
+  .#{$prefix}--list-box__field .#{$prefix}--text-input {
+    padding-inline-end: to-rem(105px);
   }
 }
 
 :host(#{$prefix}-combo-box[warn]),
 :host(#{$prefix}-combo-box[invalid]) {
   ::slotted(#{$prefix}-ai-label),
   ::slotted(#{$prefix}-slug) {
-    inset-inline-end: $spacing-10;
+    inset-inline-end: calc($spacing-08 + 9px);
+  }
+
+  ::slotted(#{$prefix}-ai-label)::before,
+  ::slotted(#{$prefix}-slug)::before {
+    position: absolute;
+    display: block;
+    background-color: $border-subtle-01;
+    block-size: $spacing-05;
+    content: '';
+    inline-size: to-rem(1px);
+    inset-block-start: 0;
+    inset-inline-start: to-rem(-9px);
   }
 }
 
-:host(#{$prefix}-combo-box[warn][isclosable]),
-:host(#{$prefix}-combo-box[invalid][isclosable]) {
-  ::slotted(#{$prefix}-ai-label),
-  ::slotted(#{$prefix}-slug) {
-    inset-inline-end: to-rem(88px);
+:host(#{$prefix}-combo-box[warn][isClosable]:not([ai-label])),
+:host(#{$prefix}-combo-box[invalid][isClosable]:not([ai-label])) {
+  .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__menu-icon)
+    .#{$prefix}--list-box__selection::before {
+    position: absolute;
+    background-color: $border-subtle-01;
+    block-size: to-rem(16px);
+    content: '';
+    inline-size: to-rem(1px);
+    margin-inline-end: to-rem(33px);
+  }
+}
+
+:host(#{$prefix}-combo-box[isClosable]) {
+  .#{$prefix}--list-box__invalid-icon {
+    /* stylelint-disable-next-line declaration-no-important */
+    inset-inline-end: calc($spacing-10 + 18px) !important;
+  }
+
+  .#{$prefix}--list-box__field .#{$prefix}--text-input {
+    padding-inline-end: to-rem(80px);
+  }
+}
+
+:host(#{$prefix}-combo-box[warn][isClosable]),
+:host(#{$prefix}-combo-box[invalid][isClosable]) {
+  .#{$prefix}--list-box__field .#{$prefix}--text-input {
+    padding-inline-end: to-rem(105px);
+  }
+}
+
+:host(#{$prefix}-combo-box[warn][ai-label][isClosable]),
+:host(#{$prefix}-combo-box[invalid][ai-label][isClosable]) {
+  .#{$prefix}--list-box__field .#{$prefix}--text-input {
+    padding-inline-end: to-rem(141px);
+  }
+
+  .#{$prefix}--list-box__invalid-icon {
+    /* stylelint-disable-next-line declaration-no-important */
+    inset-inline-end: to-rem(116px) !important;
   }
 }