From 16b347cbcc8f0e559b55bd1c2a3b9321a76622b6 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 13 Nov 2025 15:20:36 +0100
Subject: [PATCH 1/7] feat(ObjectStatus): simplify active state styling in
 lists & tables

---
 .storybook/preview-head.html                  |   8 ++
 .../components/ObjectStatus/ObjectStatus.mdx  | 103 +++++++++++++++++-
 .../ObjectStatus/ObjectStatus.module.css      |  74 +++----------
 .../ObjectStatus/ObjectStatus.stories.tsx     |  76 +++++++++++++
 4 files changed, 199 insertions(+), 62 deletions(-)

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 09b2e63435b..560266ef162 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -181,6 +181,14 @@
     min-height: 20px;
     height: auto;
   }
+
+  .interactive-table-row:active .object-status,
+  .interactive-analytical-table [role='row']:active .object-status,
+  .interactive-li[active] .object-status {
+    --ui5wcr-object-status-icon-color: var(--sapList_Active_TextColor);
+    color: var(--sapList_Active_TextColor);
+    text-shadow: none;
+  }
 </style>
 <script data-ui5-config type="application/json">
   {
diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.mdx b/packages/main/src/components/ObjectStatus/ObjectStatus.mdx
index 458340c7d96..2ff5f810417 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.mdx
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.mdx
@@ -22,22 +22,117 @@ import * as ComponentStories from './ObjectStatus.stories';
 
 <br />
 
-## ObjectStatus with default icons
+## ObjectStatus With Default Icons
 
 <Canvas of={ComponentStories.WithDefaultIcons} />
 
-## ObjectStatus with custom Icon
+## ObjectStatus With Custom Icon
 
 <Canvas of={ComponentStories.WithCustomIcon} />
 
-## ObjectStatus with Icon only
+## ObjectStatus With Icon Only
 
 <Canvas of={ComponentStories.WithIconOnly} />
 
-## All ObjectStatus states
+## All ObjectStatus States
 
 **Note:** Only the `inverted` `ObjectStatus` supports `IndicationColor`s 11-20. For non-inverted `ObjectStatus`, these colors default to the `"None"` `state` color and should **not** be used.
 
 <Canvas of={ComponentStories.InvertedObjectStatus} />
 
+## ObjectStatus in Interactive Lists or Tables
+
+**Applicable since v2.17.0**
+
+When used in interactive lists or tables, you can override the text and icon `color` and `text-shadow` to comply with design specs.
+
+```css
+.object-status {
+  --ui5wcr-object-status-icon-color: var(--sapList_Active_TextColor);
+  color: var(--sapList_Active_TextColor);
+  text-shadow: none;
+}
+```
+
+<Canvas of={ComponentStories.InListOrTable} />
+
+<details>
+
+    <summary>Show Static Code</summary>
+
+    ```css
+    .interactive-table-row:active .object-status,
+    .interactive-analytical-table [role='row']:active .object-status,
+    .interactive-li[active] .object-status {
+      --ui5wcr-object-status-icon-color: var(--sapList_Active_TextColor);
+      color: var(--sapList_Active_TextColor);
+      text-shadow: none;
+    }
+    ```
+
+    ```tsx
+    function ObjectStatusInListOrTable(objectStatusProps: ObjectStatusPropTypes) {
+      const atCols: AnalyticalTableColumnDefinition[] = useMemo(
+        () => [
+          {
+            accessor: 'os1',
+            Header: 'ObjectStatus (controllable)',
+            Cell: () => <ObjectStatus {...objectStatusProps} className={'object-status'} />,
+          },
+          {
+            accessor: 'os2',
+            Header: 'ObjectStatus ("Negative")',
+            Cell: () => <ObjectStatus {...objectStatusProps} className={'object-status'} state={'Negative'} />,
+          },
+        ],
+        [objectStatusProps],
+      );
+      return (
+        <>
+          Table
+          <Table
+            headerRow={
+              <TableHeaderRow>
+                <TableHeaderCell>ObjectStatus (controllable)</TableHeaderCell>
+                <TableHeaderCell>ObjectStatus (&#34;Negative&#34;)</TableHeaderCell>
+              </TableHeaderRow>
+            }
+            features={<TableSelectionSingle behavior={'RowOnly'} />}
+          >
+            <TableRow rowKey={'0'} className={'interactive-table-row'}>
+              <TableCell>
+                <ObjectStatus {...objectStatusProps} className={'object-status'} />
+              </TableCell>
+              <TableCell>
+                <ObjectStatus {...objectStatusProps} className={'object-status'} state={'Negative'} />
+              </TableCell>
+            </TableRow>
+          </Table>
+          <hr />
+          List
+          <List selectionMode="Single">
+            <ListItemCustom className={'interactive-li'}>
+              <ObjectStatus {...objectStatusProps} className={'object-status'} />
+            </ListItemCustom>
+          </List>
+          <hr />
+          AnalyticalTable
+          <AnalyticalTable
+            data={atData}
+            columns={atCols}
+            minRows={1}
+            selectionMode={'Single'}
+            selectionBehavior={'RowOnly'}
+            className="interactive-analytical-table"
+          />
+        </>
+      );
+    }
+    ```
+
+</details>
+
+<br />
+<br />
+
 <Footer />
diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.module.css b/packages/main/src/components/ObjectStatus/ObjectStatus.module.css
index 9623912ea50..291b7f09076 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.module.css
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.module.css
@@ -3,6 +3,7 @@
 }
 
 .objectStatus {
+  --ui5wcr-object-status-icon-color: var(--sapNeutralElementColor);
   --_ui5wcr-ObjectStatus-focs-outline: 0.125rem var(--sapContent_FocusColor);
   --_ui5wcr-ObjectStatus-focs-background: var(--sapContent_FocusColor);
 
@@ -18,7 +19,7 @@
   color: var(--sapNeutralTextColor);
 
   [ui5-icon] {
-    color: var(--sapNeutralElementColor);
+    color: var(--ui5wcr-object-status-icon-color);
   }
 }
 
@@ -38,7 +39,6 @@
   line-height: 1rem;
   vertical-align: top;
   padding-inline-end: 0.25rem;
-  text-shadow: var(--sapContent_TextShadow);
 
   &[data-icon-only='true'] {
     padding-inline-end: 0;
@@ -66,115 +66,73 @@
 }
 
 .positive {
+  --ui5wcr-object-status-icon-color: var(--sapPositiveElementColor);
   color: var(--sapPositiveTextColor);
-
-  [ui5-icon] {
-    color: var(--sapPositiveElementColor);
-  }
 }
 
 .critical {
+  --ui5wcr-object-status-icon-color: var(--sapCriticalElementColor);
   color: var(--sapCriticalTextColor);
-
-  [ui5-icon] {
-    color: var(--sapCriticalElementColor);
-  }
 }
 
 .negative {
+  --ui5wcr-object-status-icon-color: var(--sapNegativeElementColor);
   color: var(--sapNegativeTextColor);
-
-  [ui5-icon] {
-    color: var(--sapNegativeElementColor);
-  }
 }
 
 .information {
+  --ui5wcr-object-status-icon-color: var(--sapInformativeElementColor);
   color: var(--sapInformativeTextColor);
-
-  [ui5-icon] {
-    color: var(--sapInformativeElementColor);
-  }
 }
 
 .indication01 {
+  --ui5wcr-object-status-icon-color: var(--sapIndicationColor_1);
   color: var(--sapIndicationColor_1);
-
-  [ui5-icon] {
-    color: var(--sapIndicationColor_1);
-  }
 }
 
 .indication02 {
+  --ui5wcr-object-status-icon-color: var(--sapIndicationColor_2);
   color: var(--sapIndicationColor_2);
-
-  [ui5-icon] {
-    color: var(--sapIndicationColor_2);
-  }
 }
 
 .indication03 {
+  --ui5wcr-object-status-icon-color: var(--sapIndicationColor_3);
   color: var(--sapIndicationColor_3);
-
-  [ui5-icon] {
-    color: var(--sapIndicationColor_3);
-  }
 }
 
 .indication04 {
+  --ui5wcr-object-status-icon-color: var(--sapIndicationColor_4);
   color: var(--sapIndicationColor_4);
-
-  [ui5-icon] {
-    color: var(--sapIndicationColor_4);
-  }
 }
 
 .indication05 {
+  --ui5wcr-object-status-icon-color: var(--sapIndicationColor_5);
   color: var(--sapIndicationColor_5);
-
-  [ui5-icon] {
-    color: var(--sapIndicationColor_5);
-  }
 }
 
 .indication06 {
+  --ui5wcr-object-status-icon-color: var(--sapIndicationColor_6);
   color: var(--sapIndicationColor_6);
-
-  [ui5-icon] {
-    color: var(--sapIndicationColor_6);
-  }
 }
 
 .indication07 {
+  --ui5wcr-object-status-icon-color: var(--sapIndicationColor_7);
   color: var(--sapIndicationColor_7);
-
-  [ui5-icon] {
-    color: var(--sapIndicationColor_7);
-  }
 }
 
 .indication08 {
+  --ui5wcr-object-status-icon-color: var(--sapIndicationColor_8);
   color: var(--sapIndicationColor_8);
-
-  [ui5-icon] {
-    color: var(--sapIndicationColor_8);
-  }
 }
 
 .indication09 {
+  --ui5wcr-object-status-icon-color: var(--sapIndicationColor_9);
   color: var(--sapIndicationColor_9);
-
-  [ui5-icon] {
-    color: var(--sapIndicationColor_9);
-  }
 }
 
 .indication10 {
+  --ui5wcr-object-status-icon-color: var(--sapIndicationColor_10);
   color: var(--sapIndicationColor_10);
-
-  [ui5-icon] {
-    color: var(--sapIndicationColor_10);
-  }
 }
 
 .active {
diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
index c5c9f7b6b73..74b4ffd3287 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
@@ -3,10 +3,23 @@ import IconMode from '@ui5/webcomponents/dist/types/IconMode.js';
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import cancelIcon from '@ui5/webcomponents-icons/dist/sys-cancel.js';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import { useMemo } from 'react';
 import { IndicationColor } from '../../enums/IndicationColor.js';
 import { Icon } from '../../webComponents/Icon/index.js';
 import { Label } from '../../webComponents/Label/index.js';
+import { List } from '../../webComponents/List/index.js';
+import { ListItemCustom } from '../../webComponents/ListItemCustom/index.js';
+import { Table } from '../../webComponents/Table/index.js';
+import { TableCell } from '../../webComponents/TableCell/index.js';
+import { TableHeaderCell } from '../../webComponents/TableHeaderCell/index.js';
+import { TableHeaderRow } from '../../webComponents/TableHeaderRow/index.js';
+import { TableRow } from '../../webComponents/TableRow/index.js';
+import { TableSelectionSingle } from '../../webComponents/TableSelectionSingle/index.js';
 import { Text } from '../../webComponents/Text/index.js';
+import { Tree } from '../../webComponents/Tree/index.js';
+import { TreeItemCustom } from '../../webComponents/TreeItemCustom/index.js';
+import type { AnalyticalTableColumnDefinition } from '../AnalyticalTable/index.js';
+import { AnalyticalTable } from '../AnalyticalTable/index.js';
 import type { ObjectStatusPropTypes } from './index.js';
 import { ObjectStatus } from './index.js';
 
@@ -135,3 +148,66 @@ export const InvertedObjectStatus: Story = {
     );
   },
 };
+
+const atData = [{ os1: 'ObjectStatus', os2: 'ObjectStatus' }];
+
+export const InListOrTable: Story = {
+  args: { state: 'Positive' },
+  render(args) {
+    const atCols: AnalyticalTableColumnDefinition[] = useMemo(
+      () => [
+        {
+          accessor: 'os1',
+          Header: 'ObjectStatus (controllable)',
+          Cell: () => <ObjectStatus {...args} className={'object-status'} />,
+        },
+        {
+          accessor: 'os2',
+          Header: 'ObjectStatus ("Negative")',
+          Cell: () => <ObjectStatus {...args} className={'object-status'} state={'Negative'} />,
+        },
+      ],
+      [args],
+    );
+    return (
+      <>
+        Table
+        <Table
+          headerRow={
+            <TableHeaderRow>
+              <TableHeaderCell>ObjectStatus (controllable)</TableHeaderCell>
+              <TableHeaderCell>ObjectStatus ("Negative")</TableHeaderCell>
+            </TableHeaderRow>
+          }
+          features={<TableSelectionSingle behavior={'RowOnly'} />}
+        >
+          <TableRow rowKey={'0'} className={'interactive-table-row'}>
+            <TableCell>
+              <ObjectStatus {...args} className={'object-status'} />
+            </TableCell>
+            <TableCell>
+              <ObjectStatus {...args} className={'object-status'} state={'Negative'} />
+            </TableCell>
+          </TableRow>
+        </Table>
+        <hr />
+        List
+        <List selectionMode="Single">
+          <ListItemCustom className={'interactive-li'}>
+            <ObjectStatus {...args} className={'object-status'} />
+          </ListItemCustom>
+        </List>
+        <hr />
+        AnalyticalTable
+        <AnalyticalTable
+          data={atData}
+          columns={atCols}
+          minRows={1}
+          selectionMode={'Single'}
+          selectionBehavior={'RowOnly'}
+          className="interactive-analytical-table"
+        />
+      </>
+    );
+  },
+};

From 31b041b38ee7a6767dd15e90ba7583a9a92ccc21 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 13 Nov 2025 15:28:48 +0100
Subject: [PATCH 2/7] add note about inverted state

---
 packages/main/src/components/ObjectStatus/ObjectStatus.mdx     | 2 +-
 .../main/src/components/ObjectStatus/ObjectStatus.stories.tsx  | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.mdx b/packages/main/src/components/ObjectStatus/ObjectStatus.mdx
index 2ff5f810417..35e05b03144 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.mdx
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.mdx
@@ -44,7 +44,7 @@ import * as ComponentStories from './ObjectStatus.stories';
 
 **Applicable since v2.17.0**
 
-When used in interactive lists or tables, you can override the text and icon `color` and `text-shadow` to comply with design specs.
+When a normal (non-inverted) `ObjectStatus` is used in interactive lists or tables, you can override the text and icon `color` and `text-shadow` to comply with design specs.
 
 ```css
 .object-status {
diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
index 74b4ffd3287..45bc0d3025a 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
@@ -152,7 +152,8 @@ export const InvertedObjectStatus: Story = {
 const atData = [{ os1: 'ObjectStatus', os2: 'ObjectStatus' }];
 
 export const InListOrTable: Story = {
-  args: { state: 'Positive' },
+  args: { state: 'Positive', inverted: false },
+  argTypes: { inverted: { control: false, table: { disable: false } } },
   render(args) {
     const atCols: AnalyticalTableColumnDefinition[] = useMemo(
       () => [

From 63195364b4afd623fa02cead03cdebd71e8b8173 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 13 Nov 2025 15:34:37 +0100
Subject: [PATCH 3/7] AT: adjust icon color as well

---
 .../src/components/AnalyticalTable/AnalyticalTable.module.css    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
index 2e2c3e3717b..fafc57dfbb3 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
@@ -182,6 +182,7 @@
   .tr[data-is-selected],
   .trActive:hover {
     & [data-component-name='ObjectStatus'][data-inverted='false']:not([data-state^='Indication']) {
+      --ui5wcr-object-status-icon-color: var(--sapContent_ContrastTextColor);
       color: var(--sapContent_ContrastTextColor);
     }
   }

From ffb1bcbeb309f3985994ef74aceabadda6582d54 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 13 Nov 2025 15:48:41 +0100
Subject: [PATCH 4/7] Update index.tsx

---
 packages/main/src/components/ObjectStatus/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx
index 2653b2f27ba..4e039b1ce79 100644
--- a/packages/main/src/components/ObjectStatus/index.tsx
+++ b/packages/main/src/components/ObjectStatus/index.tsx
@@ -161,6 +161,8 @@ const getStateSpecifics = (state, showDefaultIcon, userIcon, stateAnnouncementTe
 
 /**
  * Status information that can be either text with a value state, or an icon.
+ *
+ * __Note:__ When used in interactive lists or tables, consider overriding the active state styling. Learn more [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/data-display-objectstatus--docs#objectstatus-in-interactive-lists-or-tables).
  */
 const ObjectStatus = forwardRef<HTMLDivElement | HTMLButtonElement, ObjectStatusPropTypes>((props, ref) => {
   const {

From f037bacff9aeade71fe609c592601c5f143f0bbf Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 13 Nov 2025 17:01:05 +0100
Subject: [PATCH 5/7] style OS in AT

---
 .storybook/preview-head.html                       | 14 +++++++-------
 .../AnalyticalTable/AnalyticalTable.module.css     |  6 ++++++
 .../src/components/ObjectStatus/ObjectStatus.mdx   |  9 ++++-----
 .../ObjectStatus/ObjectStatus.stories.tsx          |  5 ++---
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 560266ef162..56dd2cec306 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -176,19 +176,19 @@
     padding-block: 0;
   }
 
-  /* TODO remove this workaround as soon as https://github.com/storybookjs/storybook/issues/20497 is fixed */
-  .docs-story > div > div[scale] {
-    min-height: 20px;
-    height: auto;
-  }
-
+  /*ObjectStatus "InListOrTable" story */
   .interactive-table-row:active .object-status,
-  .interactive-analytical-table [role='row']:active .object-status,
   .interactive-li[active] .object-status {
     --ui5wcr-object-status-icon-color: var(--sapList_Active_TextColor);
     color: var(--sapList_Active_TextColor);
     text-shadow: none;
   }
+
+  /* TODO remove this workaround as soon as https://github.com/storybookjs/storybook/issues/20497 is fixed */
+  .docs-story > div > div[scale] {
+    min-height: 20px;
+    height: auto;
+  }
 </style>
 <script data-ui5-config type="application/json">
   {
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
index fafc57dfbb3..ff57acc5790 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
@@ -184,9 +184,15 @@
     & [data-component-name='ObjectStatus'][data-inverted='false']:not([data-state^='Indication']) {
       --ui5wcr-object-status-icon-color: var(--sapContent_ContrastTextColor);
       color: var(--sapContent_ContrastTextColor);
+      text-shadow: none;
     }
   }
 }
+.trActive:active [data-component-name='ObjectStatus'][data-inverted='false'] {
+  --ui5wcr-object-status-icon-color: var(--sapList_Active_TextColor);
+  color: var(--sapList_Active_TextColor);
+  text-shadow: none;
+}
 
 .trActive {
   cursor: pointer;
diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.mdx b/packages/main/src/components/ObjectStatus/ObjectStatus.mdx
index 35e05b03144..340ba5ce01f 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.mdx
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.mdx
@@ -44,7 +44,8 @@ import * as ComponentStories from './ObjectStatus.stories';
 
 **Applicable since v2.17.0**
 
-When a normal (non-inverted) `ObjectStatus` is used in interactive lists or tables, you can override the text and icon `color` and `text-shadow` to comply with design specs.
+The `AnalyticalTable` component includes active state styling for `ObjectStatus` out of the box, as it is developed within project and can be styled accordingly.
+For lists or tables from `@ui5/webcomponents(-fiori/-ai/-compat)` (e.g., `List`, `Table`), custom CSS is required to override the text and icon `color` and `text-shadow` to ensure proper styling when rows are in active state:
 
 ```css
 .object-status {
@@ -62,7 +63,6 @@ When a normal (non-inverted) `ObjectStatus` is used in interactive lists or tabl
 
     ```css
     .interactive-table-row:active .object-status,
-    .interactive-analytical-table [role='row']:active .object-status,
     .interactive-li[active] .object-status {
       --ui5wcr-object-status-icon-color: var(--sapList_Active_TextColor);
       color: var(--sapList_Active_TextColor);
@@ -77,12 +77,12 @@ When a normal (non-inverted) `ObjectStatus` is used in interactive lists or tabl
           {
             accessor: 'os1',
             Header: 'ObjectStatus (controllable)',
-            Cell: () => <ObjectStatus {...objectStatusProps} className={'object-status'} />,
+            Cell: () => <ObjectStatus {...objectStatusProps} />,
           },
           {
             accessor: 'os2',
             Header: 'ObjectStatus ("Negative")',
-            Cell: () => <ObjectStatus {...objectStatusProps} className={'object-status'} state={'Negative'} />,
+            Cell: () => <ObjectStatus {...objectStatusProps} state={'Negative'} />,
           },
         ],
         [objectStatusProps],
@@ -123,7 +123,6 @@ When a normal (non-inverted) `ObjectStatus` is used in interactive lists or tabl
             minRows={1}
             selectionMode={'Single'}
             selectionBehavior={'RowOnly'}
-            className="interactive-analytical-table"
           />
         </>
       );
diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
index 45bc0d3025a..94d5cd2b6a7 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
@@ -160,12 +160,12 @@ export const InListOrTable: Story = {
         {
           accessor: 'os1',
           Header: 'ObjectStatus (controllable)',
-          Cell: () => <ObjectStatus {...args} className={'object-status'} />,
+          Cell: () => <ObjectStatus {...args} />,
         },
         {
           accessor: 'os2',
           Header: 'ObjectStatus ("Negative")',
-          Cell: () => <ObjectStatus {...args} className={'object-status'} state={'Negative'} />,
+          Cell: () => <ObjectStatus {...args} state={'Negative'} />,
         },
       ],
       [args],
@@ -206,7 +206,6 @@ export const InListOrTable: Story = {
           minRows={1}
           selectionMode={'Single'}
           selectionBehavior={'RowOnly'}
-          className="interactive-analytical-table"
         />
       </>
     );

From e1154916f4f8d06594ec4383e654b038c6b0a0d2 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 13 Nov 2025 17:04:35 +0100
Subject: [PATCH 6/7] Update ObjectStatus.mdx

---
 packages/main/src/components/ObjectStatus/ObjectStatus.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.mdx b/packages/main/src/components/ObjectStatus/ObjectStatus.mdx
index 340ba5ce01f..e6af34ba77e 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.mdx
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.mdx
@@ -71,7 +71,7 @@ For lists or tables from `@ui5/webcomponents(-fiori/-ai/-compat)` (e.g., `List`,
     ```
 
     ```tsx
-    function ObjectStatusInListOrTable(objectStatusProps: ObjectStatusPropTypes) {
+    function ObjectStatusInListOrTable(objectStatusProps: Omit<ObjectStatusPropTypes, 'inverted'>) {
       const atCols: AnalyticalTableColumnDefinition[] = useMemo(
         () => [
           {

From ca832e85b1468deaf6a17a5ad5a799cfc6d1fbb5 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 13 Nov 2025 17:41:32 +0100
Subject: [PATCH 7/7] add test

---
 .../ObjectStatus/ObjectStatus.cy.tsx          | 103 +++++++++++++++++-
 .../ObjectStatus/ObjectStatus.stories.tsx     |   2 -
 2 files changed, 102 insertions(+), 3 deletions(-)

diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx
index b2ea5209f82..1958375e24e 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx
@@ -8,7 +8,16 @@ import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import type { IndicationColor } from '../../enums/index.js';
 import { INDICATION_COLOR } from '../../i18n/i18n-defaults.js';
-import { Icon } from '../../webComponents/index.js';
+import { Icon } from '../../webComponents/Icon/index.js';
+import { List } from '../../webComponents/List/index.js';
+import { ListItemCustom } from '../../webComponents/ListItemCustom/index.js';
+import { Table } from '../../webComponents/Table/index.js';
+import { TableCell } from '../../webComponents/TableCell/index.js';
+import { TableHeaderCell } from '../../webComponents/TableHeaderCell/index.js';
+import { TableHeaderRow } from '../../webComponents/TableHeaderRow/index.js';
+import { TableRow } from '../../webComponents/TableRow/index.js';
+import { TableSelectionSingle } from '../../webComponents/TableSelectionSingle/index.js';
+import { AnalyticalTable } from '../AnalyticalTable/index.js';
 import { ObjectStatus } from './index.js';
 import { cssVarToRgb, cypressPassThroughTestsFactory } from '@/cypress/support/utils';
 
@@ -324,5 +333,97 @@ describe('ObjectStatus', () => {
     cy.get('[ui5-icon]').should('have.css', 'height', '24px');
   });
 
+  it('active state in interactive lists and tables', () => {
+    cy.document().then((doc) => {
+      const style = doc.createElement('style');
+      style.textContent = `
+      .interactive-table-row:active .object-status,
+      .interactive-li[active] .object-status {
+        --ui5wcr-object-status-icon-color: var(--sapList_Active_TextColor);
+        color: var(--sapList_Active_TextColor);
+        text-shadow: none;
+      }
+    `;
+      doc.head.appendChild(style);
+    });
+
+    const activeTextColor = cssVarToRgb(ThemingParameters.sapList_Active_TextColor);
+    const atData = [{ os1: 'ObjectStatus', os2: 'ObjectStatus' }];
+    const args = { state: ValueState.Positive, inverted: false, showDefaultIcon: true, children: 'ObjectStatus' };
+    const atCols = [
+      {
+        accessor: 'os1',
+        Header: 'ObjectStatus (controllable)',
+        Cell: () => <ObjectStatus {...args} data-testid="os-at" />,
+      },
+      {
+        accessor: 'os2',
+        Header: 'ObjectStatus ("Negative")',
+        Cell: () => <ObjectStatus {...args} state={'Negative'} data-testid="os-at-negative" />,
+      },
+    ];
+
+    cy.mount(
+      <>
+        <Table
+          headerRow={
+            <TableHeaderRow>
+              <TableHeaderCell>ObjectStatus (controllable)</TableHeaderCell>
+              <TableHeaderCell>ObjectStatus ("Negative")</TableHeaderCell>
+            </TableHeaderRow>
+          }
+          features={<TableSelectionSingle behavior={'RowOnly'} />}
+        >
+          <TableRow rowKey={'0'} className={'interactive-table-row'}>
+            <TableCell>
+              <ObjectStatus {...args} className={'object-status'} data-testid="os-table" />
+            </TableCell>
+            <TableCell>
+              <ObjectStatus {...args} className={'object-status'} state={'Negative'} data-testid="os-table-negative" />
+            </TableCell>
+          </TableRow>
+        </Table>
+        <List selectionMode="Single">
+          <ListItemCustom className={'interactive-li'}>
+            <ObjectStatus {...args} className={'object-status'} data-testid="os-list" />
+          </ListItemCustom>
+        </List>
+        <AnalyticalTable
+          data={atData}
+          columns={atCols}
+          minRows={1}
+          selectionMode={'Single'}
+          selectionBehavior={'RowOnly'}
+          data-testid="at"
+        />
+      </>,
+    );
+
+    cy.get('.interactive-table-row').realMouseDown();
+    cy.findByTestId('os-table').should('have.css', 'color', activeTextColor);
+    cy.findByTestId('os-table')
+      .find('[data-component-name="ObjectStatusDefaultIcon"]')
+      .should('have.css', 'color', activeTextColor);
+    cy.get('.interactive-table-row').realMouseUp();
+
+    cy.get('.interactive-li').realMouseDown();
+    cy.findByTestId('os-list').should('have.css', 'color', activeTextColor);
+    cy.findByTestId('os-list')
+      .find('[data-component-name="ObjectStatusDefaultIcon"]')
+      .should('have.css', 'color', activeTextColor);
+    cy.get('.interactive-li').realMouseUp();
+
+    cy.get('[data-testid="at"] [role="row"]')
+      .eq(1)
+      .realMouseDown({ position: { x: 100, y: 10 } }); // don't click in the middle as there's the resizer
+    cy.findByTestId('os-at').should('have.css', 'color', activeTextColor);
+    cy.findByTestId('os-at')
+      .find('[data-component-name="ObjectStatusDefaultIcon"]')
+      .should('have.css', 'color', activeTextColor);
+    cy.get('[data-testid="at"] [role="row"]')
+      .eq(1)
+      .realMouseUp({ position: { x: 100, y: 10 } });
+  });
+
   cypressPassThroughTestsFactory(ObjectStatus);
 });
diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
index 94d5cd2b6a7..52f0392ab3d 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
@@ -16,8 +16,6 @@ import { TableHeaderRow } from '../../webComponents/TableHeaderRow/index.js';
 import { TableRow } from '../../webComponents/TableRow/index.js';
 import { TableSelectionSingle } from '../../webComponents/TableSelectionSingle/index.js';
 import { Text } from '../../webComponents/Text/index.js';
-import { Tree } from '../../webComponents/Tree/index.js';
-import { TreeItemCustom } from '../../webComponents/TreeItemCustom/index.js';
 import type { AnalyticalTableColumnDefinition } from '../AnalyticalTable/index.js';
 import { AnalyticalTable } from '../AnalyticalTable/index.js';
 import type { ObjectStatusPropTypes } from './index.js';