From 3b4e2f910a120aa9f1feb03d77893ded7a96b672 Mon Sep 17 00:00:00 2001
From: Takshil Kunadia <takshilkunadia@gmail.com>
Date: Thu, 24 Oct 2024 23:29:34 +0530
Subject: [PATCH 1/2] fix: Allow only unique pills

---
 src/multi-select/index.html               | 22 +++++++++++++---------
 src/multi-select/tp-multi-select-pills.ts |  2 +-
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/multi-select/index.html b/src/multi-select/index.html
index 1c642d0..d90fc3d 100644
--- a/src/multi-select/index.html
+++ b/src/multi-select/index.html
@@ -46,7 +46,7 @@
 		}
 
 		tp-multi-select-option + tp-multi-select-option {
-			border-top: 1px solid #000;
+			background-color: gainsboro;
 		}
 
 		tp-multi-select-select-all[selected="yes"]::after,
@@ -97,14 +97,18 @@
 				</tp-multi-select-search>
 			</tp-multi-select-field>
 			<tp-multi-select-options>
-				<tp-multi-select-select-all select-text="Select All" unselect-text="Un-Select All">Select All</tp-multi-select-select-all>
-				<tp-multi-select-option value="priya" label="Priya">Priya</tp-multi-select-option>
-				<tp-multi-select-option value="varun" label="Varun">Varun</tp-multi-select-option>
-				<tp-multi-select-option value="john" label="John">John</tp-multi-select-option>
-				<tp-multi-select-option value="jane" label="Jane">Jane</tp-multi-select-option>
-				<tp-multi-select-option value="jack" label="Jack">Jack</tp-multi-select-option>
-				<tp-multi-select-option value="jill" label="Jill" disabled="yes">Jill</tp-multi-select-option>
-			</tp-multi-select-options>
+				<div>
+					<div> Most Popular </div>
+					<tp-multi-select-option value="Japan" label="Japan"> Japan </tp-multi-select-option> 
+					<tp-multi-select-option value="Maldiverna" label="Maldiverna"> Maldiverna </tp-multi-select-option> 
+					<tp-multi-select-option value="USA" label="USA"> USA </tp-multi-select-option> 
+				</div>
+				<div>
+					<div> Asia</div>
+					<tp-multi-select-option value="Japan" label="Japan"> Japan </tp-multi-select-option>
+					<tp-multi-select-option value="India" label="India"> India </tp-multi-select-option>
+				</div>
+			 </tp-multi-select-options>
 		</tp-multi-select>
 	</main>
 </body>
diff --git a/src/multi-select/tp-multi-select-pills.ts b/src/multi-select/tp-multi-select-pills.ts
index c6b03f3..65e6e6c 100644
--- a/src/multi-select/tp-multi-select-pills.ts
+++ b/src/multi-select/tp-multi-select-pills.ts
@@ -39,7 +39,7 @@ export class TPMultiSelectPillsElement extends HTMLElement {
 
 		// Determine pills.
 		const pills: NodeListOf<TPMultiSelectPillElement> | null = this.querySelectorAll( 'tp-multi-select-pill' );
-		const values: string[] = multiSelect.value ?? [];
+		const values: string[] = [ ...new Set( multiSelect.value ) ] ?? [];
 		const pillValues: string[] = [];
 
 		// Remove pills that shouldn't exist.

From a22976d3e731d7fc3cc8067438869dae6de322b8 Mon Sep 17 00:00:00 2001
From: Takshil Kunadia <takshilkunadia@gmail.com>
Date: Fri, 17 Jan 2025 10:12:39 +0530
Subject: [PATCH 2/2] fix: remove spacing in options

---
 src/multi-select/index.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/multi-select/index.html b/src/multi-select/index.html
index d90fc3d..18a20d8 100644
--- a/src/multi-select/index.html
+++ b/src/multi-select/index.html
@@ -98,15 +98,15 @@
 			</tp-multi-select-field>
 			<tp-multi-select-options>
 				<div>
-					<div> Most Popular </div>
-					<tp-multi-select-option value="Japan" label="Japan"> Japan </tp-multi-select-option> 
-					<tp-multi-select-option value="Maldiverna" label="Maldiverna"> Maldiverna </tp-multi-select-option> 
-					<tp-multi-select-option value="USA" label="USA"> USA </tp-multi-select-option> 
+					<div>Most Popular</div>
+					<tp-multi-select-option value="Japan" label="Japan">Japan</tp-multi-select-option> 
+					<tp-multi-select-option value="Maldiverna" label="Maldiverna">Maldiverna</tp-multi-select-option> 
+					<tp-multi-select-option value="USA" label="USA">USA</tp-multi-select-option> 
 				</div>
 				<div>
-					<div> Asia</div>
-					<tp-multi-select-option value="Japan" label="Japan"> Japan </tp-multi-select-option>
-					<tp-multi-select-option value="India" label="India"> India </tp-multi-select-option>
+					<div>Asia</div>
+					<tp-multi-select-option value="Japan" label="Japan">Japan</tp-multi-select-option>
+					<tp-multi-select-option value="India" label="India">India</tp-multi-select-option>
 				</div>
 			 </tp-multi-select-options>
 		</tp-multi-select>