plusmoins : bouton plus compact

src/routes/PlusMoins.svelte

@@ -13,10 +13,33 @@
 </script>
 
 <div class="flex flex-col-reverse xl:flex-row items-center justify-left gap-2">
-	<div class="btn-group variant-ringed shrink-0 [&>*]:btn-sm">
+	<div class="inline-flex rounded-full shadow-sm" role="group">
-		<button class="btn-icon" on:click={decrementer}>-</button>
+		<button
-		<button class="btn variant-filled-surface pointer-events-none">{compteur}</button>
+			type="button"
-		<button class="btn-icon" on:click={incrementer}>+</button>
+			on:click={decrementer}
+			class="px-3 py-1 text-surface-900 bg-white border border-surface-200 rounded-s-full
+				   hover:bg-surface-100 dark:bg-gray-700 dark:border-gray-600
+				   dark:text-white dark:hover:text-white dark:hover:bg-surface-600"
+		>
+			-
+		</button>
+		<button
+			type="button"
+			class="pointer-events-none px-3 py-1 text-white bg-surface-700
+				   border-t border-b border-surface-200 dark:bg-surface-200
+				   dark:border-surface-600 dark:text-surface-900"
+		>
+			{compteur}
+		</button>
+		<button
+			type="button"
+			on:click={incrementer}
+			class="px-3 py-1 text-surface-900 bg-white border border-surface-200 rounded-e-full
+				   hover:bg-surface-100 dark:bg-gray-700 dark:border-gray-600
+			       dark:text-white dark:hover:text-white dark:hover:bg-surface-600"
+		>
+			+
+		</button>
 	</div>
 	<span class="grow"><slot /></span>
 </div>