[css-scrollbars] Add diagram for parts of a scrollbar

Author: frivoal

css-scrollbars-1/Overview.bs

@@ -207,6 +207,20 @@ Value Definitions</h3>
 	The <dfn>thumb</dfn> refers to the moving part of the scrollbar,
 	which usually floats on top of the [=track=].
 
+	Some scrollbars also include additional controls,
+	refered to as <dfn>buttons</dfn>,
+	which usually sit at the top or bottom of the scrollbar
+	on top of the [=track=].
+	This specification does not define
+	whether and how buttons--
+	if present--
+	are colored.
+
+	<figure>
+		<img src="images/parts.svg" width=270 height=129>
+		<figcaption>Anatomy of a scrollbar</figcaption>
+	</figure>
+
 	If this property computes to a value other than ''scrollbar-color/auto'',
 	implementations may render a simpler scrollbar than the default platform UI rendering,
 	and color it accordingly.
@@ -235,6 +249,7 @@ Value Definitions</h3>
 		as well as a darker outline,
 		all derived from the specified shade of blue;
 		the light gray [=track=] has a darker outline.
+		This design also happens to include [=buttons=].
 
 		<img src="images/non-flat-bar.png"
 			alt="A horizontal scrollbar with a textured, shaded and outlined blue thumb,
@@ -253,12 +268,6 @@ Value Definitions</h3>
 			as was commonly seen in scrollbar designs of the early 2020s">
 	</div>
 
-	Issue: add diagram showing the different named pieces - something like
-	<a href="http://www.howtocreate.co.uk/tutorials/scrlbar.html">http://www.howtocreate.co.uk/tutorials/scrlbar.html</a>
-
-	Issue: add example of an overflow element with colorized scrollbars to match page styling,
-	PNG of the same in a browser that supports it currently.
-
 	Implementations may ignore any of the colors
 	if the corresponding part do not exist on the underlying platform.