Add validation for preference panel and category template

Validate that <probo-preference-panel> contains <probo-category-list>
and <probo-save-button>, and that the category template includes
<probo-category-toggle> and <probo-cookie-list>.

Signed-off-by: Émile Ré <emile@getprobo.com>

packages/cookie-banner/src/components/category-list.ts

@@ -37,9 +37,11 @@ export class ProboCategoryList extends ProboElement {
       return;
     }
 
-    this.root = this.findAncestor<ProboCookieBannerRoot>("-root");
+    this.root = this.findAncestor<ProboCookieBannerRoot>("probo-cookie-banner-root");
     if (!this.root) return;
 
+    this.validateTemplate();
+
     try {
       const config = this.root.bannerConfig;
       this.stamp(config.categories);
@@ -78,6 +80,22 @@ export class ProboCategoryList extends ProboElement {
     }
   }
 
+  private validateTemplate(): void {
+    if (!this.template) return;
+    const content = this.template.content;
+    const missing: string[] = [];
+    if (!content.querySelector("probo-category-toggle")) {
+      missing.push("probo-category-toggle");
+    }
+    if (!content.querySelector("probo-cookie-list")) {
+      missing.push("probo-cookie-list");
+    }
+    if (missing.length > 0) {
+      this.warn(`<probo-category-list> template is missing required elements: ${missing.join(", ")}`);
+      this.emitValidation(missing);
+    }
+  }
+
   private fillSlots(
     fragment: DocumentFragment,
     data: Record<string, string>,

packages/cookie-banner/src/components/preference-panel.ts

@@ -16,6 +16,11 @@ import { ProboElement } from "./base";
 import type { ProboRootElement } from "./base";
 import type { ProboCookieBannerRoot } from "./cookie-banner-root";
 
+const REQUIRED_CHILDREN = [
+  "probo-category-list",
+  "probo-save-button",
+] as const;
+
 export class ProboPreferencePanel extends ProboElement {
   private root: ProboRootElement | null = null;
   private onStateChange = (e: Event): void => {
@@ -44,6 +49,8 @@ export class ProboPreferencePanel extends ProboElement {
         }
       });
     }
+
+    this.scheduleValidation(() => this.validate());
   }
 
   disconnectedCallback(): void {
@@ -51,6 +58,19 @@ export class ProboPreferencePanel extends ProboElement {
       this.root.removeEventListener("probo-state", this.onStateChange);
     }
   }
+
+  private validate(): void {
+    const missing: string[] = [];
+    for (const tag of REQUIRED_CHILDREN) {
+      if (!this.querySelector(tag)) {
+        missing.push(tag);
+      }
+    }
+    if (missing.length > 0) {
+      this.warn(`<probo-preference-panel> is missing required children: ${missing.join(", ")}`);
+      this.emitValidation(missing);
+    }
+  }
 }
 
 export class ProboSaveButton extends ProboElement {