feat(autocomplete/chip): contour styling for autocomplete and new rad…

…ius for the chip

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);

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> `;