From 543ff838718421991a6cddb2e8c9f7443367b8cc Mon Sep 17 00:00:00 2001
From: Carlo Barone <carlo.barone@neovici.se>
Date: Fri, 8 Mar 2024 14:39:28 +0100
Subject: [PATCH] feat(autocomplete/chip): contour styling for autocomplete and
 new radius for the chip

---
 src/autocomplete/chip.css.ts           |  1 +
 stories/cosmoz-autocomplete.stories.js | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/src/autocomplete/chip.css.ts b/src/autocomplete/chip.css.ts
index 04a1e3d8..92b38c39 100644
--- a/src/autocomplete/chip.css.ts
+++ b/src/autocomplete/chip.css.ts
@@ -13,6 +13,7 @@ export default css`
 		min-width: 40px;
 		padding: 0 4px 0 8px;
 		gap: 4px;
+		transform: translateY(var(--cosmoz-autocomplete-chip-translate-y));
 	}
 	.content {
 		color: var(--cosmoz-autocomplete-chip-color, #424242);
diff --git a/stories/cosmoz-autocomplete.stories.js b/stories/cosmoz-autocomplete.stories.js
index c37fb120..b30ad702 100644
--- a/stories/cosmoz-autocomplete.stories.js
+++ b/stories/cosmoz-autocomplete.stories.js
@@ -104,3 +104,29 @@ export const wrap = () => html` ${css}
 		wrap
 		style="max-width: 170px"
 	></cosmoz-autocomplete>`;
+
+export const contour = () => html`<style>
+		@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500&display=swap');
+		cosmoz-autocomplete,
+		cosmoz-listbox {
+			font-family: 'Inter', sans-serif;
+		}
+		cosmoz-autocomplete::part(input) {
+			--cosmoz-input-color: #aeacac;
+			--cosmoz-input-border-radius: 4px;
+			--cosmoz-input-padding: 12px;
+			--cosmoz-input-line-display: none;
+			--cosmoz-input-contour-size: 1px;
+			--cosmoz-input-label-translate-y: 35%;
+			--cosmoz-autocomplete-chip-translate-y: 8px;
+			--cosmoz-autocomplete-chip-border-radius: 4px;
+		}
+	</style>
+	<cosmoz-autocomplete
+		.label=${'Choose color'}
+		.source=${colors}
+		.textProperty=${'text'}
+		.value=${[colors[0], colors[1], colors[2]]}
+		wrap
+		style="max-width: 255px;"
+	></cosmoz-autocomplete> `;