Clean lit-plugin warnings

src/action-handler-directive.ts

@@ -1,14 +1,14 @@
 import { fireEvent } from 'custom-card-helpers';
 import type {
   ActionHandlerDetail,
-  ActionHandlerOptions
+  ActionHandlerOptions,
 } from 'custom-card-helpers/dist/types.d.js';
 import { noChange } from 'lit';
 import {
   AttributePart,
   directive,
   Directive,
-  DirectiveParameters
+  DirectiveParameters,
 } from 'lit/directive.js';
 import { stopEventFromActivatingCardWideActions } from './utils/action.js';
 
@@ -20,12 +20,6 @@ interface ActionHandlerElement extends HTMLElement {
   actionHandlerOptions?: FrigateCardActionHandlerOptions;
 }
 
-declare global {
-  interface HASSDomEvents {
-    action: ActionHandlerDetail;
-  }
-}
-
 interface FrigateCardActionHandlerOptions extends ActionHandlerOptions {
   allowPropagation?: boolean;
 }
@@ -196,3 +190,12 @@ export const actionHandler = directive(
     render(_options?: FrigateCardActionHandlerOptions) {}
   },
 );
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'action-handler-frigate-card': ActionHandler;
+  }
+  interface HASSDomEvents {
+    action: ActionHandlerDetail;
+  }
+}

src/card.ts

@@ -7,7 +7,7 @@ import {
   TemplateResult,
   unsafeCSS,
 } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
@@ -148,7 +148,7 @@ console.info(
  */
 @customElement('frigate-card')
 export class FrigateCard extends LitElement {
-  @property({ attribute: false })
+  @state()
   protected _hass?: ExtendedHomeAssistant;
 
   // The main base configuration object. For most usecases use getConfig() to
@@ -162,7 +162,7 @@ export class FrigateCard extends LitElement {
   @state()
   protected _overriddenConfig?: FrigateCardConfig;
 
-  @property({ attribute: false })
+  @state()
   protected _view?: View;
 
   protected _conditionState?: ConditionState;
@@ -1858,3 +1858,9 @@ export class FrigateCard extends LitElement {
     return 6;
   }
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card": FrigateCard
+	}
+}

src/components/drawer.ts

@@ -9,6 +9,7 @@ import {
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import 'side-drawer';
+import { SideDrawer } from 'side-drawer';
 import drawerInjectStyle from '../scss/drawer-inject.scss';
 import drawerStyle from '../scss/drawer.scss';
 
@@ -125,3 +126,10 @@ export class FrigateCardDrawer extends LitElement {
     return unsafeCSS(drawerStyle);
   }
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card-drawer": FrigateCardDrawer
+    "side-drawer": SideDrawer,
+	}
+}

src/components/elements.ts

@@ -7,7 +7,7 @@ import {
   TemplateResult,
   unsafeCSS
 } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { ConditionState, fetchStateAndEvaluateCondition } from '../card-condition.js';
 import { localize } from '../localize/localize.js';
 import elementsStyle from '../scss/elements.scss';
@@ -67,19 +67,19 @@ interface HuiConditionalElement extends HTMLElement {
 @customElement('frigate-card-elements-core')
 export class FrigateCardElementsCore extends LitElement {
   @property({ attribute: false })
-  protected elements: PictureElements;
+  public elements: PictureElements;
 
   /**
    * Need to ensure card re-renders when conditionState changes, hence having it
    * as a property even though it is not currently directly used by this class.
    */
   @property({ attribute: false })
-  protected conditionState?: ConditionState;
+  public conditionState?: ConditionState;
 
   protected _root: HuiConditionalElement | null = null;
 
   @property({ attribute: false })
-  protected hass?: HomeAssistant;
+  public hass?: HomeAssistant;
 
   /**
    * Create a transparent render root.
@@ -159,7 +159,7 @@ export class FrigateCardElements extends LitElement {
   public conditionState?: ConditionState;
 
   @property({ attribute: false })
-  protected elements: PictureElements;
+  public elements: PictureElements;
 
   protected _boundMenuRemoveHandler = this._menuRemoveHandler.bind(this);
 
@@ -253,7 +253,7 @@ export class FrigateCardElementsConditional extends LitElement {
   // elements), the hass object is used as the (only) trigger for condition
   // re-fetch even if hass itself has not changed.
   @property({ attribute: false, hasChanged: () => true })
-  protected hass?: HomeAssistant;
+  public hass?: HomeAssistant;
 
   /**
    * Set the card configuration.
@@ -299,7 +299,7 @@ export class FrigateCardElementsConditional extends LitElement {
 
 // A base class for rendering menu icons / menu state icons.
 export class FrigateCardElementsBaseMenuIcon<T> extends LitElement {
-  @property({ attribute: false })
+  @state()
   protected _config: T | null = null;
 
   /**
@@ -342,3 +342,15 @@ export class FrigateCardElementsMenuSubmenu extends FrigateCardElementsBaseMenuI
 
 @customElement('frigate-card-menu-submenu-select')
 export class FrigateCardElementsMenuSubmenuSelect extends FrigateCardElementsBaseMenuIcon<MenuSubmenuSelect> {}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card-conditional": FrigateCardElementsConditional
+		"frigate-card-elements": FrigateCardElements
+		"frigate-card-menu-submenu-select": FrigateCardElementsMenuSubmenuSelect
+		"frigate-card-menu-submenu": FrigateCardElementsMenuSubmenu
+		"frigate-card-menu-state-icon": FrigateCardElementsMenuStateIcon
+		"frigate-card-menu-icon": FrigateCardElementsMenuIcon
+		"frigate-card-elements-core": FrigateCardElementsCore
+	}
+}

src/components/gallery.ts

@@ -31,16 +31,16 @@ import { THUMBNAIL_DETAILS_WIDTH_MIN } from './thumbnail.js';
 @customElement('frigate-card-gallery')
 export class FrigateCardGallery extends LitElement {
   @property({ attribute: false })
-  protected hass?: HomeAssistant;
+  public hass?: HomeAssistant;
 
   @property({ attribute: false })
-  protected view?: Readonly<View>;
+  public view?: Readonly<View>;
 
   @property({ attribute: false })
-  protected galleryConfig?: GalleryConfig;
+  public galleryConfig?: GalleryConfig;
 
   @property({ attribute: false })
-  protected cameras?: Map<string, CameraConfig>;
+  public cameras?: Map<string, CameraConfig>;
 
   /**
    * Master render method.
@@ -108,13 +108,13 @@ export class FrigateCardGallery extends LitElement {
 @customElement('frigate-card-gallery-core')
 export class FrigateCardGalleryCore extends LitElement {
   @property({ attribute: false })
-  protected hass?: HomeAssistant;
+  public hass?: HomeAssistant;
 
   @property({ attribute: false })
-  protected view?: Readonly<View>;
+  public view?: Readonly<View>;
 
   @property({ attribute: false })
-  protected galleryConfig?: GalleryConfig;
+  public galleryConfig?: GalleryConfig;
 
   protected _resizeObserver: ResizeObserver;
 
@@ -281,3 +281,10 @@ export class FrigateCardGalleryCore extends LitElement {
     return unsafeCSS(galleryStyle);
   }
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card-gallery-core": FrigateCardGalleryCore
+		"frigate-card-gallery": FrigateCardGallery
+	}
+}

src/components/image.ts

@@ -29,13 +29,13 @@ export class FrigateCardImage extends LitElement {
   public hass?: HomeAssistant;
 
   @property({ attribute: false })
-  protected view?: Readonly<View>;
+  public view?: Readonly<View>;
 
   @property({ attribute: false })
-  protected cameraConfig?: CameraConfig;
+  public cameraConfig?: CameraConfig;
 
   @property({ attribute: false })
-  protected imageConfig?: ImageViewConfig;
+  public imageConfig?: ImageViewConfig;
 
   protected _refImage: Ref<HTMLImageElement> = createRef();
 
@@ -249,3 +249,9 @@ export class FrigateCardImage extends LitElement {
     return unsafeCSS(imageStyle);
   }
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card-image": FrigateCardImage
+	}
+}

src/components/live.ts

@@ -52,6 +52,8 @@ import { dispatchErrorMessageEvent } from './message.js';
 import './next-prev-control.js';
 import { FrigateCardNextPreviousControl } from './next-prev-control.js';
 import './title-control.js';
+import "./surround-thumbnails";
+import "../patches/ha-camera-stream";
 
 // Number of seconds a signed URL is valid for.
 const URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60;
@@ -65,19 +67,19 @@ export class FrigateCardLive extends LitElement {
   public conditionState?: ConditionState;
 
   @property({ attribute: false })
-  protected hass?: ExtendedHomeAssistant;
+  public hass?: ExtendedHomeAssistant;
 
   @property({ attribute: false })
-  protected view?: Readonly<View>;
+  public view?: Readonly<View>;
 
   @property({ attribute: false })
-  protected cameras?: Map<string, CameraConfig>;
+  public cameras?: Map<string, CameraConfig>;
 
   @property({ attribute: false })
-  protected liveConfig?: LiveConfig;
+  public liveConfig?: LiveConfig;
 
   @property({ attribute: false, hasChanged: contentsChanged })
-  protected liveOverrides?: LiveOverrides;
+  public liveOverrides?: LiveOverrides;
 
   set preloaded(preloaded: boolean) {
     this._preloaded = preloaded;
@@ -143,7 +145,7 @@ export class FrigateCardLive extends LitElement {
       .hass=${this.hass}
       .view=${this.view}
       .config=${config.controls.thumbnails}
-      .browseMediaParams=${browseMediaParams}
+      .browseMediaParams=${browseMediaParams ?? undefined}
       ?fetch=${!this._preloaded}
     >
       <frigate-card-live-carousel
@@ -181,25 +183,25 @@ export class FrigateCardLive extends LitElement {
 @customElement('frigate-card-live-carousel')
 export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
   @property({ attribute: false })
-  protected hass?: ExtendedHomeAssistant;
+  public hass?: ExtendedHomeAssistant;
 
   @property({ attribute: false })
-  protected view?: Readonly<View>;
+  public view?: Readonly<View>;
 
   @property({ attribute: false })
-  protected cameras?: Map<string, CameraConfig>;
+  public cameras?: Map<string, CameraConfig>;
 
   @property({ attribute: false })
-  protected liveConfig?: LiveConfig;
+  public liveConfig?: LiveConfig;
 
   @property({ attribute: false, hasChanged: contentsChanged })
-  protected liveOverrides?: LiveOverrides;
+  public liveOverrides?: LiveOverrides;
 
   @property({ attribute: false })
-  protected preloaded?: boolean;
+  public preloaded?: boolean;
 
   @property({ attribute: false })
-  protected conditionState?: ConditionState;
+  public conditionState?: ConditionState;
 
   // Index between camera name and slide number.
   protected _cameraToSlide: Record<string, number> = {};
@@ -576,13 +578,13 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
 @customElement('frigate-card-live-provider')
 export class FrigateCardLiveProvider extends LitElement {
   @property({ attribute: false })
-  protected hass?: ExtendedHomeAssistant;
+  public hass?: ExtendedHomeAssistant;
 
   @property({ attribute: false })
-  protected cameraConfig?: CameraConfig;
+  public cameraConfig?: CameraConfig;
 
   @property({ attribute: false })
-  protected liveConfig?: LiveConfig;
+  public liveConfig?: LiveConfig;
 
   // Whether or not to disable this entity. If `true`, no contents are rendered
   // until this attribute is set to `false` (this is useful for lazy loading).
@@ -694,10 +696,10 @@ export class FrigateCardLiveProvider extends LitElement {
 @customElement('frigate-card-live-ha')
 export class FrigateCardLiveFrigate extends LitElement {
   @property({ attribute: false })
-  protected hass?: HomeAssistant;
+  public hass?: HomeAssistant;
 
   @property({ attribute: false })
-  protected cameraConfig?: CameraConfig;
+  public cameraConfig?: CameraConfig;
 
   protected _playerRef: Ref<FrigateCardLiveFrigate> = createRef();
 
@@ -785,10 +787,10 @@ export class FrigateCardLiveFrigate extends LitElement {
 @customElement('frigate-card-live-webrtc-card')
 export class FrigateCardLiveWebRTCCard extends LitElement {
   @property({ attribute: false, hasChanged: contentsChanged })
-  protected webRTCConfig?: WebRTCCardConfig;
+  public webRTCConfig?: WebRTCCardConfig;
 
   @property({ attribute: false })
-  protected cameraConfig?: CameraConfig;
+  public cameraConfig?: CameraConfig;
 
   protected hass?: HomeAssistant;
 
@@ -959,10 +961,10 @@ export class FrigateCardLiveWebRTCCard extends LitElement {
 @customElement('frigate-card-live-jsmpeg')
 export class FrigateCardLiveJSMPEG extends LitElement {
   @property({ attribute: false })
-  protected cameraConfig?: CameraConfig;
+  public cameraConfig?: CameraConfig;
 
   @property({ attribute: false, hasChanged: contentsChanged })
-  protected jsmpegConfig?: JSMPEGConfig;
+  public jsmpegConfig?: JSMPEGConfig;
 
   protected hass?: ExtendedHomeAssistant;
 
@@ -1178,3 +1180,14 @@ export class FrigateCardLiveJSMPEG extends LitElement {
     return unsafeCSS(liveJSMPEGStyle);
   }
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card-live-jsmpeg": FrigateCardLiveJSMPEG
+		"frigate-card-live-webrtc-card": FrigateCardLiveWebRTCCard
+		"frigate-card-live-ha": FrigateCardLiveFrigate
+		"frigate-card-live-provider": FrigateCardLiveProvider
+		"frigate-card-live-carousel": FrigateCardLiveCarousel
+		"frigate-card-live": FrigateCardLive
+	}
+}

src/components/media-carousel.ts

@@ -289,3 +289,9 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
     return [super.styles, unsafeCSS(mediaCarouselStyle)];
   }
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card-media-carousel": FrigateCardMediaCarousel
+	}
+}

src/components/menu.ts

@@ -41,6 +41,9 @@ export class FrigateCardMenu extends LitElement {
   @property({ attribute: false })
   public hass?: HomeAssistant;
 
+  @property({ attribute: true, type: Boolean, reflect: true })
+  public expanded = false;
+
   set menuConfig(menuConfig: MenuConfig) {
     this._menuConfig = menuConfig;
     if (menuConfig) {
@@ -58,9 +61,6 @@ export class FrigateCardMenu extends LitElement {
   @state()
   protected _menuConfig?: MenuConfig;
 
-  @property({ attribute: true, type: Boolean, reflect: true })
-  protected expanded = false;
-
   @property({ attribute: false })
   public buttons: MenuButton[] = [];
 
@@ -340,3 +340,9 @@ export class FrigateCardMenu extends LitElement {
     return unsafeCSS(menuStyle);
   }
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card-menu": FrigateCardMenu
+	}
+}

src/components/message.ts

@@ -1,4 +1,10 @@
-import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import {
+  CSSResultGroup,
+  html,
+  LitElement,
+  TemplateResult,
+  unsafeCSS,
+} from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { TROUBLESHOOTING_URL } from '../const.js';
 import { localize } from '../localize/localize.js';
@@ -9,13 +15,13 @@ import { dispatchFrigateCardEvent } from '../utils/basic.js';
 @customElement('frigate-card-message')
 export class FrigateCardMessage extends LitElement {
   @property({ attribute: false })
-  protected message = '';
+  public message: string | TemplateResult<1> = '';
 
   @property({ attribute: false })
-  protected context?: unknown;
+  public context?: unknown;
 
   @property({ attribute: false })
-  protected icon?: string;
+  public icon?: string;
 
   // Render the menu.
   protected render(): TemplateResult {
@@ -43,7 +49,7 @@ export class FrigateCardMessage extends LitElement {
 @customElement('frigate-card-error-message')
 export class FrigateCardErrorMessage extends LitElement {
   @property({ attribute: false })
-  protected message?: Message;
+  public message?: Message;
 
   protected render(): TemplateResult | void {
     if (!this.message) {
@@ -66,7 +72,7 @@ export class FrigateCardErrorMessage extends LitElement {
 @customElement('frigate-card-progress-indicator')
 export class FrigateCardProgressIndicator extends LitElement {
   @property({ attribute: false })
-  protected message = '';
+  public message: string | TemplateResult = '';
 
   protected render(): TemplateResult {
     return html` <div class="message vertical">
@@ -148,11 +154,19 @@ export function dispatchErrorMessageEvent(
  */
 export function dispatchFrigateCardErrorEvent(
   element: EventTarget,
-  error: FrigateCardError
+  error: FrigateCardError,
 ): void {
   dispatchFrigateCardEvent<Message>(element, 'message', {
     message: error.message,
     type: 'error',
-    context: error.context || ''
+    context: error.context || '',
   });
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+		"frigate-card-progress-indicator": FrigateCardProgressIndicator
+    'frigate-card-error-message': FrigateCardErrorMessage;
+    'frigate-card-message': FrigateCardMessage;
+  }
+}

src/components/next-prev-control.ts

@@ -78,3 +78,9 @@ export class FrigateCardNextPreviousControl extends LitElement {
     return unsafeCSS(controlStyle);
   }
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card-next-previous-control": FrigateCardNextPreviousControl
+	}
+}

src/components/submenu.ts

@@ -1,4 +1,3 @@
-import type { Corner } from '@material/mwc-menu';
 import { HomeAssistant } from 'custom-card-helpers';
 import {
   CSSResultGroup,
@@ -6,17 +5,22 @@ import {
   LitElement,
   PropertyValues,
   TemplateResult,
-  unsafeCSS
+  unsafeCSS,
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { actionHandler } from '../action-handler-directive.js';
 import submenuStyle from '../scss/submenu.scss';
-import { MenuSubmenu, MenuSubmenuItem, MenuSubmenuSelect } from '../types.js';
+import {
+  MenuSubmenu,
+  MenuSubmenuItem,
+  MenuSubmenuSelect,
+  StateParameters,
+} from '../types.js';
 import {
   frigateCardHasAction,
-  stopEventFromActivatingCardWideActions
+  stopEventFromActivatingCardWideActions,
 } from '../utils/action.js';
 import { isHassDifferent, refreshDynamicStateParameters } from '../utils/ha';
 import { domainIcon } from '../utils/icons/domain-icon.js';
@@ -29,14 +33,24 @@ export class FrigateCardSubmenu extends LitElement {
   @property({ attribute: false })
   public submenu?: MenuSubmenu;
 
-  @property({ attribute: false })
-  public corner?: Corner;
-
   protected _renderItem(item: MenuSubmenuItem): TemplateResult | void {
     if (!this.hass) {
       return;
     }
     const stateParameters = refreshDynamicStateParameters(this.hass, { ...item });
+    const getIcon = (stateParameters: StateParameters): TemplateResult => {
+      if (stateParameters.icon) {
+        return html` <ha-icon
+          style="${styleMap(stateParameters.style || {})}"
+          data-domain=${ifDefined(stateParameters.data_domain)}
+          data-state=${ifDefined(stateParameters.data_state)}
+          slot="graphic"
+          icon="${stateParameters.icon || ''}"
+        >
+        </ha-icon>`;
+      }
+      return html``;
+    };
 
     return html`
       <mwc-list-item
@@ -58,16 +72,7 @@ export class FrigateCardSubmenu extends LitElement {
       >
         <span>${stateParameters.title || ''}</span>
         ${item.subtitle ? html`<span slot="secondary">${item.subtitle}</span>` : ''}
-        ${stateParameters.icon
-          ? html` <ha-icon
-              data-domain=${ifDefined(stateParameters.data_domain)}
-              data-state=${ifDefined(stateParameters.data_state)}
-              style="${styleMap(stateParameters.style || {})}"
-              slot="graphic"
-              icon="${stateParameters.icon}"
-            >
-            </ha-icon>`
-          : ``}
+        ${getIcon(stateParameters)}
       </mwc-list-item>
     `;
   }
@@ -78,7 +83,7 @@ export class FrigateCardSubmenu extends LitElement {
     }
     return html`
       <ha-button-menu
-        corner=${this.corner || 'BOTTOM_LEFT'}
+        corner=${'BOTTOM_LEFT'}
         @closed=${
           // Prevent the submenu closing from closing anything upstream (e.g.
           // selecting a submenu in the editor dialog should not close the
@@ -122,9 +127,6 @@ export class FrigateCardSubmenuSelect extends LitElement {
   @property({ attribute: false })
   public submenuSelect?: MenuSubmenuSelect;
 
-  @property({ attribute: false })
-  public corner?: Corner;
-
   protected _generatedSubmenu?: MenuSubmenu;
 
   /**
@@ -213,8 +215,14 @@ export class FrigateCardSubmenuSelect extends LitElement {
   protected render(): TemplateResult {
     return html` <frigate-card-submenu
       .hass=${this.hass}
-      .corner=${this.corner}
       .submenu=${this._generatedSubmenu}
     ></frigate-card-submenu>`;
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'frigate-card-submenu': FrigateCardSubmenu;
+    'frigate-card-submenu-select': FrigateCardSubmenuSelect;
+  }
+}

src/components/surround-thumbnails.ts

@@ -5,7 +5,7 @@ import {
   LitElement,
   PropertyValues,
   TemplateResult,
-  unsafeCSS
+  unsafeCSS,
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import surroundThumbnailsStyle from '../scss/surround.scss';
@@ -14,12 +14,12 @@ import {
   FrigateBrowseMediaSource,
   FrigateCardError,
   FrigateCardView,
-  ThumbnailsControlConfig
+  ThumbnailsControlConfig,
 } from '../types.js';
 import { contentsChanged, dispatchFrigateCardEvent } from '../utils/basic.js';
 import {
   getFirstTrueMediaChildIndex,
-  multipleBrowseMediaQueryMerged
+  multipleBrowseMediaQueryMerged,
 } from '../utils/ha/browse-media';
 import { View } from '../view.js';
 import { dispatchFrigateCardErrorEvent } from './message.js';
@@ -29,24 +29,22 @@ import { ThumbnailCarouselTap } from './thumbnail-carousel.js';
 @customElement('frigate-card-surround-thumbnails')
 export class FrigateCardSurround extends LitElement {
   @property({ attribute: false })
-  protected hass?: HomeAssistant;
+  public hass?: HomeAssistant;
 
   @property({ attribute: false })
-  protected view?: Readonly<View>;
+  public view?: Readonly<View>;
 
   @property({ attribute: false })
-  protected config?: ThumbnailsControlConfig;
+  public config?: ThumbnailsControlConfig;
 
   @property({ attribute: false })
-  protected targetView?: FrigateCardView;
+  public targetView?: FrigateCardView;
 
   @property({ attribute: true, type: Boolean })
-  protected fetch?: boolean;
+  public fetch?: boolean;
 
   @property({ attribute: false, hasChanged: contentsChanged })
-  protected browseMediaParams?:
-    | BrowseMediaQueryParameters
-    | BrowseMediaQueryParameters[];
+  public browseMediaParams?: BrowseMediaQueryParameters | BrowseMediaQueryParameters[];
 
   /**
    * Fetch thumbnail media when a target is not specified in the view (e.g. for
@@ -170,3 +168,9 @@ export class FrigateCardSurround extends LitElement {
     return unsafeCSS(surroundThumbnailsStyle);
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'frigate-card-surround-thumbnails': FrigateCardSurround;
+  }
+}

src/components/surround.ts

@@ -69,3 +69,9 @@ export class FrigateCardSurround extends LitElement {
     return unsafeCSS(surroundStyle);
   }
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card-surround": FrigateCardSurround
+	}
+}

src/components/thumbnail-carousel.ts

@@ -21,7 +21,7 @@ export interface ThumbnailCarouselTap {
 @customElement('frigate-card-thumbnail-carousel')
 export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
   @property({ attribute: false })
-  protected view?: Readonly<View>;
+  public view?: Readonly<View>;
 
   // Use contentsChanged here to avoid the carousel rebuilding and resetting in
   // front of the user, unless the contents have actually changed.
@@ -240,3 +240,9 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
     return [super.styles, unsafeCSS(thumbnailCarouselStyle)];
   }
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card-thumbnail-carousel": FrigateCardThumbnailCarousel
+	}
+}

src/components/thumbnail.ts

@@ -132,7 +132,7 @@ export class FrigateCardThumbnail extends LitElement {
   // Data-binding based interface
   // ============================
   @property({ attribute: false })
-  protected view?: Readonly<View>;
+  public view?: Readonly<View>;
 
   @property({ attribute: false })
   public target?: FrigateBrowseMediaSource | null;
@@ -253,3 +253,13 @@ export class FrigateCardThumbnail extends LitElement {
     return unsafeCSS(thumbnailStyle);
   }
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card-thumbnail": FrigateCardThumbnail
+		"frigate-card-thumbnail-details-recording": FrigateCardThumbnailDetailsRecording
+		"frigate-card-thumbnail-details-event": FrigateCardThumbnailDetailsEvent
+		"frigate-card-thumbnail-feature-recording": FrigateCardThumbnailFeatureRecording
+		"frigate-card-thumbnail-feature-event": FrigateCardThumbnailFeatureEvent
+	}
+}

src/components/timeline.ts

@@ -424,16 +424,16 @@ class TimelineDataManager {
 @customElement('frigate-card-timeline')
 export class FrigateCardTimeline extends LitElement {
   @property({ attribute: false })
-  protected hass?: ExtendedHomeAssistant;
+  public hass?: ExtendedHomeAssistant;
 
   @property({ attribute: false })
-  protected view?: Readonly<View>;
+  public view?: Readonly<View>;
 
   @property({ attribute: false })
-  protected cameras?: Map<string, CameraConfig>;
+  public cameras?: Map<string, CameraConfig>;
 
   @property({ attribute: false })
-  protected timelineConfig?: TimelineConfig;
+  public timelineConfig?: TimelineConfig;
 
   /**
    * Master render method.
@@ -470,16 +470,16 @@ export class FrigateCardTimeline extends LitElement {
 @customElement('frigate-card-timeline-core')
 export class FrigateCardTimelineCore extends LitElement {
   @property({ attribute: false })
-  protected hass?: ExtendedHomeAssistant;
+  public hass?: ExtendedHomeAssistant;
 
   @property({ attribute: false })
-  protected view?: Readonly<View>;
+  public view?: Readonly<View>;
 
   @property({ attribute: false })
-  protected cameras?: Map<string, CameraConfig>;
+  public cameras?: Map<string, CameraConfig>;
 
   @property({ attribute: false })
-  protected timelineConfig?: TimelineConfig;
+  public timelineConfig?: TimelineConfig;
 
   protected _data = new TimelineDataManager({
     tooltipCallback: this._getTooltip.bind(this),
@@ -1237,3 +1237,10 @@ export class FrigateCardTimelineCore extends LitElement {
     return unsafeCSS(timelineCoreStyle);
   }
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card-timeline-core": FrigateCardTimelineCore
+		"frigate-card-timeline": FrigateCardTimeline
+	}
+}

src/components/title-control.ts

@@ -83,3 +83,9 @@ export class FrigateCardTitleControl extends LitElement {
     return unsafeCSS(titleStyle);
   }
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card-title-control": FrigateCardTitleControl
+	}
+}

src/components/viewer.ts

@@ -47,23 +47,25 @@ import { FrigateCardMediaCarousel, IMG_EMPTY } from './media-carousel.js';
 import './next-prev-control.js';
 import { FrigateCardNextPreviousControl } from './next-prev-control.js';
 import './title-control.js';
+import "../patches/ha-hls-player";
+import "./surround-thumbnails";
 
 @customElement('frigate-card-viewer')
 export class FrigateCardViewer extends LitElement {
   @property({ attribute: false })
-  protected hass?: ExtendedHomeAssistant;
+  public hass?: ExtendedHomeAssistant;
 
   @property({ attribute: false })
-  protected view?: Readonly<View>;
+  public view?: Readonly<View>;
 
   @property({ attribute: false })
-  protected viewerConfig?: ViewerConfig;
+  public viewerConfig?: ViewerConfig;
 
   @property({ attribute: false })
-  protected cameras?: Map<string, CameraConfig>;
+  public cameras?: Map<string, CameraConfig>;
 
   @property({ attribute: false })
-  protected resolvedMediaCache?: ResolvedMediaCache;
+  public resolvedMediaCache?: ResolvedMediaCache;
 
   /**
    * Master render method.
@@ -132,10 +134,10 @@ const FRIGATE_CARD_HLS_SELECTOR = 'frigate-card-ha-hls-player';
 @customElement('frigate-card-viewer-carousel')
 export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
   @property({ attribute: false })
-  protected hass?: ExtendedHomeAssistant;
+  public hass?: ExtendedHomeAssistant;
 
   @property({ attribute: false })
-  protected view?: Readonly<View>;
+  public view?: Readonly<View>;
 
   // Resetting the viewer configuration causes a full reset so ensure the config
   // has actually changed with a full comparison (dynamic configuration
@@ -143,13 +145,13 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
   // could lead to the address of the viewerConfig changing without it being
   // semantically different).
   @property({ attribute: false, hasChanged: contentsChanged })
-  protected viewerConfig?: ViewerConfig;
+  public viewerConfig?: ViewerConfig;
 
   @property({ attribute: false })
-  protected browseMediaQueryParameters?: BrowseMediaQueryParameters[] | null;
+  public browseMediaQueryParameters?: BrowseMediaQueryParameters[] | null;
 
   @property({ attribute: false })
-  protected resolvedMediaCache?: ResolvedMediaCache;
+  public resolvedMediaCache?: ResolvedMediaCache;
 
   // Mapping of slide # to FrigateBrowseMediaSource child #.
   // (Folders are not media items that can be rendered).
@@ -787,3 +789,10 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
     `;
   }
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card-viewer-carousel": FrigateCardViewerCarousel
+		"frigate-card-viewer": FrigateCardViewer
+	}
+}

src/editor.ts

@@ -205,7 +205,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
   protected _initialized = false;
   protected _configUpgradeable = false;
 
-  @property({ attribute: false })
+  @state()
   protected _expandedMenus: Record<string, string | number> = {};
 
   protected _viewModes: EditorSelectOption[] = [
@@ -1489,3 +1489,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     return unsafeCSS(frigate_card_editor_style);
   }
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card-editor": FrigateCardEditor
+	}
+}

src/patches/ha-camera-stream.ts

@@ -14,6 +14,8 @@ import { customElement } from 'lit/decorators.js';
 import { query } from 'lit/decorators/query.js';
 import { FrigateCardMediaPlayer } from '../types.js';
 import { dispatchMediaShowEvent } from '../utils/media-info.js';
+import "./ha-hls-player";
+import "./ha-web-rtc-player";
 
 customElements.whenDefined('ha-camera-stream').then(() => {
   // ========================================================================================
@@ -151,3 +153,9 @@ customElements.whenDefined('ha-camera-stream').then(() => {
     }
   }
 });
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card-ha-camera-stream": FrigateCardHaCameraStream
+	}
+}

src/patches/ha-hls-player.ts

@@ -109,3 +109,9 @@ customElements.whenDefined('ha-hls-player').then(() => {
     }
   }
 });
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"frigate-card-ha-hls-player": FrigateCardHaHlsPlayer
+	}
+}

src/patches/ha-web-rtc-player.ts

@@ -93,3 +93,9 @@ customElements.whenDefined('ha-web-rtc-player').then(() => {
     }
   }
 });
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'frigate-card-ha-web-rtc-player': FrigateCardHaWebRtcPlayer;
+  }
+}

src/types.ts

@@ -3,9 +3,7 @@ import {
   ConfirmationRestrictionConfig,
   CustomActionConfig,
   HomeAssistant,
-  LovelaceCard,
   LovelaceCardConfig,
-  LovelaceCardEditor,
   MoreInfoActionConfig,
   NavigateActionConfig,
   NoActionConfig,
@@ -24,13 +22,6 @@ export const BUTTON_SIZE_MIN = 20;
 export const THUMBNAIL_WIDTH_MAX = 175;
 export const THUMBNAIL_WIDTH_MIN = 75;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'frigate-card-editor': LovelaceCardEditor;
-    'hui-error-card': LovelaceCard;
-  }
-}
-
 /**
  * Internal types.
  */