feat(combobox-item): update interactive state (#11647)

**Related Issue:** #11646 

## Summary

No longer changes `description`  & `heading`  color when hovered.

Author: anveshmekala

packages/calcite-components/src/components/combobox-item/combobox-item.scss

@@ -71,25 +71,22 @@ ul:focus {
   @apply cursor-default;
 }
 
-// selected state
-.label--selected {
-  @apply text-color-1;
-
-  .title {
-    @apply font-medium;
-  }
-}
-
 .label--active {
   @apply focus-inset;
 }
 
-.label:hover,
+:host([selected]) .label,
 .label:active {
-  @apply text-color-1
-    bg-foreground-2
-    no-underline
-    shadow-none;
+  @apply text-color-1;
+
+  .description,
+  .short-text {
+    @apply text-color-2;
+  }
+}
+
+.label:hover {
+  @apply text-color-1 bg-foreground-2;
 }
 
 .label:active {
@@ -101,22 +98,17 @@ ul:focus {
     opacity-0
     duration-150
     ease-in-out;
-  color: theme("borderColor.color.1");
-}
-
-.icon--custom {
-  margin-block-start: -1px;
-}
-
-.icon--selected {
-  @apply text-color-1;
 }
 
-.label--selected .icon {
+:host([selected]) .icon {
   @apply opacity-100;
   color: theme("backgroundColor.brand");
 }
 
+.icon--custom {
+  margin-block-start: -1px;
+}
+
 .center-content {
   display: flex;
   flex-direction: column;
@@ -128,22 +120,28 @@ ul:focus {
   font-size: var(--calcite-internal-combobox-item-description-font-size);
 }
 
-:host([selected]),
-:host(:hover) {
-  .description {
-    color: var(--calcite-color-text-2);
-  }
-}
-
 .short-text {
-  color: var(--calcite-color-text-3);
   white-space: nowrap;
 }
 
 .title {
   color: var(--calcite-color-text-1);
 }
 
+:host([selected]) {
+  .title {
+    @apply font-medium;
+  }
+}
+
+.label,
+.label:hover {
+  .description,
+  .short-text {
+    @apply text-color-3;
+  }
+}
+
 .title,
 .description,
 .short-text {

packages/calcite-components/src/components/combobox-item/combobox-item.tsx

@@ -236,7 +236,6 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
       <calcite-icon
         class={{
           [CSS.custom]: !!this.icon,
-          [CSS.iconSelected]: this.icon && this.selected,
         }}
         flipRtl={this.iconFlipRtl}
         icon={this.icon || iconPath}
@@ -251,7 +250,6 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
       <calcite-icon
         class={{
           [CSS.icon]: true,
-          [CSS.iconSelected]: this.selected,
         }}
         flipRtl={this.iconFlipRtl}
         icon={icon}
@@ -288,7 +286,6 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
 
     const classes = {
       [CSS.label]: true,
-      [CSS.selected]: this.selected,
       [CSS.active]: this.active,
       [CSS.single]: isSingleSelect,
     };

packages/calcite-components/src/components/combobox-item/resources.ts

@@ -7,10 +7,8 @@ export const CSS = {
   custom: "icon--custom",
   description: "description",
   icon: "icon",
-  iconSelected: "icon--selected",
   label: "label",
   scale: (scale: Scale) => `scale--${scale}` as const,
-  selected: "label--selected",
   shortText: "short-text",
   single: "label--single",
   textContainer: "text-container",

packages/calcite-components/src/components/combobox/combobox.e2e.ts

@@ -2099,12 +2099,15 @@ describe("calcite-combobox", () => {
     it("after click interaction with listbox, user can transition to using keyboard “enter” to toggle selected on/off", async () => {
       expect(itemNestedLi).toHaveClass(ComboboxItemCSS.active);
 
+      const selectedItem = await page.find("calcite-combobox-item#PineNested");
+      expect(await selectedItem.getProperty("selected")).toBe(true);
+
       await itemNestedLi.press("Enter");
-      expect(itemNestedLi).not.toHaveClass(ComboboxItemCSS.selected);
+      expect(await selectedItem.getProperty("selected")).toBe(false);
       expect(itemNestedLi).toHaveClass(ComboboxItemCSS.active);
 
       await itemNestedLi.press("Enter");
-      expect(itemNestedLi).toHaveClass(ComboboxItemCSS.selected);
+      expect(await selectedItem.getProperty("selected")).toBe(true);
       expect(itemNestedLi).toHaveClass(ComboboxItemCSS.active);
 
       await element.press("Tab");