Adjust tabs

examples/element-factory/src/tabs.svelte

@@ -1,16 +1,10 @@
 <script>
-  import { onMount } from 'svelte';
+  /** @type {Array<{ title: string, content: string, id?: string }>} */
-
   export let tabs = [];
-
-  let tabbedContent = null;
   let activeIndex = 0;
-
-  const isSelected = (index) => index === activeIndex;
-  const getTabIndex = (index) => (isSelected(index) ? 0 : -1);
 </script>
 
-<section bind:this={tabbedContent}>
+<section>
   <div role="tablist">
     {#each tabs as tab, i}
       {@const id = tab.id || i}

examples/element-factory/src/tabs.test.js

@@ -7,10 +7,7 @@ describe('Tabs', () => {
   beforeEach(() => {
     render(Tabs, {
       tabs: [
-        {
+        { label: 'Venue', content: 'We will be at this place!' },
-          label: 'Venue',
-          content: 'This year, we will be at this awesome venue',
-        },
         { label: 'Lineup', content: 'Check out our exciting lineup!' },
         { label: 'Tickets', content: 'Buy tickets today!' },
       ],
@@ -40,4 +37,9 @@ describe('Tabs', () => {
     const content = screen.getByRole('tabpanel', { hidden: false });
     expect(content).toHaveTextContent('lineup');
   });
+
+  it('should render the content of the first tab by default', async () => {
+    const content = screen.getByRole('tabpanel', { hidden: false });
+    expect(content).toHaveTextContent('We will be at this place!');
+  });
 });