v2.5.0 (#527)

Closes https://github.com/webrecorder/replayweb.page/issues/523, closes
https://github.com/webrecorder/replayweb.page/issues/396, closes
https://github.com/webrecorder/replayweb.page/issues/470, closes
https://github.com/webrecorder/replayweb.page/issues/237

## Changes

https://github.com/webrecorder/replayweb.page/pull/521
- Adds public `navigateReplayTo` method in `<replay-app-main>` that
allows embeds to control replay navigation directly without reloading
entire UI.
- Enables reloading `<wr-coll-replay>` iframe even if source URL hasn't
changed.
- Refactors lifecycle events to prevent unnecessary re-renders.

https://github.com/webrecorder/replayweb.page/pull/524
- Fixes incorrect page count shown
- Enables non-seed pages by default
- Improves UX and accessibility of scrolling to load more by displaying
help text

https://github.com/webrecorder/replayweb.page/pull/525
- Updates general styles and icons throughout to match Browsertrix
styles
- Allows deep customization of components with `part` and `exportparts`

https://github.com/webrecorder/replayweb.page/pull/526
- Enables importing Shoelace (ie Bootstrap) icons as inline SVG
- Updates location bar buttons to use Bootstrap icons
- Replaces deprecated raw-loader with Webpack-native asset rule

https://github.com/webrecorder/replayweb.page/pull/529
- Allows hiding collection metadata in embed.
- Moves non-seed toggle next to search bar to match resources controls
and enable hiding entire column when metadata is hidden.

https://github.com/webrecorder/replayweb.page/pull/533
- Fix non-seed pages toggle

https://github.com/webrecorder/replayweb.page/pull/535,
https://github.com/webrecorder/replayweb.page/pull/534
- Upgrade to Node 22 and Yarn 4

---------

Co-authored-by: Ilya Kreymer <ikreymer@gmail.com>
Co-authored-by: Misty De Méo <hi@mistydemeo.com>

src/components/icon.ts

@@ -0,0 +1,41 @@
+import { css, LitElement } from "lit";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+import { customElement, property } from "lit/decorators.js";
+
+/**
+ * Based on `<sl-icon>` but uses inline SVG.
+ */
+@customElement("wr-icon")
+export class Icon extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      box-sizing: content-box !important;
+    }
+
+    svg {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+  `;
+
+  /**
+   * Raw SVG string
+   */
+  @property({ type: String })
+  svg?: string;
+
+  @property({ type: String, reflect: true })
+  ariaHidden = "true";
+
+  render() {
+    if (!this.svg) {
+      return;
+    }
+
+    return unsafeSVG(this.svg);
+  }
+}

src/components/labeled-field.ts

@@ -6,21 +6,6 @@ import faClone from "@fortawesome/fontawesome-free/svgs/regular/clone.svg";
 import faCheck from "@fortawesome/fontawesome-free/svgs/solid/check.svg";
 import faX from "@fortawesome/fontawesome-free/svgs/solid/times.svg";
 
-import { registerIconLibrary } from "@shoelace-style/shoelace/dist/utilities/icon-library.js";
-
-import systemLibrary from "@shoelace-style/shoelace/dist/components/icon/library.system.js";
-
-// disable system library to prevent loading of unused data: URLs
-// allow only "x-lg" as it is needed for sl-dialog
-registerIconLibrary("system", {
-  resolver: (name) => {
-    if (name === "x-lg") {
-      return systemLibrary.resolver(name);
-    }
-    return "";
-  },
-});
-
 @customElement("wr-labeled-field")
 class LabeledField extends LitElement {
   @property({ type: String })