@carbon/web-components 2.48.0 → 2.49.0

package/es/components/data-table/table-skeleton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -15,10 +15,6 @@ declare class CDSTableSkeleton extends LitElement {
      * Optionally specify the displayed headers
      */
     private headers;
-    /**
-     * Optionally specify whether you want the Skeleton to be rendered as a compact DataTable
-     */
-    compact: boolean;
     /**
      * Specify the number of columns that you want to render in the skeleton state
      */

package/es/components/data-table/table-skeleton.js

@@ -14,7 +14,7 @@ import { prefix } from '../../globals/settings.js';
 import styles from './data-table.scss.js';
 
 /**
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -31,10 +31,6 @@ let CDSTableSkeleton = class CDSTableSkeleton extends LitElement {
          * Optionally specify the displayed headers
          */
         this.headers = [];
-        /**
-         * Optionally specify whether you want the Skeleton to be rendered as a compact DataTable
-         */
-        this.compact = false;
         /**
          * Specify the number of columns that you want to render in the skeleton state
          */
@@ -103,11 +99,10 @@ let CDSTableSkeleton = class CDSTableSkeleton extends LitElement {
         }
     }
     render() {
-        const { compact, columnCount, headers, rowCount, zebra } = this;
+        const { columnCount, headers, rowCount, zebra } = this;
         const classes = classMap({
             [`${prefix}--skeleton`]: true,
             [`${prefix}--data-table`]: true,
-            [`${prefix}--data-table--compact`]: compact,
             [`${prefix}--data-table--zebra`]: zebra,
         });
         return html `
@@ -144,9 +139,6 @@ CDSTableSkeleton.styles = styles;
 __decorate([
     property()
 ], CDSTableSkeleton.prototype, "headers", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], CDSTableSkeleton.prototype, "compact", void 0);
 __decorate([
     property({ type: Number, reflect: true, attribute: 'column-count' })
 ], CDSTableSkeleton.prototype, "columnCount", void 0);

package/es/components/data-table/table-skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-skeleton.js","sources":["../../../src/components/data-table/table-skeleton.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport styles from './data-table.scss?lit';\n\n/**\n * Data table skeleton\n *\n * @element cds-table-skeleton\n */\n@customElement(`${prefix}-table-skeleton`)\nclass CDSTableSkeleton extends LitElement {\n  /**\n   * Optionally specify the displayed headers\n   */\n  @property()\n  private headers: string[] = [];\n\n  /**\n   * Optionally specify whether you want the Skeleton to be rendered as a compact DataTable\n   */\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  /**\n   * Specify the number of columns that you want to render in the skeleton state\n   */\n  @property({ type: Number, reflect: true, attribute: 'column-count' })\n  columnCount = 5;\n\n  /**\n   * Specify the number of rows that you want to render in the skeleton state\n   */\n  @property({ type: Number, reflect: true, attribute: 'row-count' })\n  rowCount = 5;\n\n  /**\n   * Specify if the table header should be rendered as part of the skeleton.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-header' })\n  showHeader = true;\n\n  /**\n   * Specify if the table toolbar should be rendered as part of the skeleton.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-toolbar' })\n  showToolbar = true;\n\n  /**\n   *  true to add useZebraStyles striping.\n   */\n  @property({ type: Boolean, reflect: true })\n  zebra = false;\n\n  /**\n   * @returns The header\n   */\n  protected _renderHeader() {\n    const { showHeader } = this;\n    return !showHeader\n      ? undefined\n      : html`\n          <div class=\"${prefix}--skeleton ${prefix}--data-table-container\">\n            <div class=\"${prefix}--data-table-header\">\n              <div class=\"${prefix}--data-table-header__title\"></div>\n              <div class=\"${prefix}--data-table-header__description\"></div>\n            </div>\n          </div>\n        `;\n  }\n\n  /**\n   * @returns The header\n   */\n  protected _renderToolbar() {\n    const { showToolbar } = this;\n    return !showToolbar\n      ? undefined\n      : html`\n          <section class=\"${prefix}--table-toolbar\">\n            <div class=\"${prefix}--toolbar-content\">\n              <span\n                class=\"${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm\"></span>\n            </div>\n          </section>\n        `;\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'table');\n    }\n    super.connectedCallback();\n  }\n\n  updated() {\n    if (this.headers.length) {\n      this.columnCount = this.headers.length;\n    } else {\n      this.headers = Array(this.columnCount).fill('');\n    }\n  }\n\n  render() {\n    const { compact, columnCount, headers, rowCount, zebra } = this;\n    const classes = classMap({\n      [`${prefix}--skeleton`]: true,\n      [`${prefix}--data-table`]: true,\n      [`${prefix}--data-table--compact`]: compact,\n      [`${prefix}--data-table--zebra`]: zebra,\n    });\n    return html`\n      ${this._renderHeader()} ${this._renderToolbar()}\n\n      <table class=\"${classes}\">\n        <thead>\n          <tr>\n            ${Array.from(new Array(columnCount)).map(\n              (_, index) => html`\n                <th>\n                  <div class=\"${prefix}--table-header-label\">\n                    ${headers[index]}\n                  </div>\n                </th>\n              `\n            )}\n          </tr>\n        </thead>\n        <tbody>\n          ${Array.from(new Array(rowCount)).map(\n            () => html`\n              <tr>\n                ${Array.from(new Array(columnCount)).map(\n                  () => html`\n                    <td>\n                      <span></span>\n                    </td>\n                  `\n                )}\n              </tr>\n            `\n          )}\n        </tbody>\n      </table>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTableSkeleton;\n"],"names":["customElement"],"mappings":"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"}
+{"version":3,"file":"table-skeleton.js","sources":["../../../src/components/data-table/table-skeleton.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport styles from './data-table.scss?lit';\n\n/**\n * Data table skeleton\n *\n * @element cds-table-skeleton\n */\n@customElement(`${prefix}-table-skeleton`)\nclass CDSTableSkeleton extends LitElement {\n  /**\n   * Optionally specify the displayed headers\n   */\n  @property()\n  private headers: string[] = [];\n\n  /**\n   * Specify the number of columns that you want to render in the skeleton state\n   */\n  @property({ type: Number, reflect: true, attribute: 'column-count' })\n  columnCount = 5;\n\n  /**\n   * Specify the number of rows that you want to render in the skeleton state\n   */\n  @property({ type: Number, reflect: true, attribute: 'row-count' })\n  rowCount = 5;\n\n  /**\n   * Specify if the table header should be rendered as part of the skeleton.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-header' })\n  showHeader = true;\n\n  /**\n   * Specify if the table toolbar should be rendered as part of the skeleton.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-toolbar' })\n  showToolbar = true;\n\n  /**\n   *  true to add useZebraStyles striping.\n   */\n  @property({ type: Boolean, reflect: true })\n  zebra = false;\n\n  /**\n   * @returns The header\n   */\n  protected _renderHeader() {\n    const { showHeader } = this;\n    return !showHeader\n      ? undefined\n      : html`\n          <div class=\"${prefix}--skeleton ${prefix}--data-table-container\">\n            <div class=\"${prefix}--data-table-header\">\n              <div class=\"${prefix}--data-table-header__title\"></div>\n              <div class=\"${prefix}--data-table-header__description\"></div>\n            </div>\n          </div>\n        `;\n  }\n\n  /**\n   * @returns The header\n   */\n  protected _renderToolbar() {\n    const { showToolbar } = this;\n    return !showToolbar\n      ? undefined\n      : html`\n          <section class=\"${prefix}--table-toolbar\">\n            <div class=\"${prefix}--toolbar-content\">\n              <span\n                class=\"${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm\"></span>\n            </div>\n          </section>\n        `;\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'table');\n    }\n    super.connectedCallback();\n  }\n\n  updated() {\n    if (this.headers.length) {\n      this.columnCount = this.headers.length;\n    } else {\n      this.headers = Array(this.columnCount).fill('');\n    }\n  }\n\n  render() {\n    const { columnCount, headers, rowCount, zebra } = this;\n    const classes = classMap({\n      [`${prefix}--skeleton`]: true,\n      [`${prefix}--data-table`]: true,\n      [`${prefix}--data-table--zebra`]: zebra,\n    });\n    return html`\n      ${this._renderHeader()} ${this._renderToolbar()}\n\n      <table class=\"${classes}\">\n        <thead>\n          <tr>\n            ${Array.from(new Array(columnCount)).map(\n              (_, index) => html`\n                <th>\n                  <div class=\"${prefix}--table-header-label\">\n                    ${headers[index]}\n                  </div>\n                </th>\n              `\n            )}\n          </tr>\n        </thead>\n        <tbody>\n          ${Array.from(new Array(rowCount)).map(\n            () => html`\n              <tr>\n                ${Array.from(new Array(columnCount)).map(\n                  () => html`\n                    <td>\n                      <span></span>\n                    </td>\n                  `\n                )}\n              </tr>\n            `\n          )}\n        </tbody>\n      </table>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTableSkeleton;\n"],"names":["customElement"],"mappings":"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"}

package/es/components/dropdown/dropdown-item.d.ts

@@ -42,7 +42,22 @@ declare class CDSDropdownItem extends LitElement {
      * true if menu item has ellipsis applied
      */
     _hasEllipsisApplied: boolean;
+    /**
+     * Reference to the next sibling element for hover state management.
+     */
+    protected _nextSiblingRef: Element | null;
+    /**
+     * Gets the next dropdown/combo-box item sibling.
+     */
+    protected _getNextItem(): Element | null;
+    /**
+     * Syncs the hovered-next-sibling attribute with the next item.
+     */
+    protected _syncNextSibling(attribute: string, shouldSet: boolean): void;
+    protected _handleMouseEnter: () => void;
+    protected _handleMouseLeave: () => void;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Handles `slotchange` event.
      *

package/es/components/dropdown/dropdown-item.js

@@ -60,6 +60,50 @@ let CDSDropdownItem = class CDSDropdownItem extends LitElement {
          * true if menu item has ellipsis applied
          */
         this._hasEllipsisApplied = false;
+        /**
+         * Reference to the next sibling element for hover state management.
+         */
+        this._nextSiblingRef = null;
+        this._handleMouseEnter = () => {
+            if (this.hasAttribute('disabled')) {
+                return;
+            }
+            this._syncNextSibling('hovered-next-sibling', true);
+        };
+        this._handleMouseLeave = () => {
+            this._syncNextSibling('hovered-next-sibling', false);
+        };
+    }
+    /**
+     * Gets the next dropdown/combo-box item sibling.
+     */
+    _getNextItem() {
+        let next = this.nextElementSibling;
+        while (next) {
+            if (next instanceof HTMLElement &&
+                (next.tagName.toLowerCase() === `${prefix}-dropdown-item` ||
+                    next.tagName.toLowerCase() === `${prefix}-combo-box-item`)) {
+                return next;
+            }
+            next = next.nextElementSibling;
+        }
+        return null;
+    }
+    /**
+     * Syncs the hovered-next-sibling attribute with the next item.
+     */
+    _syncNextSibling(attribute, shouldSet) {
+        const currentSibling = this._nextSiblingRef;
+        currentSibling === null || currentSibling === void 0 ? void 0 : currentSibling.removeAttribute(attribute);
+        if (shouldSet) {
+            const next = this._getNextItem();
+            if (next) {
+                next.setAttribute(attribute, '');
+                this._nextSiblingRef = next;
+                return;
+            }
+        }
+        this._nextSiblingRef = null;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -71,6 +115,14 @@ let CDSDropdownItem = class CDSDropdownItem extends LitElement {
                 .id++}`);
         }
         this.setAttribute('aria-selected', String(this.selected));
+        this.addEventListener('mouseenter', this._handleMouseEnter);
+        this.addEventListener('mouseleave', this._handleMouseLeave);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('mouseenter', this._handleMouseEnter);
+        this.removeEventListener('mouseleave', this._handleMouseLeave);
+        this._syncNextSibling('hovered-next-sibling', false);
+        super.disconnectedCallback();
     }
     /**
      * Handles `slotchange` event.

package/es/components/dropdown/dropdown-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.js","sources":["../../../src/components/dropdown/dropdown-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport Checkmark16 from '@carbon/icons/es/checkmark/16.js';\nimport { DROPDOWN_SIZE } from './dropdown';\nimport styles from './dropdown.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Dropdown item.\n *\n * @element cds-dropdown-item\n * @csspart selected-icon The selected icon.\n */\n@customElement(`${prefix}-dropdown-item`)\nclass CDSDropdownItem extends LitElement {\n  /**\n   * `true` if this dropdown item should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if this dropdown item should be highlighted.\n   * If `true`, parent `<dropdown>` selects/deselects this dropdown item upon keyboard interaction.\n   *\n   * @private\n   */\n  @property({ type: Boolean, reflect: true })\n  highlighted = false;\n\n  /**\n   * `true` if this dropdown item should be selected.\n   *\n   * @private\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * Dropdown size.\n   */\n  @property({ reflect: true })\n  size = DROPDOWN_SIZE.MEDIUM;\n\n  /**\n   * The `value` attribute that is set to the parent `<cds-dropdown>` when this dropdown item is selected.\n   */\n  @property()\n  value = '';\n\n  /**\n   * true if menu item has ellipsis applied\n   */\n  @state()\n  _hasEllipsisApplied = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'option');\n    }\n    if (!this.hasAttribute('id')) {\n      this.setAttribute(\n        'id',\n        `${prefix}-dropdown-item-${(this.constructor as typeof CDSDropdownItem)\n          .id++}`\n      );\n    }\n    this.setAttribute('aria-selected', String(this.selected));\n  }\n\n  /**\n   * Handles `slotchange` event.\n   *\n   * Adds the `title` property to its parent element so the native\n   * browser tooltip appears for menu items that result in ellipsis\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const text = (target as HTMLSlotElement).assignedNodes().filter(\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n    );\n\n    const textContainer = this.shadowRoot?.querySelector(\n      `.${prefix}--list-box__menu-item__option`\n    );\n\n    if (!textContainer || this._hasEllipsisApplied === true) return;\n\n    const observer = new ResizeObserver(() => {\n      this._hasEllipsisApplied =\n        textContainer.scrollWidth > textContainer.clientWidth;\n\n      if (this._hasEllipsisApplied) {\n        textContainer.setAttribute('title', text[0].textContent ?? '');\n      }\n    });\n\n    observer.observe(textContainer);\n  }\n\n  render() {\n    const { selected, _handleSlotChange: handleSlotChange } = this;\n    return html`\n      <div class=\"${prefix}--list-box__menu-item__option\" part=\"menu-item\">\n        <slot @slotchange=${handleSlotChange}></slot>\n        ${!selected\n          ? undefined\n          : iconLoader(Checkmark16, {\n              part: 'selected-icon',\n              class: `${prefix}--list-box__menu-item__selected-icon`,\n            })}\n      </div>\n    `;\n  }\n\n  /**\n   * Store an identifier for use in composing this item's id.\n   *\n   * Auto-increments anytime a new dropdown-item appears.\n   */\n  static id = 0;\n\n  static styles = styles;\n}\n\nexport default CDSDropdownItem;\n"],"names":["customElement"],"mappings":"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"}
+{"version":3,"file":"dropdown-item.js","sources":["../../../src/components/dropdown/dropdown-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport Checkmark16 from '@carbon/icons/es/checkmark/16.js';\nimport { DROPDOWN_SIZE } from './dropdown';\nimport styles from './dropdown.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Dropdown item.\n *\n * @element cds-dropdown-item\n * @csspart selected-icon The selected icon.\n */\n@customElement(`${prefix}-dropdown-item`)\nclass CDSDropdownItem extends LitElement {\n  /**\n   * `true` if this dropdown item should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if this dropdown item should be highlighted.\n   * If `true`, parent `<dropdown>` selects/deselects this dropdown item upon keyboard interaction.\n   *\n   * @private\n   */\n  @property({ type: Boolean, reflect: true })\n  highlighted = false;\n\n  /**\n   * `true` if this dropdown item should be selected.\n   *\n   * @private\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * Dropdown size.\n   */\n  @property({ reflect: true })\n  size = DROPDOWN_SIZE.MEDIUM;\n\n  /**\n   * The `value` attribute that is set to the parent `<cds-dropdown>` when this dropdown item is selected.\n   */\n  @property()\n  value = '';\n\n  /**\n   * true if menu item has ellipsis applied\n   */\n  @state()\n  _hasEllipsisApplied = false;\n\n  /**\n   * Reference to the next sibling element for hover state management.\n   */\n  protected _nextSiblingRef: Element | null = null;\n\n  /**\n   * Gets the next dropdown/combo-box item sibling.\n   */\n  protected _getNextItem(): Element | null {\n    let next = this.nextElementSibling;\n    while (next) {\n      if (\n        next instanceof HTMLElement &&\n        (next.tagName.toLowerCase() === `${prefix}-dropdown-item` ||\n          next.tagName.toLowerCase() === `${prefix}-combo-box-item`)\n      ) {\n        return next;\n      }\n      next = next.nextElementSibling;\n    }\n    return null;\n  }\n\n  /**\n   * Syncs the hovered-next-sibling attribute with the next item.\n   */\n  protected _syncNextSibling(attribute: string, shouldSet: boolean) {\n    const currentSibling = this._nextSiblingRef;\n    currentSibling?.removeAttribute(attribute);\n    if (shouldSet) {\n      const next = this._getNextItem();\n      if (next) {\n        next.setAttribute(attribute, '');\n        this._nextSiblingRef = next;\n        return;\n      }\n    }\n    this._nextSiblingRef = null;\n  }\n\n  protected _handleMouseEnter = () => {\n    if (this.hasAttribute('disabled')) {\n      return;\n    }\n    this._syncNextSibling('hovered-next-sibling', true);\n  };\n\n  protected _handleMouseLeave = () => {\n    this._syncNextSibling('hovered-next-sibling', false);\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'option');\n    }\n    if (!this.hasAttribute('id')) {\n      this.setAttribute(\n        'id',\n        `${prefix}-dropdown-item-${(this.constructor as typeof CDSDropdownItem)\n          .id++}`\n      );\n    }\n    this.setAttribute('aria-selected', String(this.selected));\n    this.addEventListener('mouseenter', this._handleMouseEnter);\n    this.addEventListener('mouseleave', this._handleMouseLeave);\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('mouseenter', this._handleMouseEnter);\n    this.removeEventListener('mouseleave', this._handleMouseLeave);\n    this._syncNextSibling('hovered-next-sibling', false);\n    super.disconnectedCallback();\n  }\n\n  /**\n   * Handles `slotchange` event.\n   *\n   * Adds the `title` property to its parent element so the native\n   * browser tooltip appears for menu items that result in ellipsis\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const text = (target as HTMLSlotElement).assignedNodes().filter(\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n    );\n\n    const textContainer = this.shadowRoot?.querySelector(\n      `.${prefix}--list-box__menu-item__option`\n    );\n\n    if (!textContainer || this._hasEllipsisApplied === true) return;\n\n    const observer = new ResizeObserver(() => {\n      this._hasEllipsisApplied =\n        textContainer.scrollWidth > textContainer.clientWidth;\n\n      if (this._hasEllipsisApplied) {\n        textContainer.setAttribute('title', text[0].textContent ?? '');\n      }\n    });\n\n    observer.observe(textContainer);\n  }\n\n  render() {\n    const { selected, _handleSlotChange: handleSlotChange } = this;\n    return html`\n      <div class=\"${prefix}--list-box__menu-item__option\" part=\"menu-item\">\n        <slot @slotchange=${handleSlotChange}></slot>\n        ${!selected\n          ? undefined\n          : iconLoader(Checkmark16, {\n              part: 'selected-icon',\n              class: `${prefix}--list-box__menu-item__selected-icon`,\n            })}\n      </div>\n    `;\n  }\n\n  /**\n   * Store an identifier for use in composing this item's id.\n   *\n   * Auto-increments anytime a new dropdown-item appears.\n   */\n  static id = 0;\n\n  static styles = styles;\n}\n\nexport default CDSDropdownItem;\n"],"names":["customElement"],"mappings":"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"}

package/es/components/dropdown/dropdown.js

@@ -489,7 +489,6 @@ let CDSDropdown = class CDSDropdown extends ValidityMixin(HostListenerMixin(Form
             this._clearHighlight();
             return;
         }
-        this._setHighlightedItem(item);
     }
     _handleMouseleaveInner(event) {
         var _a, _b, _c;