@carbon/web-components 2.43.0 → 2.44.0

package/lib/components/combo-box/combo-box-item.d.ts

@@ -1,9 +1,10 @@
 /**
- * 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 type { PropertyValues } from 'lit';
 import CDSDropdownItem from '../dropdown/dropdown-item';
 /**
  * Combo box item.
@@ -11,6 +12,14 @@ import CDSDropdownItem from '../dropdown/dropdown-item';
  * @element cds-combo-box-item
  */
 declare class CDSComboBoxItem extends CDSDropdownItem {
+    private _nextSiblingRefs;
+    private _handleMouseEnter;
+    private _handleMouseLeave;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _getNextItem;
+    private _syncNextSibling;
+    protected updated(changedProperties: PropertyValues): void;
     static styles: any;
 }
 export default CDSComboBoxItem;

package/lib/components/combo-box/combo-box.d.ts

@@ -57,14 +57,14 @@ declare class CDSComboBox extends CDSDropdown {
      * @returns `true` if the given combo box item matches the given query text.
      */
     protected _defaultItemMatches(item: CDSComboBoxItem, queryText: string): boolean;
-    connectedCallback(): void;
     /**
      * Handles `input` event on the `<input>` for filtering.
      */
-    protected _handleInput(event: InputEvent): void;
-    protected _removeAutoCompleteSuggestion(): void;
+    protected _handleInput(): void;
     protected _filterItems(items: NodeListOf<Element>, queryText: string, rawQueryText: string): number;
     protected _scrollItemIntoView(item: HTMLElement): void;
+    protected _getSelectedItem(): CDSComboBoxItem | null;
+    protected _revertInputToSelected(focus?: boolean): void;
     protected _handleInputKeydown(event: KeyboardEvent): void;
     protected _handleClickInner(event: MouseEvent): void;
     protected _handleKeypressInner(event: KeyboardEvent): void;
@@ -76,6 +76,7 @@ declare class CDSComboBox extends CDSDropdown {
     protected _selectionDidChange(itemToSelect?: CDSComboBoxItem): void;
     protected _renderLabel(): TemplateResult;
     protected _renderFollowingLabel(): TemplateResult | void;
+    protected _renderTitleLabel(): TemplateResult;
     /**
      * The `aria-label` attribute for the icon to clear selection.
      */
@@ -89,15 +90,11 @@ declare class CDSComboBox extends CDSDropdown {
      */
     itemMatches: (item: CDSComboBoxItem, queryText: string) => boolean;
     /**
-     * Provide custom filtering behavior. This attribute will be ignored if
-     * `typeahead` is enabled and will default to `true`
+     * Provide custom filtering behavior.
      */
     shouldFilterItem: boolean | ShouldFilterItem;
-    /**
-     * **Experimental**: will enable autocomplete and typeahead for the input field
-     */
-    typeahead: boolean;
     shouldUpdate(changedProperties: any): boolean;
+    protected _clearInputWithoutSelecting(focus?: boolean): void;
     updated(changedProperties: any): void;
     protected _resetFilteredItems(): void;
     static TRIGGER_KEYS: Set<string>;

package/lib/components/dropdown/dropdown-skeleton.d.ts

@@ -1,14 +1,23 @@
 /**
- * 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 } from 'lit';
+import { DROPDOWN_SIZE } from './defs';
 /**
  * Skeleton version of dropdown.
  */
 declare class CDSDropdownSkeleton extends LitElement {
+    /**
+     * Specify whether the label should be hidden, or not.
+     */
+    hideLabel: boolean;
+    /**
+     * Specify the size of the ListBox.
+     */
+    size: DROPDOWN_SIZE;
     render(): import("lit-html").TemplateResult<1>;
     static styles: any;
 }

package/lib/components/dropdown/dropdown.d.ts

@@ -1463,6 +1463,14 @@ declare class CDSDropdown extends CDSDropdown_base {
      * `true` if there is an AI Label.
      */
     protected _hasAILabel: boolean;
+    /**
+     * Currently slotted AI decorator nodes (`cds-ai-label`/slug) with listeners attached.
+     */
+    private _aiDecoratorNodes;
+    /**
+     * Handles interaction on an AI decorator while the menu is open.
+     */
+    private _handleAIDecoratorInteraction;
     protected _activeDescendant?: string;
     /**
      * The content of the selected item.
@@ -1508,8 +1516,20 @@ declare class CDSDropdown extends CDSDropdown_base {
      * Handler for the `keydown` event on the top-level element in the shadow DOM.
      */
     protected _handleKeydownInner(event: KeyboardEvent): void;
+    private _handleMenuInputKeydown;
+    protected _shouldClearMenuInputOnEscape({ menuOpen, }: {
+        event: KeyboardEvent;
+        menuOpen: boolean;
+        isInputTarget: boolean;
+    }): boolean;
+    protected get _supportsMenuInputFiltering(): boolean;
+    protected get _menuInputNode(): HTMLInputElement | null;
+    protected _clearMenuInputFiltering(): void;
+    private _shouldForwardKeyToMenuInput;
+    private _forwardKeyToMenuInput;
+    private _shouldRetainMenuInputFocus;
     /**
-     * Handler for the `keypress` event on the top-level element in the shadow DOM.
+     * Handles keypress events (Space, Enter)
      */
     protected _handleKeypressInner(event: KeyboardEvent): void;
     /**
@@ -1517,6 +1537,8 @@ declare class CDSDropdown extends CDSDropdown_base {
      *
      * @param event The event.
      */
+    protected _handleMouseoverInner(event: MouseEvent): void;
+    protected _handleMouseleaveInner(event: MouseEvent): void;
     protected _handleFocusOut(event: FocusEvent): void;
     /**
      * Handles `slotchange` event for the `<slot>` for helper text.
@@ -1530,27 +1552,39 @@ declare class CDSDropdown extends CDSDropdown_base {
      * Handles `slotchange` event.
      */
     protected _handleAILabelSlotChange({ target }: Event): void;
+    disconnectedCallback(): void;
+    /**
+     * Updates listeners for AI decorator nodes to ensure only one menu stays open.
+     */
+    private _updateAIDecoratorListeners;
     /**
      * Handles user-initiated selection of a dropdown item.
      *
      * @param [item] The dropdown item user wants to select. Absense of this argument means clearing selection.
      */
     protected _handleUserInitiatedSelectItem(item?: CDSDropdownItem): void;
+    protected _shouldCloseAfterSelection(_item?: CDSDropdownItem): boolean;
     /**
      * Handles user-initiated toggling the open state.
      *
      * @param [force] If specified, forces the open state to the given one.
      */
-    protected _handleUserInitiatedToggle(force?: boolean): void;
+    protected _handleUserInitiatedToggle(force?: boolean, { restoreTriggerFocus, focusMenu, highlightSelectedOnOpen, }?: {
+        restoreTriggerFocus?: boolean;
+        focusMenu?: boolean;
+        highlightSelectedOnOpen?: boolean;
+    }): void;
     /**
      * Clears the selection of dropdown items.
      */
     protected _clearHighlight(): void;
-    /**
-     * Navigate through dropdown items.
-     *
-     * @param direction `-1` to navigate backward, `1` to navigate forward.
-     */
+    protected _getDropdownItemFromEvent(event: Event): CDSDropdownItem | null;
+    protected _setHighlightedItem(item?: CDSDropdownItem | null, { scrollIntoView }?: {
+        scrollIntoView?: boolean;
+    }): void;
+    protected _getNextDropdownItem(item: CDSDropdownItem): CDSDropdownItem | null;
+    protected _updateSelectedNextSibling(item?: CDSDropdownItem | null): void;
+    protected _highlightSelectedItem(): void;
     protected _navigate(direction: number): void;
     /**
      * @returns The content preceding the trigger button.

package/lib/components/multi-select/multi-select.d.ts

@@ -4,7 +4,7 @@
  * 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 { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import CDSDropdown from '../dropdown/dropdown';
 import { SELECTION_FEEDBACK_OPTION } from './defs';
 import CDSMultiSelectItem from './multi-select-item';
@@ -42,17 +42,29 @@ declare class CDSMultiSelect extends CDSDropdown {
      * The `<input>` for filtering.
      */
     private _filterInputNode;
+    protected get _supportsMenuInputFiltering(): boolean;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    protected get _menuInputNode(): HTMLInputElement | null;
+    protected _clearMenuInputFiltering(): void;
+    protected _shouldClearMenuInputOnEscape({ menuOpen, isInputTarget, }: {
+        event: KeyboardEvent;
+        menuOpen: boolean;
+        isInputTarget: boolean;
+    }): boolean;
     /**
      * The trigger button.
      */
     private _triggerNode;
     protected _selectionShouldChange(itemToSelect?: CDSMultiSelectItem): boolean;
     protected _selectionDidChange(itemToSelect?: CDSMultiSelectItem): void;
+    protected _shouldCloseAfterSelection(item?: CDSMultiSelectItem): item is undefined;
     protected _handleClickInner(event: MouseEvent): void;
     /**
      * Handler for the `keypress` event, ensures filter still works upon entering space
      */
     protected _handleKeypressInner(event: KeyboardEvent): void;
+    protected _handleMouseoverInner(event: MouseEvent): void;
+    protected _handleMouseleaveInner(event: MouseEvent): void;
     /**
      * Special andler for the `keypress` event, ensures space selection for filterable
      * variation is disabled

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/web-components",
   "description": "Web components for the Carbon Design System",
-  "version": "2.43.0",
+  "version": "2.44.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -67,7 +67,8 @@
   },
   "dependencies": {
     "@carbon/icon-helpers": "10.47.0",
-    "@carbon/styles": "^1.95.0",
+    "@carbon/icons": "^11.71.0",
+    "@carbon/styles": "^1.96.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.10.2",
     "@lit/context": "^1.1.3",
@@ -77,9 +78,8 @@
     "tslib": "^2.6.3"
   },
   "devDependencies": {
-    "@carbon/icons": "^11.70.0",
-    "@carbon/layout": "^11.43.0",
-    "@carbon/motion": "^11.37.0",
+    "@carbon/layout": "^11.44.0",
+    "@carbon/motion": "^11.38.0",
     "@juggle/resize-observer": "^3.4.0",
     "@mordech/vite-lit-loader": "^0.37.0",
     "@open-wc/testing": "^4.0.0",
@@ -130,5 +130,5 @@
       }
     ]
   },
-  "gitHead": "d2ccae94e5aa3defcce07cc9ea90058fda6c9705"
+  "gitHead": "4a42de3036ca693bf2c6477e917824982fafd7af"
 }

package/scss/components/breadcrumb/breadcrumb.scss

@@ -5,15 +5,13 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-$css--plex: true !default;
-
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/components/breadcrumb';
-@import '../overflow-menu/overflow-menu';
+@use '../overflow-menu/overflow-menu';
 
 :host(#{$prefix}-breadcrumb),
 :host(#{$prefix}-breadcrumb-skeleton) {

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

@@ -11,6 +11,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/focus-outline' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/layout' as *;
 @use '@carbon/styles/scss/components/combo-box' as *;
@@ -41,6 +42,11 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-combo-box) .#{$prefix}--text-input--highlighted-outline {
+  outline: 1px solid $focus;
+  outline-offset: -1px;
+}
+
 :host(#{$prefix}-combo-box[disabled]),
 :host(#{$prefix}-combo-box[read-only]) {
   .#{$prefix}--list-box__selection {
@@ -68,29 +74,70 @@ $css--plex: true !default;
   .#{$prefix}--list-box__menu-item__option {
     block-size: auto;
   }
+}
+
+:host(#{$prefix}-combo-box-item:not([disabled]):hover) {
+  background-color: $layer-hover;
+}
 
-  &:hover {
-    background-color: $layer-hover;
+:host(#{$prefix}-combo-box-item:first-of-type)
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: transparent;
+}
+
+:host(#{$prefix}-combo-box-item:first-of-type[highlighted]) {
+  @include focus-outline('reset');
+
+  &::before {
+    position: absolute;
+    border: 2px solid $focus;
+    block-size: 100%;
+    border-block-start: 1px solid $focus;
+    content: '';
+    inline-size: 100%;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    pointer-events: none;
   }
 }
 
+:host(#{$prefix}-combo-box-item[highlighted-next-sibling]),
+:host(#{$prefix}-combo-box-item[hovered-next-sibling])
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: transparent;
+}
+
 :host(#{$prefix}-combo-box-item[disabled]) {
+  cursor: not-allowed;
+
   .#{$prefix}--list-box__menu-item__option {
     color: $text-disabled;
     cursor: not-allowed;
+    pointer-events: none;
     text-decoration: none;
   }
 }
 
+:host(#{$prefix}-combo-box-item[disabled][highlighted-next-sibling]:hover),
+:host(#{$prefix}-combo-box-item[disabled][hovered-next-sibling]:hover)
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: $border-subtle;
+}
+
+:host(#{$prefix}-combo-box-item[disabled]:hover)
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: $border-subtle-01;
+}
+
 :host(#{$prefix}-combo-box-item[highlighted]) {
   @extend .#{$prefix}--list-box__menu-item--highlighted;
 }
 
 :host(#{$prefix}-combo-box-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;
   }
 
@@ -99,6 +146,16 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-combo-box-item[selected-next-sibling])
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: transparent;
+}
+
+:host(#{$prefix}-combo-box-item[disabled][selected-next-sibling]:hover)
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: $border-subtle;
+}
+
 :host(#{$prefix}-combo-box-item[size='sm']) {
   block-size: $spacing-07;
 
@@ -115,6 +172,18 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-combo-box[size='sm']) {
+  .#{$prefix}--list-box__menu-icon {
+    inset-block: $spacing-02;
+  }
+}
+
+:host(#{$prefix}-combo-box[size='lg']) {
+  .#{$prefix}--list-box__menu-icon {
+    inset-block: $spacing-04;
+  }
+}
+
 :host(#{$prefix}-combo-box[ai-label]) {
   @extend .#{$prefix}--list-box__wrapper--slug;
 

package/scss/components/data-table/_table-core.scss

@@ -5,6 +5,16 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
+@use '@carbon/styles/scss/components/data-table';
+
 //
 // Table header and table body
 //

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

@@ -5,6 +5,12 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
+
 :host(#{$prefix}-table-expanded-row) {
   display: table-row;
   block-size: 0;

package/scss/components/data-table/_table-selection.scss

@@ -5,6 +5,13 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/data-table/vars' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
+
 //
 // Selection check box
 //

package/scss/components/data-table/_table-sizes.scss

@@ -5,6 +5,10 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+
 //
 // "xs" table size variant
 //

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

@@ -16,17 +16,14 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
 @use '@carbon/styles/scss/components/checkbox';
-
 @use '@carbon/styles/scss/components/data-table' as *;
 @use '@carbon/styles/scss/components/link' as *;
-
 @use '@carbon/styles/scss/components/data-table/expandable';
 @use '@carbon/styles/scss/components/data-table/skeleton';
 
-// TODO: deprecate @import
-@import 'table-action';
-@import 'table-core';
-@import 'table-expandable';
-@import 'table-sizes';
-@import 'table-selection';
-@import 'table-sort';
+@use 'table-action';
+@use 'table-core';
+@use 'table-expandable';
+@use 'table-sizes';
+@use 'table-selection';
+@use 'table-sort';