feat(list-item): add iconStart, iconEnd and iconFlipRtl props (#11004)

**Related Issue:**
[#9175](#9175)

## Summary

- Add `iconStart`, `iconEnd` and `iconFlipRtl` props.
- Update default icon color to `--calcite-color-text-3`.
- Update icon color to `--calcite-color-text-1` when item is selected.
- Update `list.html` and `list.stories.ts` to use `icon-start` and
`icon-end`.

packages/calcite-components/src/components/list-item/list-item.e2e.ts

@@ -61,6 +61,18 @@ describe("calcite-list-item", () => {
         propertyName: "displayMode",
         defaultValue: "flat",
       },
+      {
+        propertyName: "iconStart",
+        defaultValue: undefined,
+      },
+      {
+        propertyName: "iconEnd",
+        defaultValue: undefined,
+      },
+      {
+        propertyName: "iconFlipRtl",
+        defaultValue: undefined,
+      },
     ]);
   });
 
@@ -430,6 +442,29 @@ describe("calcite-list-item", () => {
     expect(openButton).toBe(null);
   });
 
+  it("renders with iconStart", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-list-item interaction-mode="interactive" icon-start="banana"></calcite-list-item>`);
+
+    const icon = await page.find(`calcite-list-item >>> .${CSS.icon}`);
+    expect(icon).not.toBe(null);
+  });
+
+  it("renders with iconEnd", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-list-item interaction-mode="interactive" icon-end="banana"></calcite-list-item>`);
+
+    const icon = await page.find(`calcite-list-item >>> .${CSS.icon}`);
+    expect(icon).not.toBe(null);
+  });
+
+  it("renders without iconStart or iconEnd", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-list-item interaction-mode="interactive"></calcite-list-item>`);
+    const icon = await page.find(`calcite-list-item >>> .${CSS.icon}`);
+    expect(icon).toBe(null);
+  });
+
   describe("themed", () => {
     describe(`selection-appearance="icon"`, () => {
       themed(
@@ -442,6 +477,8 @@ describe("calcite-list-item", () => {
           bordered
           selection-mode="single"
           selection-appearance="icon"
+          icon-start="banana"
+          icon-end="banana"
         ></calcite-list-item>`,
         {
           "--calcite-list-background-color": {
@@ -492,6 +529,8 @@ describe("calcite-list-item", () => {
           bordered
           selection-mode="single"
           selection-appearance="border"
+          icon-start="banana"
+          icon-end="banana"
         ></calcite-list-item>`,
         {
           "--calcite-list-selection-border-color": {

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

@@ -142,6 +142,11 @@
   color: var(--calcite-list-description-text-color, var(--calcite-color-text-3));
 }
 
+.icon {
+  align-self: center;
+  color: var(--calcite-list-icon-color, var(--calcite-color-text-3));
+}
+
 :host([scale="s"]) {
   .actions-start {
     padding-inline-end: var(--calcite-spacing-sm);
@@ -305,8 +310,14 @@
   @apply word-break font-sans font-normal;
 }
 
-:host([selected]) .label {
-  @apply font-medium;
+:host([selected]) {
+  .label {
+    @apply font-medium;
+  }
+
+  .icon {
+    color: var(--calcite-list-icon-color, var(--calcite-color-text-1));
+  }
 }
 
 :host([selected]) .description {

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

@@ -7,14 +7,15 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import { SelectionMode, InteractionMode, Scale } from "../interfaces";
+import { SelectionMode, InteractionMode, Scale, FlipContext } from "../interfaces";
 import { SelectionAppearance } from "../list/resources";
 import {
   componentFocusable,
   LoadableComponent,
   setComponentLoaded,
   setUpLoadableComponent,
 } from "../../utils/loadable";
+import { IconNameOrString } from "../icon/interfaces";
 import { SortableComponentItem } from "../../utils/sortableComponent";
 import { MoveTo } from "../sort-handle/interfaces";
 import { useT9n } from "../../controllers/useT9n";
@@ -228,6 +229,15 @@ export class ListItem
   /** The component's value. */
   @property() value: any;
 
+  /** Specifies an icon to display at the start of the component. */
+  @property({ reflect: true }) iconStart: IconNameOrString;
+
+  /** Specifies an icon to display at the end of the component. */
+  @property({ reflect: true }) iconEnd: IconNameOrString;
+
+  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
+  @property({ reflect: true }) iconFlipRtl: FlipContext;
+
   // #endregion
 
   // #region Public Methods
@@ -863,6 +873,34 @@ export class ListItem
     );
   }
 
+  private renderIconStart(): JsxNode {
+    const { iconStart, iconFlipRtl, scale } = this;
+
+    return iconStart ? (
+      <calcite-icon
+        class={CSS.icon}
+        flipRtl={iconFlipRtl === "both" || iconFlipRtl === "start"}
+        icon={iconStart}
+        key="icon-start"
+        scale={getIconScale(scale)}
+      />
+    ) : null;
+  }
+
+  private renderIconEnd(): JsxNode {
+    const { iconEnd, iconFlipRtl, scale } = this;
+
+    return iconEnd ? (
+      <calcite-icon
+        class={CSS.icon}
+        flipRtl={iconFlipRtl === "both" || iconFlipRtl === "end"}
+        icon={iconEnd}
+        key="icon-end"
+        scale={getIconScale(scale)}
+      />
+    ) : null;
+  }
+
   private renderContentEnd(): JsxNode {
     const { hasContentEnd } = this;
     return (
@@ -919,7 +957,9 @@ export class ListItem
     const content = [
       this.renderContentStart(),
       this.renderCustomContent(),
+      this.renderIconStart(),
       this.renderContentProperties(),
+      this.renderIconEnd(),
       this.renderContentEnd(),
     ];
 

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

@@ -30,6 +30,7 @@ export const CSS = {
   openContainer: "open-container",
   dragContainer: "drag-container",
   close: "close",
+  icon: "icon",
 };
 
 export const SLOTS = {