fix(tabs): allow nested tabs

.changeset/five-tips-camp.md

@@ -0,0 +1,5 @@
+---
+'@lion/tabs': patch
+---
+
+Only look for tabs and panels as direct children, this allows to have nested tabs.

packages/tabs/src/LionTabs.js

@@ -184,12 +184,12 @@ export class LionTabs extends LitElement {
   __setupStore() {
     /** @type {StoreEntry[]} */
     this.__store = [];
-    const buttons = /** @type {HTMLElement[]} */ (Array.from(
+    const buttons = /** @type {HTMLElement[]} */ (Array.from(this.children)).filter(
-      this.querySelectorAll('[slot="tab"]'),
+      child => child.slot === 'tab',
-    ));
+    );
-    const panels = /** @type {HTMLElement[]} */ (Array.from(
+    const panels = /** @type {HTMLElement[]} */ (Array.from(this.children)).filter(
-      this.querySelectorAll('[slot="panel"]'),
+      child => child.slot === 'panel',
-    ));
+    );
     if (buttons.length !== panels.length) {
       // eslint-disable-next-line no-console
       console.warn(

packages/tabs/test/lion-tabs.test.js

@@ -80,6 +80,25 @@ describe('<lion-tabs>', () => {
       );
       stub.restore();
     });
+
+    it('only takes direct children into account', async () => {
+      const el = /** @type {LionTabs} */ (await fixture(html`
+        <lion-tabs>
+          <button slot="tab">tab 1</button>
+          <div slot="panel">
+            <button slot="tab">nested tab</button>
+            <div slot="panel">nested panel</div>
+          </div>
+          <button slot="tab">tab 2</button>
+          <div slot="panel">panel 2</div>
+        </lion-tabs>
+      `));
+      el.selectedIndex = 1;
+      const selectedTab = /** @type {Element} */ (Array.from(el.children).find(
+        child => child.slot === 'tab' && child.hasAttribute('selected'),
+      ));
+      expect(selectedTab.textContent).to.equal('tab 2');
+    });
   });
 
   describe('Tabs ([slot=tab])', () => {