feat: add range CSS parts

fix muxinc#921, fix muxinc#983

src/js/media-chrome-range.ts

@@ -207,7 +207,6 @@ template.innerHTML = /*html*/ `
       height: var(--media-range-segment-hover-height, 7px);
     }
 
-    #background,
     #track {
       clip-path: url(#segments-clipping);
     }
@@ -240,13 +239,13 @@ template.innerHTML = /*html*/ `
     <div id="startpoint"></div>
     <div id="endpoint"></div>
     <div id="appearance" part="appearance">
-      <div id="background"></div>
-      <div id="track">
-        <div id="highlight"></div>
-        <div id="pointer"></div>
-        <div id="progress"></div>
+      <div id="track" part="track">
+        <div id="background" part="background"></div>
+        <div id="highlight" part="highlight"></div>
+        <div id="pointer" part="pointer"></div>
+        <div id="progress" part="progress"></div>
       </div>
-      <div id="thumb"></div>
+      <div id="thumb" part="thumb"></div>
       <svg id="segments"><clipPath id="segments-clipping"></clipPath></svg>
     </div>
     <input id="range" type="range" min="0" max="1" step="any" value="0">
@@ -260,7 +259,13 @@ template.innerHTML = /*html*/ `
  * @attr {boolean} disabled - The Boolean disabled attribute makes the element not mutable or focusable.
  * @attr {string} mediacontroller - The element `id` of the media controller to connect to (if not nested within).
  *
- * @csspart appearance - The appearance of the range containing the background, track and thumb.
+ * @csspart appearance - The appearance of the range containing the track and thumb.
+ * @csspart track - The runnable track of the range.
+ * @csspart background - The background part of the track.
+ * @csspart highlight - The highlight (buffering) part of the track.
+ * @csspart pointer - The (mouse) pointer indicator on the track.
+ * @csspart progress - The progress part of the track.
+ * @csspart thumb - The thumb of the range.
  *
  * @cssproperty --media-primary-color - Default color of range bar.
  * @cssproperty --media-secondary-color - Default color of range background.
@@ -285,8 +290,7 @@ template.innerHTML = /*html*/ `
  * @cssproperty --media-range-thumb-transform - `transform` of range thumb.
  * @cssproperty --media-range-thumb-opacity - `opacity` of range thumb.
  *
- * @cssproperty [--media-range-bar-color = var(--media-primary-color, rgb(238 238 238))] - `color_value` of range bar (elapsed progress).
- * @cssproperty [--media-range-track-color = transparent] - `color_value` of range track (remaining progress).
+ * @cssproperty [--media-range-bar-color = var(--media-primary-color, rgb(238 238 238))] - `background` of range progress.
  * @cssproperty --media-range-track-backdrop-filter - `backdrop-filter` of range track.
  * @cssproperty --media-range-track-width - `width` of range track.
  * @cssproperty --media-range-track-height - `height` of range track.