From aca64f9a7d09917cc4361c81de03d50e4d5f0482 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Thu, 10 Mar 2022 15:19:32 +0100
Subject: [PATCH] feat: add support for unknown tab elements that extend the
 base class

---
 .../uui-tabs/lib/uui-tab-group.element.ts     | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/uui-tabs/lib/uui-tab-group.element.ts b/packages/uui-tabs/lib/uui-tab-group.element.ts
index 6126f04ae..710e4ef24 100644
--- a/packages/uui-tabs/lib/uui-tab-group.element.ts
+++ b/packages/uui-tabs/lib/uui-tab-group.element.ts
@@ -1,6 +1,6 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement } from 'lit';
-import { queryAssignedNodes } from 'lit/decorators.js';
+import { queryAssignedElements } from 'lit/decorators.js';
 
 import { UUITabElement } from './uui-tab.element';
 
@@ -26,13 +26,24 @@ export class UUITabGroupElement extends LitElement {
     `,
   ];
 
-  @queryAssignedNodes(undefined, true, 'uui-tab')
-  private slotNodes?: UUITabElement[];
+  @queryAssignedElements({
+    flatten: true,
+    selector: 'uui-tab, .uui-tab, [role=tab]',
+  })
+  private slotNodes?: HTMLElement[];
 
   private tabElements: UUITabElement[] = [];
 
   private setTabArray() {
-    this.tabElements = this.slotNodes ? this.slotNodes : [];
+    if (this.slotNodes) {
+      this.tabElements = this.slotNodes.filter(this.elementIsTab);
+    } else {
+      this.tabElements = [];
+    }
+  }
+
+  private elementIsTab(el: unknown): el is UUITabElement {
+    return el instanceof UUITabElement;
   }
 
   private onSlotChange() {
@@ -55,7 +66,7 @@ export class UUITabGroupElement extends LitElement {
 
   private onTabActive = (e: MouseEvent) => {
     //? should this contain stopPropagation?
-    const selectedElement: UUITabElement = e.target as UUITabElement;
+    const selectedElement = e.target as UUITabElement;
     selectedElement.active = true;
 
     const filtered = this.tabElements.filter(el => el !== selectedElement);