fix(dropdown): align styles and behavior with React parity

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

@@ -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.
@@ -175,6 +175,24 @@ class CDSComboBox extends CDSDropdown {
     return firstMatchIndex;
   }
 
+  protected _handleMouseoverInner(event: MouseEvent) {
+    const item = this._getDropdownItemFromEvent(event);
+    if (!item?.hasAttribute('selected')) {
+      return;
+    }
+
+    super._handleMouseoverInner(event);
+  }
+
+  protected _handleMouseleaveInner(event: MouseEvent) {
+    const isFiltering = Boolean(this._filterInputNode?.value.length);
+    if (isFiltering) {
+      return;
+    }
+
+    super._handleMouseleaveInner(event);
+  }
+
   protected _scrollItemIntoView(item: HTMLElement) {
     if (!this._itemMenu) {
       return;
@@ -281,7 +299,6 @@ class CDSComboBox extends CDSDropdown {
       itemToSelect.selected = true;
       itemToSelect.setAttribute('aria-selected', 'true');
     }
-    this._handleUserInitiatedToggle(false);
   }
 
   protected _renderLabel(): TemplateResult {

packages/web-components/src/components/dropdown/__tests__/dropdown-test.js

@@ -414,10 +414,11 @@ describe('cds-dropdown-skeleton', function () {
         html`<cds-dropdown-skeleton></cds-dropdown-skeleton>`
       );
       expect(el).to.exist;
-      expect(el.shadowRoot.querySelector('.cds--skeleton')).to.exist;
-      expect(el.shadowRoot.querySelector('.cds--dropdown-v2')).to.exist;
-      expect(el.shadowRoot.querySelector('.cds--list-box')).to.exist;
-      expect(el.shadowRoot.querySelector('.cds--form-item')).to.exist;
+      const skeletonRoot = el.shadowRoot.querySelector('.cds--dropdown');
+      expect(skeletonRoot).to.exist;
+      expect(skeletonRoot.classList.contains('cds--skeleton')).to.be.true;
+      expect(skeletonRoot.classList.contains('cds--list-box--md')).to.be.true;
+      expect(el.shadowRoot.querySelector('.cds--label.cds--skeleton')).to.exist;
     });
 
     it('should respect size attribute', async () => {

packages/web-components/src/components/dropdown/dropdown-skeleton.ts

@@ -1,12 +1,15 @@
 /**
- * Copyright IBM Corp. 2019, 2023
+ * 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.
  */
 
 import { LitElement, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
+import { DROPDOWN_SIZE } from './defs';
 import styles from './dropdown.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
@@ -15,14 +18,31 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
  */
 @customElement(`${prefix}-dropdown-skeleton`)
 class CDSDropdownSkeleton extends LitElement {
+  /**
+   * Specify whether the label should be hidden, or not.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })
+  hideLabel = false;
+
+  /**
+   * Specify the size of the ListBox.
+   */
+  @property({ reflect: true })
+  size = DROPDOWN_SIZE.MEDIUM;
+
   render() {
+    const { hideLabel, size } = this;
+    const classes = classMap({
+      [`${prefix}--skeleton`]: true,
+      [`${prefix}--dropdown`]: true,
+      [`${prefix}--list-box--${size}`]: Boolean(size),
+    });
+
     return html`
-      <div
-        class="${prefix}--skeleton ${prefix}--dropdown-v2 ${prefix}--list-box ${prefix}--form-item">
-        <div class="${prefix}--list-box__field">
-          <span class="${prefix}--list-box__label"></span>
-        </div>
-      </div>
+      ${!hideLabel
+        ? html`<span class="${prefix}--label ${prefix}--skeleton"></span>`
+        : null}
+      <div class=${classes}></div>
     `;
   }
 

packages/web-components/src/components/dropdown/dropdown.scss

@@ -17,13 +17,22 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/checkbox';
 @use '@carbon/styles/scss/components/tag';
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
+@use '@carbon/styles/scss/utilities/convert' as convert;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
 @include list-box;
 
 :host(#{$prefix}-dropdown) {
   outline: none;
 
+  .#{$prefix}--list-box {
+    box-sizing: border-box;
+  }
+
+  .#{$prefix}--list-box--expanded {
+    border-block-end-color: $border-subtle;
+  }
+
   .#{$prefix}--assistive-text {
     inset-block-start: -100%;
     // Hides screen reader cursor
@@ -37,26 +46,17 @@ $css--plex: true !default;
   .#{$prefix}--list-box__menu {
     inset-block-start: 100%;
     margin-block-start: 1px;
-    outline: 1px solid $focus;
-  }
-}
-
-:host(#{$prefix}-dropdown[open]) {
-  .#{$prefix}--list-box__field {
     outline: none;
   }
 }
+
 :host(#{$prefix}-dropdown[ai-label]) .#{$prefix}--list-box__wrapper--decorator {
   @include ai-gradient;
 }
 
 :host(#{$prefix}-dropdown[invalid]) {
-  .#{$prefix}--list-box__field {
-    outline: none;
-  }
-
   .#{$prefix}--form__helper-text {
-    color: $text-error;
+    color: $text-error !important; /* stylelint-disable-line declaration-no-important */
   }
 }
 
@@ -82,17 +82,72 @@ $css--plex: true !default;
   @extend .#{$prefix}--list-box__wrapper--inline;
 
   grid-gap: 0 $spacing-06;
+
+  .#{$prefix}--list-box__menu {
+    margin-block-start: 0;
+  }
+}
+
+:host(#{$prefix}-dropdown[type='inline']) {
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
+    padding-block: 0;
+    padding-inline-end: $spacing-09;
+    padding-inline-start: $spacing-05;
+  }
+}
+
+:host(#{$prefix}-dropdown[type='inline'][warn]),
+:host(#{$prefix}-dropdown[type='inline'][invalid]) {
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
+    padding-inline-end: $spacing-10;
+  }
 }
 
-:host(#{$prefix}-dropdown[type='inline'][warn]) .#{$prefix}--list-box__field {
-  padding-inline: $spacing-05 calc(#{$spacing-08} + #{$spacing-05});
+:host(#{$prefix}-dropdown[ai-label][type='inline'])
+  .#{$prefix}--list-box__expanded {
+  border-block-end: 1px solid $ai-border-strong;
+}
+
+:host(#{$prefix}-dropdown[ai-label][type='inline']:not([invalid]):not([warn]))
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+  .#{$prefix}--list-box__field {
+  padding-inline-end: $spacing-10;
+}
+
+:host(#{$prefix}-dropdown[ai-label][type='inline']:not([invalid]))
+  .#{$prefix}--list-box__field {
+  border-block-end: 1px solid $ai-border-strong;
+}
+
+:host(#{$prefix}-dropdown[ai-label][type='inline'][warn]),
+:host(#{$prefix}-dropdown[ai-label][type='inline'][invalid]) {
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
+    padding-inline-end: $spacing-12;
+  }
+}
+
+:host(#{$prefix}-dropdown[type='inline']) .#{$prefix}--list-box__menu-icon {
+  inset-inline-end: $spacing-04;
 }
 
 :host(#{$prefix}-dropdown[warn]),
 :host(#{$prefix}-dropdown[invalid]) {
   .#{$prefix}--form__helper-text {
+    color: $text-primary;
     grid-column: 2;
   }
+
+  .#{$prefix}--list-box__field {
+    padding-inline-end: $spacing-10;
+  }
+
+  .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box__invalid-icon--warning {
+    inset-inline-end: $spacing-08;
+  }
 }
 
 :host(#{$prefix}-dropdown-item) {
@@ -105,32 +160,54 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-dropdown-item:first-child) {
+:host(#{$prefix}-dropdown-item:first-of-type) {
   .#{$prefix}--list-box__menu-item__option {
-    border-block-start-width: 0;
+    border-block-start-color: transparent;
   }
 }
 
-:host(#{$prefix}-dropdown-item:hover) {
+:host(#{$prefix}-dropdown-item:not([disabled]):hover) {
   background-color: $layer-hover;
 }
 
 :host(#{$prefix}-dropdown-item[highlighted]) {
   @extend .#{$prefix}--list-box__menu-item--highlighted;
 }
 
+:host(#{$prefix}-dropdown-item[highlighted-next-sibling])
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: transparent;
+}
+
 :host(#{$prefix}-dropdown-item[disabled])
   .#{$prefix}--list-box__menu-item__option {
   color: $text-disabled;
   cursor: not-allowed;
   text-decoration: none;
 }
 
+:host(#{$prefix}-dropdown[disabled][warn]),
+:host(#{$prefix}-dropdown[disabled][invalid]) {
+  .#{$prefix}--list-box__field {
+    padding-inline-end: $spacing-10;
+  }
+}
+
+:host(#{$prefix}-dropdown-item[disabled][highlighted-next-sibling]:hover)
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: $border-subtle;
+}
+
+:host(#{$prefix}-dropdown-item[disabled]:hover)
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: $border-subtle-01;
+}
+
 :host(#{$prefix}-dropdown-item[selected]) {
   @extend .#{$prefix}--list-box__menu-item--active;
-  @extend .#{$prefix}--list-box__menu-item--highlighted;
 
   .#{$prefix}--list-box__menu-item__option {
+    border-block-start-color: transparent;
     color: $text-primary;
   }
 
@@ -139,6 +216,20 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-dropdown-item[selected-next-sibling])
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: transparent;
+}
+
+:host(#{$prefix}-dropdown-item[disabled][selected-next-sibling]:hover)
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: $border-subtle;
+}
+
+:host(#{$prefix}-dropdown-item[selected][highlighted]) {
+  @extend .#{$prefix}--list-box__menu-item--highlighted;
+}
+
 :host(#{$prefix}-dropdown-item[size='sm']) {
   block-size: $spacing-07;
 
@@ -156,10 +247,14 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-dropdown-skeleton) {
+  @extend .#{$prefix}--form-item;
+
   .#{$prefix}--skeleton {
     @include skeleton;
   }
 }
+// AILabel styles
+$divider-width: 1px;
 
 :host(#{$prefix}-dropdown[ai-label]) {
   @extend .#{$prefix}--list-box__wrapper--slug;
@@ -171,10 +266,32 @@ $css--plex: true !default;
     inset-inline-end: $spacing-08;
   }
 
+  ::slotted(#{$prefix}-ai-label) {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-end: convert.to-rem(9px);
+  }
+
+  ::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: convert.to-rem(1px);
+    inset-inline-end: calc(-#{$spacing-03} - #{$divider-width});
+  }
+
   ::slotted(#{$prefix}-ai-label:not([revert-active])),
   ::slotted(#{$prefix}-slug:not([revert-active])) {
     transform: translateY(-50%);
   }
+
+  .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box__invalid-icon--warning {
+    inset-inline-end: convert.to-rem(81px);
+  }
 }
 
 :host(#{$prefix}-dropdown[ai-label][warn]),
@@ -185,8 +302,19 @@ $css--plex: true !default;
     }
   }
 
+  ::slotted(#{$prefix}-ai-label)::before {
+    position: absolute;
+    display: block;
+    background-color: $border-subtle-01;
+    block-size: $spacing-05;
+    content: '';
+    inline-size: convert.to-rem(1px);
+    inset-block-start: convert.to-rem(1px);
+    inset-inline-start: calc(-#{$spacing-03} - #{$divider-width});
+  }
+
   ::slotted(#{$prefix}-ai-label),
   ::slotted(#{$prefix}-slug) {
-    inset-inline-end: $spacing-10;
+    inset-inline-end: $spacing-08;
   }
 }