From 91624bf4fb6f9fb4cfa0f335f2600551e3a4a27f Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Thu, 27 Feb 2025 14:16:39 -0600
Subject: [PATCH 01/11] feat(combobox-item): add component tokens

---
 .../combobox-item/combobox-item.e2e.ts        | 116 +++++++++++++++++-
 .../combobox-item/combobox-item.scss          |  71 +++++++----
 .../combobox-item/combobox-item.tsx           |   3 +-
 .../src/components/combobox-item/resources.ts |   2 +-
 .../src/custom-theme.stories.ts               |   4 +-
 .../src/custom-theme/combobox-item.ts         |  32 ++++-
 6 files changed, 195 insertions(+), 33 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
index 93ab1a303be..8e4d9e43cba 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
@@ -1,6 +1,9 @@
 import { describe } from "vitest";
-import { defaults, disabled, hidden, reflects, renders, slots } from "../../tests/commonTests";
+import { defaults, disabled, hidden, reflects, renders, slots, themed } from "../../tests/commonTests";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { html } from "../../../support/formatting";
 import { SLOTS } from "./resources";
+import { CSS } from "./resources";
 
 describe("calcite-combobox-item", () => {
   describe("defaults", () => {
@@ -46,4 +49,115 @@ describe("calcite-combobox-item", () => {
   describe("disabled", () => {
     disabled("calcite-combobox-item", { focusTarget: "none" });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      const comboboxHTML = html` <calcite-combobox-item
+        value="Pikachu"
+        heading="Pikachu"
+        description="Pokemon's mascot"
+        short-heading="0025"
+        icon="tree"
+      ></calcite-combobox-item>`;
+
+      const comboboxItemTokens: ComponentTestTokens = {
+        "--calcite-combobox-item-text-color": [
+          {
+            shadowSelector: ` .${CSS.label} `,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+          },
+          {
+            shadowSelector: `.${CSS.custom}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+          },
+        ],
+        "--calcite-combobox-item-text-color-hover": [
+          {
+            shadowSelector: ` .${CSS.label} `,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+            state: "hover",
+          },
+          {
+            shadowSelector: ` .${CSS.label} `,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+            state: { press: { attribute: "class", value: CSS.label } },
+          },
+          {
+            shadowSelector: `.${CSS.custom}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+            state: "hover",
+          },
+          {
+            shadowSelector: `.${CSS.custom}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+            state: { press: { attribute: "class", value: CSS.custom } },
+          },
+        ],
+        "--calcite-combobox-item-background-color-active": {
+          shadowSelector: ` .${CSS.label} `,
+          selector: "calcite-combobox-item",
+          targetProp: "backgroundColor",
+          state: { press: { attribute: "class", value: CSS.label } },
+        },
+        "--calcite-combobox-item-background-color-hover": {
+          shadowSelector: ` .${CSS.label} `,
+          selector: "calcite-combobox-item",
+          targetProp: "backgroundColor",
+          state: "hover",
+        },
+        "--calcite-combobox-item-description-text-color": {
+          shadowSelector: `.${CSS.description}`,
+          selector: "calcite-combobox-item",
+          targetProp: "color",
+        },
+        "--calcite-combobox-item-description-text-color-hover": {
+          shadowSelector: `.${CSS.description}`,
+          selector: "calcite-combobox-item",
+          targetProp: "color",
+          state: "hover",
+        },
+        "--calcite-combobox-item-heading-text-color": {
+          shadowSelector: `.${CSS.heading}`,
+          selector: "calcite-combobox-item",
+          targetProp: "color",
+        },
+      };
+      themed(comboboxHTML, comboboxItemTokens);
+    });
+
+    describe("selected", () => {
+      const selectedComboboxItemHTML = html` <calcite-combobox-item
+        value="Pikachu"
+        heading="Pikachu"
+        description="Pokemon's mascot"
+        short-heading="0025"
+        icon="tree"
+        selected
+      ></calcite-combobox-item>`;
+      const comboboxItemTokens: ComponentTestTokens = {
+        "--calcite-combobox-item-text-color-selected": {
+          shadowSelector: ` .${CSS.label} `,
+          selector: "calcite-combobox-item",
+          targetProp: "color",
+        },
+        "--calcite-combobox-item-selected-indicator-icon-color": {
+          shadowSelector: ` .${CSS.icon} `,
+          selector: "calcite-combobox-item",
+          targetProp: "color",
+        },
+        "--calcite-combobox-item-icon-selected": {
+          shadowSelector: ` .${CSS.custom} `,
+          selector: "calcite-combobox-item",
+          targetProp: "color",
+        },
+      };
+      themed(selectedComboboxItemHTML, comboboxItemTokens);
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
index b5d6d081e22..2cfcaeb5d0b 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.scss
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -1,3 +1,20 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-combobox-item-text-color: Specifies the text color of the combobox item.
+ * @prop --calcite-combobox-item-text-color-hover: Specifies the text color of the combobox item when hovered.
+ * @prop --calcite-combobox-item-text-color-selected: Specifies the text color of the combobox item when selected.
+ * @prop --calcite-combobox-item-background-color-active: Specifies the background color of the combobox item when active.
+ * @prop --calcite-combobox-item-background-color-hover: Specifies the background color of the combobox item when hovered.
+ * @prop --calcite-combobox-item-selected-indicator-icon-color: Specifies the color of the selected indicator icon.
+ * @prop --calcite-combobox-item-icon-selected: Specifies the color of the combobox item icon when selected.
+ * @prop --calcite-combobox-item-description-text-color: Specifies the text color of the combobox item description.
+ * @prop --calcite-combobox-item-description-text-color-hover: Specifies the text color of the combobox item description when hovered.
+ * @prop --calcite-combobox-item-heading-text-color: Specifies the text color of the combobox item heading.
+ */
+
 @include base-component();
 
 .scale--s {
@@ -47,8 +64,7 @@ ul:focus {
 }
 
 .label {
-  @apply text-color-3
-  focus-base
+  @apply focus-base
   relative
   box-border
   flex
@@ -57,7 +73,6 @@ ul:focus {
   cursor-pointer
   items-center
   no-underline
-  duration-150
   ease-in-out;
   @include word-break();
   justify-content: space-around;
@@ -65,6 +80,9 @@ ul:focus {
   padding-block: var(--calcite-combobox-item-spacing-unit-s);
   padding-inline-end: var(--calcite-combobox-item-spacing-unit-l);
   padding-inline-start: var(--calcite-combobox-item-indent-value);
+
+  color: var(--calcite-combobox-item-text-color, var(--calcite-color-text-3));
+  transition-duration: var(--calcite-animation-timing);
 }
 
 :host([disabled]) .label {
@@ -73,9 +91,9 @@ ul:focus {
 
 // selected state
 .label--selected {
-  @apply text-color-1;
+  color: var(--calcite-combobox-item-text-color-selected, var(--calcite-color-text-1));
 
-  .title {
+  .heading {
     @apply font-medium;
   }
 }
@@ -86,22 +104,16 @@ ul:focus {
 
 .label:hover,
 .label:active {
-  @apply text-color-1
-    bg-foreground-2
-    no-underline
-    shadow-none;
+  @apply no-underline shadow-none;
+  color: var(--calcite-combobox-item-text-color-hover, var(--calcite-color-text-1));
 }
 
-.label:active {
-  background-color: var(--calcite-color-foreground-3);
+.label:hover {
+  background-color: var(--calcite-combobox-item-background-color-hover, var(--calcite-color-foreground-2));
 }
 
-.icon {
-  @apply inline-flex
-    opacity-0
-    duration-150
-    ease-in-out;
-  color: theme("borderColor.color.1");
+.label:active {
+  background-color: var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-3));
 }
 
 .icon--custom {
@@ -109,12 +121,19 @@ ul:focus {
 }
 
 .icon--selected {
-  @apply text-color-1;
+  color: var(--calcite-combobox-item-icon-selected, var(--calcite-color-text-1));
+}
+
+.icon {
+  @apply inline-flex
+    opacity-0
+    duration-150
+    ease-in-out;
 }
 
 .label--selected .icon {
   @apply opacity-100;
-  color: theme("backgroundColor.brand");
+  color: var(--calcite-combobox-item-selected-indicator-icon-color, var(--calcite-color-brand));
 }
 
 .center-content {
@@ -131,20 +150,24 @@ ul:focus {
 :host([selected]),
 :host(:hover) {
   .description {
-    color: var(--calcite-color-text-2);
+    color: var(--calcite-combobox-item-description-text-color-hover, var(--calcite-color-text-2));
   }
 }
 
 .short-text {
-  color: var(--calcite-color-text-3);
+  color: var(--calcite-combobox-item-short-heading-text-color, var(--calcite-color-text-3));
   white-space: nowrap;
 }
 
-.title {
-  color: var(--calcite-color-text-1);
+.heading {
+  color: var(--calcite-combobox-item-heading-text-color, var(--calcite-color-text-1));
+}
+
+.description {
+  color: var(--calcite-combobox-item-description-text-color, var(--calcite-color-text-3));
 }
 
-.title,
+.heading,
 .description,
 .short-text {
   line-height: var(--calcite-font-line-height-relative-snug);
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
index 6291e933e87..5e00803a957 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
@@ -251,7 +251,6 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
       <calcite-icon
         class={{
           [CSS.icon]: true,
-          [CSS.iconSelected]: this.selected,
         }}
         flipRtl={this.iconFlipRtl}
         icon={icon}
@@ -313,7 +312,7 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
             <slot name={SLOTS.contentStart} />
             {this.renderIcon(icon)}
             <div class={CSS.centerContent}>
-              <div class={CSS.title}>
+              <div class={CSS.heading}>
                 {highlightText({
                   text: headingText,
                   pattern: filterTextMatchPattern,
diff --git a/packages/calcite-components/src/components/combobox-item/resources.ts b/packages/calcite-components/src/components/combobox-item/resources.ts
index 1c03a19cf25..9dfd77c7e06 100644
--- a/packages/calcite-components/src/components/combobox-item/resources.ts
+++ b/packages/calcite-components/src/components/combobox-item/resources.ts
@@ -14,7 +14,7 @@ export const CSS = {
   shortText: "short-text",
   single: "label--single",
   textContainer: "text-container",
-  title: "title",
+  heading: "heading",
 };
 
 export const SLOTS = {
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index b2d8dd74ac2..6c4e46b69e3 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -21,7 +21,7 @@ import { calciteSwitch } from "./custom-theme/switch";
 import { card, cardThumbnail, cardTokens } from "./custom-theme/card";
 import { checkbox, checkboxTokens } from "./custom-theme/checkbox";
 import { chips, chipTokens } from "./custom-theme/chips";
-import { comboboxItem } from "./custom-theme/combobox-item";
+import { comboboxItem, comboboxItemTokens, selectedComboboxItem } from "./custom-theme/combobox-item";
 import { datePicker, datePickerRange, datePickerTokens } from "./custom-theme/date-picker";
 import { dropdown, DropdownGroupTokens, DropdownItemTokens, DropdownTokens } from "./custom-theme/dropdown";
 import { flow, flowTokens } from "./custom-theme/flow";
@@ -145,6 +145,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
       <div class="demo-column">
         ${tabs} ${tabsBordered} ${label} ${link} ${list} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials}
         ${avatarThumbnail} ${progress} ${handle} ${graph} ${textArea} ${popover} ${tile} ${tooltip} ${comboboxItem}
+        ${selectedComboboxItem}
       </div>
       <div class="demo-column">
         ${navigation} ${navigationLogos} ${navigationUsers} ${blockSection} ${block} ${rating} ${panel}
@@ -175,6 +176,7 @@ const componentTokens = {
   ...cardTokens,
   ...checkboxTokens,
   ...chipTokens,
+  ...comboboxItemTokens,
   ...datePickerTokens,
   ...DropdownTokens,
   ...DropdownItemTokens,
diff --git a/packages/calcite-components/src/custom-theme/combobox-item.ts b/packages/calcite-components/src/custom-theme/combobox-item.ts
index 1ac6f6c3966..0e8083a24c4 100644
--- a/packages/calcite-components/src/custom-theme/combobox-item.ts
+++ b/packages/calcite-components/src/custom-theme/combobox-item.ts
@@ -1,7 +1,31 @@
 import { html } from "../../support/formatting";
 
-export const comboboxItem = html`<calcite-combobox-item
-  icon="altitude"
-  value="altitude"
-  text-label="Altitude"
+export const comboboxItemTokens = {
+  calciteComboboxItemTextColor: "",
+  calciteComboboxItemTextColorHover: "",
+  calciteComboboxItemTextColorSelected: "",
+  calciteComboboxItemBackgroundColorActive: "",
+  calciteComboboxItemBackgroundColorHover: "",
+  calciteComboboxItemSelectedIndicatorIconColor: "",
+  calciteComboboxItemIconSelected: "",
+  calciteComboboxItemDescriptionTextColor: "",
+  calciteComboboxItemDescriptionTextColorHover: "",
+  calciteComboboxItemHeadingTextColor: "",
+};
+
+export const comboboxItem = html` <calcite-combobox-item
+  value="Pikachu"
+  heading="Pikachu"
+  description="Pokemon's mascot"
+  short-heading="0025"
+  icon="tree"
+></calcite-combobox-item>`;
+
+export const selectedComboboxItem = html`<calcite-combobox-item
+  value="Pikachu"
+  heading="Pikachu"
+  description="Pokemon's mascot"
+  short-heading="0025"
+  icon="tree"
+  selected
 ></calcite-combobox-item>`;

From f7cf758c5f3d00830606f9df8a981d9f6fcf3f6e Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Thu, 27 Feb 2025 14:25:49 -0600
Subject: [PATCH 02/11] cleanup

---
 .../combobox-item/combobox-item.e2e.ts        | 10 +++---
 .../combobox-item/combobox-item.scss          | 32 +++++++++----------
 .../combobox-item/combobox-item.tsx           |  2 +-
 .../src/components/combobox-item/resources.ts |  2 +-
 4 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
index 8e4d9e43cba..332f4d9e837 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
@@ -68,7 +68,7 @@ describe("calcite-combobox-item", () => {
             targetProp: "color",
           },
           {
-            shadowSelector: `.${CSS.custom}`,
+            shadowSelector: `.${CSS.iconCustom}`,
             selector: "calcite-combobox-item",
             targetProp: "color",
           },
@@ -87,16 +87,16 @@ describe("calcite-combobox-item", () => {
             state: { press: { attribute: "class", value: CSS.label } },
           },
           {
-            shadowSelector: `.${CSS.custom}`,
+            shadowSelector: `.${CSS.iconCustom}`,
             selector: "calcite-combobox-item",
             targetProp: "color",
             state: "hover",
           },
           {
-            shadowSelector: `.${CSS.custom}`,
+            shadowSelector: `.${CSS.iconCustom}`,
             selector: "calcite-combobox-item",
             targetProp: "color",
-            state: { press: { attribute: "class", value: CSS.custom } },
+            state: { press: { attribute: "class", value: CSS.iconCustom } },
           },
         ],
         "--calcite-combobox-item-background-color-active": {
@@ -152,7 +152,7 @@ describe("calcite-combobox-item", () => {
           targetProp: "color",
         },
         "--calcite-combobox-item-icon-selected": {
-          shadowSelector: ` .${CSS.custom} `,
+          shadowSelector: ` .${CSS.iconCustom} `,
           selector: "calcite-combobox-item",
           targetProp: "color",
         },
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
index 2cfcaeb5d0b..7439818f7dc 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.scss
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -3,16 +3,16 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-combobox-item-text-color: Specifies the text color of the combobox item.
- * @prop --calcite-combobox-item-text-color-hover: Specifies the text color of the combobox item when hovered.
- * @prop --calcite-combobox-item-text-color-selected: Specifies the text color of the combobox item when selected.
- * @prop --calcite-combobox-item-background-color-active: Specifies the background color of the combobox item when active.
- * @prop --calcite-combobox-item-background-color-hover: Specifies the background color of the combobox item when hovered.
+ * @prop --calcite-combobox-item-text-color: Specifies the text color of the component.
+ * @prop --calcite-combobox-item-text-color-hover: Specifies the text color of the component when hovered.
+ * @prop --calcite-combobox-item-text-color-selected: Specifies the text color of the component when selected.
+ * @prop --calcite-combobox-item-background-color-active: Specifies the background color of the component when active.
+ * @prop --calcite-combobox-item-background-color-hover: Specifies the background color of the component when hovered.
  * @prop --calcite-combobox-item-selected-indicator-icon-color: Specifies the color of the selected indicator icon.
- * @prop --calcite-combobox-item-icon-selected: Specifies the color of the combobox item icon when selected.
- * @prop --calcite-combobox-item-description-text-color: Specifies the text color of the combobox item description.
- * @prop --calcite-combobox-item-description-text-color-hover: Specifies the text color of the combobox item description when hovered.
- * @prop --calcite-combobox-item-heading-text-color: Specifies the text color of the combobox item heading.
+ * @prop --calcite-combobox-item-icon-selected: Specifies the color of the component's icon when selected.
+ * @prop --calcite-combobox-item-description-text-color: Specifies the text color of the component's description.
+ * @prop --calcite-combobox-item-description-text-color-hover: Specifies the text color of the component's description when hovered.
+ * @prop --calcite-combobox-item-heading-text-color: Specifies the text color of the component heading.
  */
 
 @include base-component();
@@ -116,6 +116,13 @@ ul:focus {
   background-color: var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-3));
 }
 
+.icon {
+  @apply inline-flex
+    opacity-0
+    duration-150
+    ease-in-out;
+}
+
 .icon--custom {
   margin-block-start: -1px;
 }
@@ -124,13 +131,6 @@ ul:focus {
   color: var(--calcite-combobox-item-icon-selected, var(--calcite-color-text-1));
 }
 
-.icon {
-  @apply inline-flex
-    opacity-0
-    duration-150
-    ease-in-out;
-}
-
 .label--selected .icon {
   @apply opacity-100;
   color: var(--calcite-combobox-item-selected-indicator-icon-color, var(--calcite-color-brand));
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
index 5e00803a957..a5c351e432c 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
@@ -235,7 +235,7 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
     return this.icon ? (
       <calcite-icon
         class={{
-          [CSS.custom]: !!this.icon,
+          [CSS.iconCustom]: !!this.icon,
           [CSS.iconSelected]: this.icon && this.selected,
         }}
         flipRtl={this.iconFlipRtl}
diff --git a/packages/calcite-components/src/components/combobox-item/resources.ts b/packages/calcite-components/src/components/combobox-item/resources.ts
index 9dfd77c7e06..b3f1aea5d0b 100644
--- a/packages/calcite-components/src/components/combobox-item/resources.ts
+++ b/packages/calcite-components/src/components/combobox-item/resources.ts
@@ -4,7 +4,7 @@ export const CSS = {
   active: "label--active",
   centerContent: "center-content",
   container: "container",
-  custom: "icon--custom",
+  iconCustom: "icon--custom",
   description: "description",
   icon: "icon",
   iconSelected: "icon--selected",

From 4e79af300b6bbeebde9609af12964067a639ef8b Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Tue, 4 Mar 2025 17:47:02 -0600
Subject: [PATCH 03/11] rename item selected token

---
 .../components/combobox-item/combobox-item.e2e.ts    |  2 +-
 .../src/components/combobox-item/combobox-item.scss  | 12 ++++++------
 .../src/custom-theme/combobox-item.ts                |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
index 332f4d9e837..5b099e7df2f 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
@@ -151,7 +151,7 @@ describe("calcite-combobox-item", () => {
           selector: "calcite-combobox-item",
           targetProp: "color",
         },
-        "--calcite-combobox-item-icon-selected": {
+        "--calcite-combobox-icon-color-selected": {
           shadowSelector: ` .${CSS.iconCustom} `,
           selector: "calcite-combobox-item",
           targetProp: "color",
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
index 7439818f7dc..ecee8b023ea 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.scss
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -9,9 +9,9 @@
  * @prop --calcite-combobox-item-background-color-active: Specifies the background color of the component when active.
  * @prop --calcite-combobox-item-background-color-hover: Specifies the background color of the component when hovered.
  * @prop --calcite-combobox-item-selected-indicator-icon-color: Specifies the color of the selected indicator icon.
- * @prop --calcite-combobox-item-icon-selected: Specifies the color of the component's icon when selected.
- * @prop --calcite-combobox-item-description-text-color: Specifies the text color of the component's description.
- * @prop --calcite-combobox-item-description-text-color-hover: Specifies the text color of the component's description when hovered.
+ * @prop --calcite-combobox-icon-color-selected: Specifies the color of the component's icon when selected.
+ * @prop --calcite-combobox-description-text-color: Specifies the text color of the component's description.
+ * @prop --calcite-combobox-description-text-color-hover: Specifies the text color of the component's description when hovered.
  * @prop --calcite-combobox-item-heading-text-color: Specifies the text color of the component heading.
  */
 
@@ -128,7 +128,7 @@ ul:focus {
 }
 
 .icon--selected {
-  color: var(--calcite-combobox-item-icon-selected, var(--calcite-color-text-1));
+  color: var(--calcite-combobox-icon-color-selected, var(--calcite-color-text-1));
 }
 
 .label--selected .icon {
@@ -150,7 +150,7 @@ ul:focus {
 :host([selected]),
 :host(:hover) {
   .description {
-    color: var(--calcite-combobox-item-description-text-color-hover, var(--calcite-color-text-2));
+    color: var(--calcite-combobox-description-text-color-hover, var(--calcite-color-text-2));
   }
 }
 
@@ -164,7 +164,7 @@ ul:focus {
 }
 
 .description {
-  color: var(--calcite-combobox-item-description-text-color, var(--calcite-color-text-3));
+  color: var(--calcite-combobox-description-text-color, var(--calcite-color-text-3));
 }
 
 .heading,
diff --git a/packages/calcite-components/src/custom-theme/combobox-item.ts b/packages/calcite-components/src/custom-theme/combobox-item.ts
index 0e8083a24c4..ab17398e3c7 100644
--- a/packages/calcite-components/src/custom-theme/combobox-item.ts
+++ b/packages/calcite-components/src/custom-theme/combobox-item.ts
@@ -7,7 +7,7 @@ export const comboboxItemTokens = {
   calciteComboboxItemBackgroundColorActive: "",
   calciteComboboxItemBackgroundColorHover: "",
   calciteComboboxItemSelectedIndicatorIconColor: "",
-  calciteComboboxItemIconSelected: "",
+  calciteComboboxIconColorSelected: "",
   calciteComboboxItemDescriptionTextColor: "",
   calciteComboboxItemDescriptionTextColorHover: "",
   calciteComboboxItemHeadingTextColor: "",

From 6eed55cb63467dcc649a794bb556fe8cb5f9553c Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Tue, 11 Mar 2025 15:10:21 -0500
Subject: [PATCH 04/11] rename tokens

---
 .../combobox-item/combobox-item.e2e.ts        | 51 ++++++++++---------
 .../combobox-item/combobox-item.scss          | 38 +++++++-------
 .../src/custom-theme/combobox-item.ts         | 10 ++--
 3 files changed, 50 insertions(+), 49 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
index 5b099e7df2f..b76aa2e0b37 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
@@ -111,18 +111,33 @@ describe("calcite-combobox-item", () => {
           targetProp: "backgroundColor",
           state: "hover",
         },
-        "--calcite-combobox-item-description-text-color": {
-          shadowSelector: `.${CSS.description}`,
-          selector: "calcite-combobox-item",
-          targetProp: "color",
-        },
-        "--calcite-combobox-item-description-text-color-hover": {
-          shadowSelector: `.${CSS.description}`,
-          selector: "calcite-combobox-item",
-          targetProp: "color",
-          state: "hover",
-        },
-        "--calcite-combobox-item-heading-text-color": {
+        "--calcite-combobox-description-text-color": [
+          {
+            shadowSelector: `.${CSS.description}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+          },
+          {
+            shadowSelector: `.${CSS.shortText}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+          },
+        ],
+        "--calcite-combobox-description-text-color-press": [
+          {
+            shadowSelector: `.${CSS.description}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+            state: { press: { attribute: "class", value: CSS.description } },
+          },
+          {
+            shadowSelector: `.${CSS.shortText}`,
+            selector: "calcite-combobox-item",
+            targetProp: "color",
+            state: { press: { attribute: "class", value: CSS.shortText } },
+          },
+        ],
+        "--calcite-combobox-heading-text-color": {
           shadowSelector: `.${CSS.heading}`,
           selector: "calcite-combobox-item",
           targetProp: "color",
@@ -141,21 +156,11 @@ describe("calcite-combobox-item", () => {
         selected
       ></calcite-combobox-item>`;
       const comboboxItemTokens: ComponentTestTokens = {
-        "--calcite-combobox-item-text-color-selected": {
-          shadowSelector: ` .${CSS.label} `,
-          selector: "calcite-combobox-item",
-          targetProp: "color",
-        },
-        "--calcite-combobox-item-selected-indicator-icon-color": {
+        "--calcite-combobox-selected-icon-color": {
           shadowSelector: ` .${CSS.icon} `,
           selector: "calcite-combobox-item",
           targetProp: "color",
         },
-        "--calcite-combobox-icon-color-selected": {
-          shadowSelector: ` .${CSS.iconCustom} `,
-          selector: "calcite-combobox-item",
-          targetProp: "color",
-        },
       };
       themed(selectedComboboxItemHTML, comboboxItemTokens);
     });
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
index f75606f456d..900d503fd59 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.scss
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -5,14 +5,13 @@
  *
  * @prop --calcite-combobox-item-text-color: Specifies the text color of the component.
  * @prop --calcite-combobox-item-text-color-hover: Specifies the text color of the component when hovered.
- * @prop --calcite-combobox-item-text-color-selected: Specifies the text color of the component when selected.
  * @prop --calcite-combobox-item-background-color-active: Specifies the background color of the component when active.
  * @prop --calcite-combobox-item-background-color-hover: Specifies the background color of the component when hovered.
- * @prop --calcite-combobox-item-selected-indicator-icon-color: Specifies the color of the selected indicator icon.
- * @prop --calcite-combobox-icon-color-selected: Specifies the color of the component's icon when selected.
- * @prop --calcite-combobox-description-text-color: Specifies the text color of the component's description.
- * @prop --calcite-combobox-description-text-color-hover: Specifies the text color of the component's description when hovered.
- * @prop --calcite-combobox-item-heading-text-color: Specifies the text color of the component heading.
+ * @prop --calcite-combobox-selected-icon-color: Specifies the color of the selected indicator icon.
+  * @prop --calcite-combobox-icon-color-selected: Specifies the color of the component's icon when selected.
+ * @prop --calcite-combobox-description-text-color: Specifies the text color of the component's description & short-heading.
+ * @prop --calcite-combobox-description-text-color-press: Specifies the text color of the component's description & short-heading  when hovered.
+ * @prop --calcite-combobox-heading-text-color: Specifies the text color of the component heading.
  */
 
 @include base-component();
@@ -93,17 +92,6 @@ ul:focus {
   @apply focus-inset;
 }
 
-:host([selected]) .label,
-.label:active {
-  @apply no-underline shadow-none;
-  color: var(--calcite-combobox-item-text-color-hover, var(--calcite-color-text-1));
-
-  .description,
-  .short-text {
-    @apply text-color-2;
-  }
-}
-
 .label:hover {
   background-color: var(--calcite-combobox-item-background-color-hover, var(--calcite-color-foreground-2));
   color: var(--calcite-combobox-item-text-color-hover, var(--calcite-color-text-1));
@@ -113,6 +101,16 @@ ul:focus {
   background-color: var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-3));
 }
 
+:host([selected]) .label,
+.label:active {
+  color: var(--calcite-combobox-item-text-color-hover, var(--calcite-color-text-1));
+
+  .description,
+  .short-text {
+    color: var(--calcite-combobox-description-text-color-press, var(--calcite-color-text-2));
+  }
+}
+
 .icon {
   @apply inline-flex
     opacity-0
@@ -122,7 +120,7 @@ ul:focus {
 
 :host([selected]) .icon {
   @apply opacity-100;
-  color: var(--calcite-combobox-item-selected-indicator-icon-color, var(--calcite-color-brand));
+  color: var(--calcite-combobox-selected-icon-color, var(--calcite-color-brand));
 }
 
 .icon--custom {
@@ -145,7 +143,7 @@ ul:focus {
 }
 
 .heading {
-  color: var(--calcite-combobox-item-heading-text-color, var(--calcite-color-text-1));
+  color: var(--calcite-combobox-heading-text-color, var(--calcite-color-text-1));
 }
 
 :host([selected]) {
@@ -158,7 +156,7 @@ ul:focus {
 .label:hover {
   .description,
   .short-text {
-    color: var(--calcite-combobox-item-text-color, var(--calcite-color-text-3));
+    color: var(--calcite-combobox-description-text-color, var(--calcite-color-text-3));
   }
 }
 
diff --git a/packages/calcite-components/src/custom-theme/combobox-item.ts b/packages/calcite-components/src/custom-theme/combobox-item.ts
index ab17398e3c7..83b230b7e20 100644
--- a/packages/calcite-components/src/custom-theme/combobox-item.ts
+++ b/packages/calcite-components/src/custom-theme/combobox-item.ts
@@ -3,14 +3,12 @@ import { html } from "../../support/formatting";
 export const comboboxItemTokens = {
   calciteComboboxItemTextColor: "",
   calciteComboboxItemTextColorHover: "",
-  calciteComboboxItemTextColorSelected: "",
   calciteComboboxItemBackgroundColorActive: "",
   calciteComboboxItemBackgroundColorHover: "",
-  calciteComboboxItemSelectedIndicatorIconColor: "",
-  calciteComboboxIconColorSelected: "",
-  calciteComboboxItemDescriptionTextColor: "",
-  calciteComboboxItemDescriptionTextColorHover: "",
-  calciteComboboxItemHeadingTextColor: "",
+  calciteComboboxSelectedIconColor: "",
+  calciteComboboxDescriptionTextColor: "",
+  calciteComboboxDescriptionTextColorPress: "",
+  calciteComboboxHeadingTextColor: "",
 };
 
 export const comboboxItem = html` <calcite-combobox-item

From 3c124ac280a7965610fdb0d942ae1374edb2e7ca Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Thu, 13 Mar 2025 12:48:39 -0500
Subject: [PATCH 05/11] fix test failures

---
 .../components/combobox-item/combobox-item.scss    | 14 +++++---------
 .../src/components/combobox/combobox.scss          |  4 ++++
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
index 900d503fd59..afab7c1064e 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.scss
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -8,7 +8,6 @@
  * @prop --calcite-combobox-item-background-color-active: Specifies the background color of the component when active.
  * @prop --calcite-combobox-item-background-color-hover: Specifies the background color of the component when hovered.
  * @prop --calcite-combobox-selected-icon-color: Specifies the color of the selected indicator icon.
-  * @prop --calcite-combobox-icon-color-selected: Specifies the color of the component's icon when selected.
  * @prop --calcite-combobox-description-text-color: Specifies the text color of the component's description & short-heading.
  * @prop --calcite-combobox-description-text-color-press: Specifies the text color of the component's description & short-heading  when hovered.
  * @prop --calcite-combobox-heading-text-color: Specifies the text color of the component heading.
@@ -146,20 +145,17 @@ ul:focus {
   color: var(--calcite-combobox-heading-text-color, var(--calcite-color-text-1));
 }
 
+.description,
+.short-text {
+  color: var(--calcite-combobox-description-text-color, var(--calcite-color-text-3));
+}
+
 :host([selected]) {
   .heading {
     @apply font-medium;
   }
 }
 
-.label,
-.label:hover {
-  .description,
-  .short-text {
-    color: var(--calcite-combobox-description-text-color, var(--calcite-color-text-3));
-  }
-}
-
 .title,
 .description,
 .short-text {
diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss
index c2d6d7697e7..11b9e163641 100644
--- a/packages/calcite-components/src/components/combobox/combobox.scss
+++ b/packages/calcite-components/src/components/combobox/combobox.scss
@@ -4,6 +4,10 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-combobox-input-height: Specifies the height of the component's input.
+ * @prop --calcite-combobox-selected-icon-color: Specifies the color of the `calcite-combobox-item`'s selected indicator icon.
+ * @prop --calcite-combobox-description-text-color: Specifies the text color of the `calcite-combobox-item`'s description & short-heading.
+ * @prop --calcite-combobox-description-text-color-press: Specifies the text color of the `calcite-combobox-item`'s description & short-heading  when hovered.
+ * @prop --calcite-combobox-heading-text-color: Specifies the text color of the `calcite-combobox-item`'s heading.
  */
 
 :host {

From 3566f50a096e80a2261e712e40a93d934198602f Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Thu, 13 Mar 2025 17:12:31 -0500
Subject: [PATCH 06/11] revert

---
 .../THIRD-PARTY-LICENSES.md                   | 82 +++++++++----------
 .../combobox-item/combobox-item.scss          |  2 +-
 2 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/packages/calcite-components/THIRD-PARTY-LICENSES.md b/packages/calcite-components/THIRD-PARTY-LICENSES.md
index 49d754f1b52..00b76be6ef7 100644
--- a/packages/calcite-components/THIRD-PARTY-LICENSES.md
+++ b/packages/calcite-components/THIRD-PARTY-LICENSES.md
@@ -32,26 +32,26 @@ interactjs
 
 Copyright (c) 2012-present Taye Adeyemi <dev@taye.me>
 
-Permission is hereby granted, free of charge, to any person
-obtaining a copy of this software and associated
-documentation files (the "Software"), to deal in the Software
-without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense,
-and/or sell copies of the Software, and to permit persons to
-whom the Software is furnished to do so, subject to the
+Permission is hereby granted, free of charge, to any person 
+obtaining a copy of this software and associated 
+documentation files (the "Software"), to deal in the Software 
+without restriction, including without limitation the rights 
+to use, copy, modify, merge, publish, distribute, sublicense, 
+and/or sell copies of the Software, and to permit persons to 
+whom the Software is furnished to do so, subject to the 
 following conditions:
 
-The above copyright notice and this permission notice shall
-be included in all copies or substantial portions of the
+The above copyright notice and this permission notice shall 
+be included in all copies or substantial portions of the 
 Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
-KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
-WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
-PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
-OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY 
+KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE 
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR 
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
 SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 ---
@@ -66,15 +66,15 @@ Redistribution and use in source and binary forms, with or without
 modification, are permitted provided that the following conditions are met:
 
 1. Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
+list of conditions and the following disclaimer.
 
 2. Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
+this list of conditions and the following disclaimer in the documentation
+and/or other materials provided with the distribution.
 
 3. Neither the name of the copyright holder nor the names of its
-   contributors may be used to endorse or promote products derived from
-   this software without specific prior written permission.
+contributors may be used to endorse or promote products derived from
+this software without specific prior written permission.
 
 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
@@ -102,15 +102,15 @@ Redistribution and use in source and binary forms, with or without
 modification, are permitted provided that the following conditions are met:
 
 1. Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
+list of conditions and the following disclaimer.
 
 2. Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
+this list of conditions and the following disclaimer in the documentation
+and/or other materials provided with the distribution.
 
 3. Neither the name of the copyright holder nor the names of its
-   contributors may be used to endorse or promote products derived from
-   this software without specific prior written permission.
+contributors may be used to endorse or promote products derived from
+this software without specific prior written permission.
 
 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
@@ -141,15 +141,15 @@ Redistribution and use in source and binary forms, with or without
 modification, are permitted provided that the following conditions are met:
 
 1. Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
+list of conditions and the following disclaimer.
 
 2. Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
+this list of conditions and the following disclaimer in the documentation
+and/or other materials provided with the distribution.
 
 3. Neither the name of the copyright holder nor the names of its
-   contributors may be used to endorse or promote products derived from
-   this software without specific prior written permission.
+contributors may be used to endorse or promote products derived from
+this software without specific prior written permission.
 
 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
@@ -175,7 +175,7 @@ MIT
 @types/sortablejs
 @types/trusted-types
 
-MIT License
+   MIT License
 
 Copyright (c) Microsoft Corporation.
 
@@ -513,15 +513,15 @@ Redistribution and use in source and binary forms, with or without
 modification, are permitted provided that the following conditions are met:
 
 1. Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
+list of conditions and the following disclaimer.
 
 2. Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
+this list of conditions and the following disclaimer in the documentation
+and/or other materials provided with the distribution.
 
 3. Neither the name of the copyright holder nor the names of its
-   contributors may be used to endorse or promote products derived from
-   this software without specific prior written permission.
+contributors may be used to endorse or promote products derived from
+this software without specific prior written permission.
 
 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
@@ -545,7 +545,7 @@ DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
 
 This software consists of voluntary contributions made by many
 individuals. For exact contribution history, see the revision history
-available at <https://github.com/lodash/lodash>
+available at https://github.com/lodash/lodash
 
 The following license applies to all parts of this software except as
 documented below:
@@ -577,7 +577,7 @@ Copyright and related rights for sample code are waived via CC0. Sample
 code is defined as all source code displayed within the prose of the
 documentation.
 
-CC0: <http://creativecommons.org/publicdomain/zero/1.0/>
+CC0: http://creativecommons.org/publicdomain/zero/1.0/
 
 ====
 
@@ -642,7 +642,7 @@ SOFTWARE.
 
 parse5
 
-Copyright (c) 2013-2019 Ivan Nikulin (<ifaaan@gmail.com>, <https://github.com/inikulin>)
+Copyright (c) 2013-2019 Ivan Nikulin (ifaaan@gmail.com, https://github.com/inikulin)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -791,7 +791,7 @@ type-fest
 
 MIT License
 
-Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (<https://sindresorhus.com>)
+Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
index afab7c1064e..6777cdd6434 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.scss
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -156,7 +156,7 @@ ul:focus {
   }
 }
 
-.title,
+.heading,
 .description,
 .short-text {
   line-height: var(--calcite-font-line-height-relative-snug);

From 9ffb94ea94d5449827937b21c94ead085db3e062 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Thu, 13 Mar 2025 17:20:37 -0500
Subject: [PATCH 07/11] fix lint changes

---
 README.md | 44 ++++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index 5fd84995d20..b3e2a274f65 100644
--- a/README.md
+++ b/README.md
@@ -16,8 +16,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
 
 <!-- readme: contributors,calcite-admin/- -start -->
 <table>
- <tbody>
-  <tr>
+	<tbody>
+		<tr>
             <td align="center">
                 <a href="https://github.com/driskull">
                     <img src="https://avatars.githubusercontent.com/u/1231455?v=4" width="100;" alt="driskull"/>
@@ -60,8 +60,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Erik Harper</b></sub>
                 </a>
             </td>
-  </tr>
-  <tr>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/anveshmekala">
                     <img src="https://avatars.githubusercontent.com/u/88453586?v=4" width="100;" alt="anveshmekala"/>
@@ -104,8 +104,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Ali Stump</b></sub>
                 </a>
             </td>
-  </tr>
-  <tr>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/caripizza">
                     <img src="https://avatars.githubusercontent.com/u/42423180?v=4" width="100;" alt="caripizza"/>
@@ -148,8 +148,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Kumar Jayaram Gayatri</b></sub>
                 </a>
             </td>
-  </tr>
-  <tr>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/kat10140">
                     <img src="https://avatars.githubusercontent.com/u/48069902?v=4" width="100;" alt="kat10140"/>
@@ -192,8 +192,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Max Patiiuk</b></sub>
                 </a>
             </td>
-  </tr>
-  <tr>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/ffaubry">
                     <img src="https://avatars.githubusercontent.com/u/3506166?v=4" width="100;" alt="ffaubry"/>
@@ -236,8 +236,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Jack Rowlingson</b></sub>
                 </a>
             </td>
-  </tr>
-  <tr>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/crowjonah">
                     <img src="https://avatars.githubusercontent.com/u/1634397?v=4" width="100;" alt="crowjonah"/>
@@ -280,8 +280,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Mike Horn</b></sub>
                 </a>
             </td>
-  </tr>
-  <tr>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/Apahadi73">
                     <img src="https://avatars.githubusercontent.com/u/36856709?v=4" width="100;" alt="Apahadi73"/>
@@ -324,8 +324,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Aine Fitzgerald Coleman</b></sub>
                 </a>
             </td>
-  </tr>
-  <tr>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/anveshrmekala">
                     <img src="https://avatars.githubusercontent.com/u/107427943?v=4" width="100;" alt="anveshrmekala"/>
@@ -368,8 +368,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Nathan Whittaker</b></sub>
                 </a>
             </td>
-  </tr>
-  <tr>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/oknoway">
                     <img src="https://avatars.githubusercontent.com/u/354970?v=4" width="100;" alt="oknoway"/>
@@ -412,8 +412,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Drew Tate</b></sub>
                 </a>
             </td>
-  </tr>
-  <tr>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/allieorth">
                     <img src="https://avatars.githubusercontent.com/u/48034760?v=4" width="100;" alt="allieorth"/>
@@ -428,8 +428,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
                     <sub><b>Aaron Shetland</b></sub>
                 </a>
             </td>
-  </tr>
- <tbody>
+		</tr>
+	<tbody>
 </table>
 <!-- readme: contributors,calcite-admin/- -end -->
 

From faebcb76c8ff603ea4a435037c5a01880101223a Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Mon, 17 Mar 2025 12:05:32 -0500
Subject: [PATCH 08/11] feedback changes

---
 .../components/combobox-item/combobox-item.e2e.ts  |  4 ++--
 .../components/combobox-item/combobox-item.scss    | 14 +++++++-------
 .../src/components/combobox/combobox.scss          |  4 ----
 .../src/custom-theme/combobox-item.ts              |  4 ++--
 4 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
index b76aa2e0b37..04d1557739c 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
@@ -61,7 +61,7 @@ describe("calcite-combobox-item", () => {
       ></calcite-combobox-item>`;
 
       const comboboxItemTokens: ComponentTestTokens = {
-        "--calcite-combobox-item-text-color": [
+        "--calcite-combobox-text-color": [
           {
             shadowSelector: ` .${CSS.label} `,
             selector: "calcite-combobox-item",
@@ -73,7 +73,7 @@ describe("calcite-combobox-item", () => {
             targetProp: "color",
           },
         ],
-        "--calcite-combobox-item-text-color-hover": [
+        "--calcite-combobox-text-color-hover": [
           {
             shadowSelector: ` .${CSS.label} `,
             selector: "calcite-combobox-item",
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
index 6777cdd6434..ee219b08bb8 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.scss
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -3,13 +3,13 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-combobox-item-text-color: Specifies the text color of the component.
- * @prop --calcite-combobox-item-text-color-hover: Specifies the text color of the component when hovered.
+ * @prop --calcite-combobox-text-color: Specifies the text color of the component.
+ * @prop --calcite-combobox-text-color-hover: Specifies the text color of the component when hovered.
  * @prop --calcite-combobox-item-background-color-active: Specifies the background color of the component when active.
  * @prop --calcite-combobox-item-background-color-hover: Specifies the background color of the component when hovered.
  * @prop --calcite-combobox-selected-icon-color: Specifies the color of the selected indicator icon.
  * @prop --calcite-combobox-description-text-color: Specifies the text color of the component's description & short-heading.
- * @prop --calcite-combobox-description-text-color-press: Specifies the text color of the component's description & short-heading  when hovered.
+ * @prop --calcite-combobox-description-text-color-press: Specifies the text color of the component's description & short-heading when hovered.
  * @prop --calcite-combobox-heading-text-color: Specifies the text color of the component heading.
  */
 
@@ -79,7 +79,7 @@ ul:focus {
   padding-inline-end: var(--calcite-combobox-item-spacing-unit-l);
   padding-inline-start: var(--calcite-combobox-item-indent-value);
 
-  color: var(--calcite-combobox-item-text-color, var(--calcite-color-text-3));
+  color: var(--calcite-combobox-text-color, var(--calcite-color-text-3));
   transition-duration: var(--calcite-animation-timing);
 }
 
@@ -93,7 +93,7 @@ ul:focus {
 
 .label:hover {
   background-color: var(--calcite-combobox-item-background-color-hover, var(--calcite-color-foreground-2));
-  color: var(--calcite-combobox-item-text-color-hover, var(--calcite-color-text-1));
+  color: var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1));
 }
 
 .label:active {
@@ -102,7 +102,7 @@ ul:focus {
 
 :host([selected]) .label,
 .label:active {
-  color: var(--calcite-combobox-item-text-color-hover, var(--calcite-color-text-1));
+  color: var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1));
 
   .description,
   .short-text {
@@ -156,7 +156,7 @@ ul:focus {
   }
 }
 
-.heading,
+.title,
 .description,
 .short-text {
   line-height: var(--calcite-font-line-height-relative-snug);
diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss
index 11b9e163641..c2d6d7697e7 100644
--- a/packages/calcite-components/src/components/combobox/combobox.scss
+++ b/packages/calcite-components/src/components/combobox/combobox.scss
@@ -4,10 +4,6 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-combobox-input-height: Specifies the height of the component's input.
- * @prop --calcite-combobox-selected-icon-color: Specifies the color of the `calcite-combobox-item`'s selected indicator icon.
- * @prop --calcite-combobox-description-text-color: Specifies the text color of the `calcite-combobox-item`'s description & short-heading.
- * @prop --calcite-combobox-description-text-color-press: Specifies the text color of the `calcite-combobox-item`'s description & short-heading  when hovered.
- * @prop --calcite-combobox-heading-text-color: Specifies the text color of the `calcite-combobox-item`'s heading.
  */
 
 :host {
diff --git a/packages/calcite-components/src/custom-theme/combobox-item.ts b/packages/calcite-components/src/custom-theme/combobox-item.ts
index 83b230b7e20..4328f6dc6c3 100644
--- a/packages/calcite-components/src/custom-theme/combobox-item.ts
+++ b/packages/calcite-components/src/custom-theme/combobox-item.ts
@@ -1,8 +1,8 @@
 import { html } from "../../support/formatting";
 
 export const comboboxItemTokens = {
-  calciteComboboxItemTextColor: "",
-  calciteComboboxItemTextColorHover: "",
+  calciteComboboxTextColor: "",
+  calciteComboboxTextColorHover: "",
   calciteComboboxItemBackgroundColorActive: "",
   calciteComboboxItemBackgroundColorHover: "",
   calciteComboboxSelectedIconColor: "",

From 223146814ee1497a92c8237eec972a8161f00bff Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Mon, 17 Mar 2025 16:34:34 -0500
Subject: [PATCH 09/11] cleanup

---
 .../src/components/combobox-item/combobox-item.scss             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
index ee219b08bb8..74553ff388e 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.scss
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -156,7 +156,7 @@ ul:focus {
   }
 }
 
-.title,
+.heading,
 .description,
 .short-text {
   line-height: var(--calcite-font-line-height-relative-snug);

From 34d69a638b35a32312b1569a8c34dee7485f6498 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Thu, 20 Mar 2025 11:49:24 -0500
Subject: [PATCH 10/11] editorial changes

---
 .../components/combobox-item/combobox-item.scss  | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
index 74553ff388e..9123f25c3c4 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.scss
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -3,14 +3,14 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-combobox-text-color: Specifies the text color of the component.
- * @prop --calcite-combobox-text-color-hover: Specifies the text color of the component when hovered.
- * @prop --calcite-combobox-item-background-color-active: Specifies the background color of the component when active.
- * @prop --calcite-combobox-item-background-color-hover: Specifies the background color of the component when hovered.
- * @prop --calcite-combobox-selected-icon-color: Specifies the color of the selected indicator icon.
- * @prop --calcite-combobox-description-text-color: Specifies the text color of the component's description & short-heading.
- * @prop --calcite-combobox-description-text-color-press: Specifies the text color of the component's description & short-heading when hovered.
- * @prop --calcite-combobox-heading-text-color: Specifies the text color of the component heading.
+ * @prop --calcite-combobox-text-color: Specifies the component's text color.
+ * @prop --calcite-combobox-text-color-hover: Specifies the component's text color when hovered.
+ * @prop --calcite-combobox-item-background-color-active: Specifies the component's background color when active.
+ * @prop --calcite-combobox-item-background-color-hover: Specifies the component's background color when hovered.
+ * @prop --calcite-combobox-selected-icon-color: Specifies the component's selected indicator icon color.
+ * @prop --calcite-combobox-description-text-color: Specifies the component's `description` and `shortHeading` text color.
+ * @prop --calcite-combobox-description-text-color-press: Specifies the component's `description` and `shortHeading` text color when hovered.
+ * @prop --calcite-combobox-heading-text-color: Specifies the component's `heading` text color.
  */
 
 @include base-component();

From 170b389a1c0fee3bb046e13af05cbf54ce682559 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Thu, 20 Mar 2025 15:36:26 -0500
Subject: [PATCH 11/11] update state tokens tests

---
 .../src/components/combobox-item/combobox-item.e2e.ts  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
index 04d1557739c..739db527b3b 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
@@ -84,7 +84,7 @@ describe("calcite-combobox-item", () => {
             shadowSelector: ` .${CSS.label} `,
             selector: "calcite-combobox-item",
             targetProp: "color",
-            state: { press: { attribute: "class", value: CSS.label } },
+            state: { press: `calcite-combobox-item >>> .${CSS.label} ` },
           },
           {
             shadowSelector: `.${CSS.iconCustom}`,
@@ -96,14 +96,14 @@ describe("calcite-combobox-item", () => {
             shadowSelector: `.${CSS.iconCustom}`,
             selector: "calcite-combobox-item",
             targetProp: "color",
-            state: { press: { attribute: "class", value: CSS.iconCustom } },
+            state: { press: `calcite-combobox-item >>> .${CSS.iconCustom} ` },
           },
         ],
         "--calcite-combobox-item-background-color-active": {
           shadowSelector: ` .${CSS.label} `,
           selector: "calcite-combobox-item",
           targetProp: "backgroundColor",
-          state: { press: { attribute: "class", value: CSS.label } },
+          state: { press: `calcite-combobox-item >>> .${CSS.label} ` },
         },
         "--calcite-combobox-item-background-color-hover": {
           shadowSelector: ` .${CSS.label} `,
@@ -128,13 +128,13 @@ describe("calcite-combobox-item", () => {
             shadowSelector: `.${CSS.description}`,
             selector: "calcite-combobox-item",
             targetProp: "color",
-            state: { press: { attribute: "class", value: CSS.description } },
+            state: { press: `calcite-combobox-item >>> .${CSS.description} ` },
           },
           {
             shadowSelector: `.${CSS.shortText}`,
             selector: "calcite-combobox-item",
             targetProp: "color",
-            state: { press: { attribute: "class", value: CSS.shortText } },
+            state: { press: `calcite-combobox-item >>> .${CSS.shortText} ` },
           },
         ],
         "--calcite-combobox-heading-text-color": {