feat: Enable styling loader (#554)

Exports loader parts so that the loading screen can be styled when
embedding.

src/item.ts

@@ -115,6 +115,7 @@ export type TabData = EmbedReplayData & {
  * @cssPart replay-tabs-nav
  * @cssPart replay-tabs-panel
  * @cssPart replay-main
+ * @cssPart loader
  * @cssProperty rwp-bar-background-color
  * @cssProperty rwp-bar-text-color
  * @cssProperty rwp-bar-button-color
@@ -1093,12 +1094,19 @@ class Item extends LitElement {
 
     if (this.itemInfo && !this.itemInfo.coll) {
       return html` <wr-loader
+        part="loader"
         .loadInfo="${this.loadInfo}"
         embed="${this.embed || ""}"
         swName="${ifDefined(this.swName === null ? undefined : this.swName)}"
         .coll="${this.item}"
         sourceUrl="${this.sourceUrl || ""}"
         @coll-loaded=${this.onItemLoaded}
+        exportparts="
+          base:wr-loader__base,
+          spinner:wr-loader__spinner,
+          spinner-label:wr-loader__spinner-label,
+          content:wr-loader__content,
+        "
       ></wr-loader>`;
     } else if (this.itemInfo) {
       return html`

src/loader.ts

@@ -33,6 +33,12 @@ declare let window: Window & {
   };
 };
 
+/**
+ * @cssPart base
+ * @cssPart spinner
+ * @cssPart spinner-label
+ * @cssPart content
+ */
 class Loader extends LitElement {
   @property({ type: String }) sourceUrl?: string;
   @property({ type: Object }) loadInfo: LoadInfo | null = null;
@@ -375,7 +381,7 @@ class Loader extends LitElement {
 
   render() {
     return html`
-      <section class="container">
+      <section class="container" part="base">
         <div class="is-justify-content-center is-flex">
           <fa-icon
             size="5rem"
@@ -385,15 +391,18 @@ class Loader extends LitElement {
               : rwpLogoAnimated}
             aria-label="ReplayWeb.page Logo"
             role="img"
+            part="spinner"
           ></fa-icon>
         </div>
         ${!this.embed
           ? html` <div class="level">
-              <p class="level-item">Loading&nbsp;<b>${this.sourceUrl}</b>...</p>
+              <p class="level-item" part="spinner-label">
+                Loading&nbsp;<b>${this.sourceUrl}</b>...
+              </p>
             </div>`
           : ""}
         <div class="level">
-          <div class="level-item has-text-centered">
+          <div class="level-item has-text-centered" part="content">
             ${this.renderContent()}
           </div>
         </div>