Significant rework in how events are updated from components.

src/components/carousel.ts

@@ -35,24 +35,13 @@ export class FrigateCardCarousel extends LitElement {
   updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
 
-    if (this._shouldInitCarousel(changedProperties)) {
+    if (!this._carousel) {
       this.updateComplete.then(() => {
         this._initCarousel();
       });
     }
   }
 
-  /**
-   * Whether or not the carousel should be (re-)initialized when the given
-   * properties change.
-   * @param changedProperties The properties that triggered the (re-)render.
-   * @returns 
-   */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected _shouldInitCarousel(_: PropertyValues): boolean {
-    return true;
-  }
-
   /**
    * Get the Embla options to use.
    * @returns An EmblaOptionsType object or undefined for no options.
@@ -61,6 +50,13 @@ export class FrigateCardCarousel extends LitElement {
     return undefined;
   }
 
+  protected _destroyCarousel(): void {
+    if (this._carousel) {
+      this._carousel.destroy();
+    }
+    this._carousel = undefined;
+  }
+
   /**
    * Load the carousel with "slides".
    */
@@ -70,9 +66,6 @@ export class FrigateCardCarousel extends LitElement {
     ) as HTMLElement;
 
     if (carouselNode) {
-      if (this._carousel) {
-        this._carousel.destroy();
-      }
       this._carousel = EmblaCarousel(carouselNode, this._getOptions());
       this._carousel.on('init', () => dispatchFrigateCardEvent(this, 'carousel:init'));
       this._carousel.on('select', () => {