From 50441ef477dea588b4b41398fa341f40a35917f2 Mon Sep 17 00:00:00 2001
From: Maximilian Koeller <maximilian.koeller@siemens.com>
Date: Wed, 6 May 2026 16:17:11 +0200
Subject: [PATCH] refactor(select): use pill for overflow item

The overflow item is a pill, just with `padding-block: 0`.
---
 .../select/select-input/si-select-input.component.html     | 2 +-
 .../select/select-input/si-select-input.component.scss     | 7 -------
 projects/element-ng/select/testing/si-select.harness.ts    | 2 +-
 3 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/projects/element-ng/select/select-input/si-select-input.component.html b/projects/element-ng/select/select-input/si-select-input.component.html
index 663528a870..9e85eea47f 100644
--- a/projects/element-ng/select/select-input/si-select-input.component.html
+++ b/projects/element-ng/select/select-input/si-select-input.component.html
@@ -20,7 +20,7 @@
   }
   @if (selectionStrategy.allowMultiple) {
     <div #overflowItem="siAutoCollapsableListOverflowItem" siAutoCollapsableListOverflowItem>
-      <div class="overflow-item"> {{ overflowItem.hiddenItemCount }}+</div>
+      <div class="pill py-0 ms-2"> {{ overflowItem.hiddenItemCount }}+</div>
     </div>
   }
 </div>
diff --git a/projects/element-ng/select/select-input/si-select-input.component.scss b/projects/element-ng/select/select-input/si-select-input.component.scss
index 02c7db809b..73ffea1c53 100644
--- a/projects/element-ng/select/select-input/si-select-input.component.scss
+++ b/projects/element-ng/select/select-input/si-select-input.component.scss
@@ -39,10 +39,3 @@
 si-select-option + si-select-option::before {
   content: ',\00a0 ';
 }
-
-.overflow-item {
-  border-radius: all-variables.$element-radius-3;
-  background: all-variables.$element-base-0;
-  margin-inline-start: map.get(all-variables.$spacers, 2);
-  padding-inline: map.get(all-variables.$spacers, 4);
-}
diff --git a/projects/element-ng/select/testing/si-select.harness.ts b/projects/element-ng/select/testing/si-select.harness.ts
index 56cdc417d9..88a77dcf9e 100644
--- a/projects/element-ng/select/testing/si-select.harness.ts
+++ b/projects/element-ng/select/testing/si-select.harness.ts
@@ -99,7 +99,7 @@ export class SiSelectHarness extends ComponentHarness {
 
   async getOverflowCount(): Promise<number> {
     await new Promise<void>(resolve => setTimeout(() => resolve()));
-    return this.locatorForOptional('.overflow-item')()
+    return this.locatorForOptional('.pill')()
       .then(overflow => overflow?.text())
       .then(overflow => overflow?.replace('+', ''))
       .then(overflow => (overflow ? +overflow : 0));