feat(list-item): introduce new styles

docs/components/index.md

@@ -76,6 +76,7 @@ documentation.
 - [Launchpad](layout-navigation/launchpad.md)
 - [Line Chart](charts/line-chart.md)
 - [List Group](lists-tables-trees/list-group.md)
+- [List Item](lists-tables-trees/list-item.md)
 
 ## M
 

docs/components/lists-tables-trees/list-item.md

@@ -0,0 +1,21 @@
+# List item
+
+## Usage ---
+
+## Code ---
+
+### Example
+
+<si-docs-component example="list-item/list-item" height="400"></si-docs-component>
+
+### Action list items
+
+If the entire item is clickable, use the `.list-item-action` helper class to apply hover styling.
+
+<si-docs-component example="list-item/list-item-action" height="400"></si-docs-component>
+
+### Unread state
+
+Use the `.unread` class on `.list-item-title` to indicate unread items with a bold title and a dot indicator.
+
+<si-docs-component example="list-item/list-item-unread" height="400"></si-docs-component>

docs/components/status-notifications/notification-item.md

@@ -1,5 +1,9 @@
 # Notification item
 
+!!! warning "Deprecated"
+
+    This component is deprecated. Use the [list item](../lists-tables-trees/list-item.md) component instead.
+
 ## Usage ---
 
 Notifications keep users updated on changes, prompt timely responses to important updates, and guide them through interactions.

mkdocs.yml

@@ -121,6 +121,7 @@ nav:
       - Wizard:                           'components/layout-navigation/wizard.md'
     - Lists, Tables & Trees:
       - List Group:                       'components/lists-tables-trees/list-group.md'
+      - List Item:                        'components/lists-tables-trees/list-item.md'
       - Table & Datatable:
           - Overview:                     'components/lists-tables-trees/overview.md'
           - HTML Table:                   'components/lists-tables-trees/HTML-table.md'

playwright/e2e/element-examples/static.spec.ts

@@ -24,6 +24,9 @@ test('input-fields/multi-line', ({ si }) => si.static());
 test('input-fields/single-line', ({ si }) => si.static());
 test('links/links', ({ si }) => si.static());
 test('list-group/list-group', ({ si }) => si.static());
+test('list-item/list-item', ({ si }) => si.static());
+test('list-item/list-item-action', ({ si }) => si.static());
+test('list-item/list-item-unread', ({ si }) => si.static());
 test('shapes/shapes', ({ si }) => si.static());
 test('si-about/si-about-api', ({ si }) => si.static());
 test('si-about/si-about-text-api', ({ si }) => si.static());

playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-action.yaml

@@ -0,0 +1,11 @@
+- paragraph: Edited 2 hours ago
+- heading "Project Alpha" [level=5]
+- paragraph: Automation config for assembly line 3
+- paragraph: Edited 3 days ago
+- heading "Project Beta" [level=5]
+- paragraph: Drive parameter tuning for conveyor motors
+- text: 3 contributors
+- paragraph: Edited last week
+- heading "Project Gamma" [level=5]
+- paragraph: Safety interlock logic for press station
+- text: Workspace B Private Review pending

playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-unread.yaml

@@ -0,0 +1,19 @@
+- list:
+  - listitem:
+    - paragraph: /Today at \d+:\d+/
+    - heading "Conveyor belt inspection completed" [level=5]
+    - paragraph: /Routine inspection of conveyor belt CB-\d+ finished without issues\. All parameters within tolerance\./
+  - listitem:
+    - paragraph: /Today at \d+:\d+/
+    - heading "Sensor calibration report available" [level=5]
+    - paragraph: Calibration of temperature sensors on production line 2 has been completed and documented.
+    - text: Production line 2
+    - link "View report":
+      - /url: "#"
+  - listitem:
+    - paragraph: /Yesterday at \d+:\d+/
+    - heading "Motor drive fault detected" [level=5]
+    - paragraph: /Drive unit DU-\d+ on packaging station reported overcurrent fault\. Manual reset required\./
+- text: Interactive Demo Controls
+- checkbox "Unread (indicator and emphasis)" [checked]
+- text: Unread (indicator and emphasis)

playwright/snapshots/static.spec.ts-snapshots/list-item--list-item.yaml

@@ -0,0 +1,29 @@
+- list:
+  - listitem:
+    - paragraph: /Today at \d+:\d+/
+    - heading "Conveyor belt inspection completed" [level=5]
+    - paragraph: /Routine inspection of conveyor belt CB-\d+ finished without issues\. All parameters within tolerance\./
+  - listitem:
+    - paragraph: /Today at \d+:\d+/
+    - heading "Sensor calibration report available" [level=5]
+    - paragraph: Calibration of temperature sensors on production line 2 has been completed and documented.
+    - text: Production line 2
+    - link "View report":
+      - /url: "#"
+  - listitem:
+    - paragraph: /Today at \d+:\d+/
+    - heading "Firmware update pending approval" [level=5]
+    - button "Options"
+    - paragraph: /SIMATIC S7-\d+ firmware v3\.1\.2 is ready for deployment\. Review and approve to proceed with installation\./
+    - group "Approval actions":
+      - button "Approve"
+      - button "Archive"
+      - button "Delete"
+  - listitem:
+    - paragraph: /Yesterday at \d+:\d+/
+    - heading "Motor drive fault detected" [level=5]
+    - button "Options"
+    - paragraph: /Drive unit DU-\d+ on packaging station reported overcurrent fault\. Manual reset required\./
+    - text: Fault log Critical
+    - button "Accept"
+    - button "Deny"

projects/element-theme/src/styles/components/_list-item.scss

@@ -0,0 +1,118 @@
+@use '../variables';
+@use '../variables/typography';
+
+@use 'sass:map';
+
+ul:has(.list-item),
+ol:has(.list-item) {
+  margin: 0;
+  padding: 0;
+}
+
+.list-item {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  padding-block: map.get(variables.$spacers, 4);
+  padding-inline: map.get(variables.$spacers, 6);
+
+  @include typography.si-font(
+    typography.$si-font-size-body,
+    typography.$si-line-height-body,
+    typography.$si-font-weight-body
+  );
+
+  > * {
+    grid-column: 1 / -1;
+  }
+
+  .list-item-timestamp {
+    color: variables.$element-text-secondary;
+    margin-block-end: 0;
+  }
+
+  .list-item-title {
+    grid-column: 1;
+    padding-block: map.get(variables.$spacers, 4);
+    margin-block-end: 0;
+
+    @include typography.si-font(
+      typography.$si-font-size-h5,
+      typography.$si-line-height-h5,
+      typography.$si-font-weight-h5
+    );
+
+    &.unread {
+      position: relative;
+
+      @include typography.si-font(
+        typography.$si-font-size-h5-bold,
+        typography.$si-line-height-h5-bold,
+        typography.$si-font-weight-h5-bold
+      );
+
+      &::before {
+        content: '';
+        position: absolute;
+        block-size: map.get(variables.$spacers, 3);
+        inline-size: map.get(variables.$spacers, 3);
+        border-radius: 50%;
+        background-color: variables.$element-ui-1;
+        inset-inline-start: calc(
+          -1 * (map.get(variables.$spacers, 2) + map.get(variables.$spacers, 3))
+        );
+        inset-block-start: 50%;
+        translate: 0 -50%;
+      }
+    }
+  }
+
+  .list-item-primary-action {
+    grid-column: 2;
+    align-self: center;
+  }
+
+  .list-item-description {
+    margin-block-end: map.get(variables.$spacers, 4);
+  }
+
+  .list-item-metadata {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: variables.$element-text-secondary;
+    margin-block-end: map.get(variables.$spacers, 4);
+
+    a:not(:hover) {
+      color: variables.$element-text-secondary;
+    }
+
+    .badge {
+      margin-inline: 0;
+    }
+
+    .list-item-metadata-divider {
+      inline-size: 0.125rem;
+      block-size: 0.125rem;
+      border-radius: 50%;
+      background-color: variables.$element-text-secondary;
+      margin-inline: map.get(variables.$spacers, 2);
+    }
+  }
+
+  .list-item-quick-actions {
+    display: flex;
+    gap: map.get(variables.$spacers, 4);
+  }
+
+  &.list-item-action {
+    cursor: pointer;
+
+    &:hover {
+      background-color: variables.$element-base-1-hover;
+    }
+
+    &:active {
+      background-color: variables.$element-base-1-selected;
+    }
+  }
+}

projects/element-theme/src/theme.scss

@@ -17,6 +17,7 @@ $_themes: () !default;
 @use 'styles/components/icons';
 @use 'styles/components/layout';
 @use 'styles/components/links';
+@use 'styles/components/list-item';
 @use 'styles/components/pills';
 @use 'styles/components/scrollbar';
 @use 'styles/components/skeleton';

src/app/examples/list-item/list-item-action.html

@@ -0,0 +1,33 @@
+<div class="list-group">
+  <div class="list-item list-item-action" (click)="logEvent('Open project Alpha')">
+    <p class="list-item-timestamp">Edited 2 hours ago</p>
+    <h5 class="list-item-title">Project Alpha</h5>
+    <p class="list-item-description">Automation config for assembly line 3</p>
+  </div>
+  <div class="list-item list-item-action" (click)="logEvent('Open project Beta')">
+    <p class="list-item-timestamp">Edited 3 days ago</p>
+    <h5 class="list-item-title">Project Beta</h5>
+    <p class="list-item-description">Drive parameter tuning for conveyor motors</p>
+    <div class="list-item-metadata">
+      <div class="d-inline-flex align-items-center gap-1">
+        <si-icon class="icon-sm" [icon]="icons.elementUser" />
+        <span>3 contributors</span>
+      </div>
+    </div>
+  </div>
+  <div class="list-item list-item-action" (click)="logEvent('Open project Gamma')">
+    <p class="list-item-timestamp">Edited last week</p>
+    <h5 class="list-item-title">Project Gamma</h5>
+    <p class="list-item-description">Safety interlock logic for press station</p>
+    <div class="list-item-metadata">
+      <span>Workspace B</span>
+      <div class="list-item-metadata-divider"></div>
+      <div class="d-inline-flex align-items-center gap-1">
+        <si-icon class="icon-sm" [icon]="icons.elementLock" />
+        <span>Private</span>
+      </div>
+      <div class="list-item-metadata-divider"></div>
+      <span class="badge bg-warning">Review pending</span>
+    </div>
+  </div>
+</div>

src/app/examples/list-item/list-item-action.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { elementUser, elementLock } from '@siemens/element-icons';
+import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
+import { LOG_EVENT } from '@siemens/live-preview';
+
+@Component({
+  selector: 'app-sample',
+  imports: [SiIconComponent],
+  templateUrl: './list-item-action.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'p-4' }
+})
+export class SampleComponent {
+  logEvent = inject(LOG_EVENT);
+
+  icons = addIcons({ elementUser, elementLock });
+}

src/app/examples/list-item/list-item-unread.html

@@ -0,0 +1,40 @@
+<ul>
+  <li class="list-item">
+    <p class="list-item-timestamp">Today at 14:20</p>
+    <h5 class="list-item-title" [class.unread]="unread">Conveyor belt inspection completed</h5>
+    <p class="list-item-description"
+      >Routine inspection of conveyor belt CB-04 finished without issues. All parameters within
+      tolerance.</p
+    >
+  </li>
+
+  <li class="list-item">
+    <p class="list-item-timestamp">Today at 11:45</p>
+    <h5 class="list-item-title" [class.unread]="unread">Sensor calibration report available</h5>
+    <p class="list-item-description"
+      >Calibration of temperature sensors on production line 2 has been completed and documented.</p
+    >
+    <div class="list-item-metadata">
+      <span>Production line 2</span>
+      <div class="list-item-metadata-divider"></div>
+      <a href="#">View report</a>
+    </div>
+  </li>
+
+  <li class="list-item">
+    <p class="list-item-timestamp">Yesterday at 16:05</p>
+    <h5 class="list-item-title" [class.unread]="unread">Motor drive fault detected</h5>
+    <p class="list-item-description"
+      >Drive unit DU-07 on packaging station reported overcurrent fault. Manual reset required.</p
+    >
+  </li>
+</ul>
+
+<div class="card mt-6 mx-4 e2e-ignore">
+  <div class="card-header">Interactive Demo Controls</div>
+  <div class="card-body">
+    <si-form-item class="col" label="Unread (indicator and emphasis)">
+      <input type="checkbox" class="form-check-input" [(ngModel)]="unread" />
+    </si-form-item>
+  </div>
+</div>

src/app/examples/list-item/list-item-unread.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { SiFormItemComponent } from '@siemens/element-ng/form';
+
+@Component({
+  selector: 'app-sample',
+  imports: [FormsModule, SiFormItemComponent],
+  templateUrl: './list-item-unread.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SampleComponent {
+  unread = true;
+}