feat(list-item): add selected property (#1590)

Closes #968

Author: simeonoff

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Added
+- #### List
+  - The `igc-list-item` component exposes a new `selected` property. When set on a list item, the item will become visually highlighted.
+
 ## [5.2.4] - 2025-02-24
 ### Changed
 - #### Carousel - **Potential visual breaking change.**

src/components/list/list-item.ts

@@ -1,5 +1,6 @@
 import { LitElement, html } from 'lit';
 
+import { property } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { styles } from './themes/item.base.css.js';
@@ -35,6 +36,13 @@ export default class IgcListItemComponent extends LitElement {
     registerComponent(IgcListItemComponent);
   }
 
+  /**
+   * Defines if the list item is selected or not.
+   * @attr
+   */
+  @property({ type: Boolean, reflect: true })
+  public selected = false;
+
   private _internals: ElementInternals;
 
   constructor() {

src/components/list/themes/shared/item/list-item.common.scss

@@ -7,7 +7,8 @@ $theme: $material;
     border-radius: var-get($theme, 'item-border-radius');
     color: var-get($theme, 'item-text-color');
     background: var-get($theme, 'item-background');
-    border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
+    border-bottom: var-get($theme, 'border-width') solid
+        var-get($theme, 'border-color');
 }
 
 :host(:last-of-type) {
@@ -30,6 +31,27 @@ $theme: $material;
     color: var-get($theme, 'item-action-color');
 }
 
+:host([selected]) {
+    color: var-get($theme, 'item-text-color-selected');
+    background: var-get($theme, 'item-background-selected');
+
+    [part='title'] {
+        color: var-get($theme, 'item-title-color-selected');
+    }
+
+    [part='subtitle'] {
+        color: var-get($theme, 'item-subtitle-color-selected');
+    }
+
+    [part='start'] {
+        color: var-get($theme, 'item-thumbnail-color-selected');
+    }
+
+    [part='end'] {
+        color: var-get($theme, 'item-action-color-selected');
+    }
+}
+
 :host(:hover),
 :host(:focus-within) {
     background: var-get($theme, 'item-background-hover');

stories/avatar.stories.ts

@@ -4,7 +4,6 @@ import {
   IgcAvatarComponent,
   IgcIconComponent,
   defineComponents,
-  registerIcon,
 } from 'igniteui-webcomponents';
 import { html } from 'lit';
 
@@ -63,11 +62,6 @@ interface IgcAvatarArgs {
 }
 type Story = StoryObj<IgcAvatarArgs>;
 
-registerIcon(
-  'home',
-  'https://unpkg.com/[email protected]/action/svg/production/ic_home_24px.svg'
-);
-
 // endregion
 
 export const Image: Story = {