sl tab wrappers

ts/main.ts

@@ -1,17 +1,29 @@
 import { ElemWrapper } from "./elemwrapper";
+import { SLTabGroup } from "./sltabgroup";
 
 async function main() {
     const root = new ElemWrapper(document.body);
-    const tabGroup = root.add("sl-tab-group");
 
-    tabGroup
-        .add("sl-tab", "slot", "nav", "panel", "tasks", "active", "")
-        .add("sl-icon", "name", "slash-circle", "style", "font-size: 20px");
+    const tabGroup = new SLTabGroup();
+    root.append(tabGroup);
 
-    tabGroup
-        .add("sl-tab", "slot", "nav", "panel", "tags")
-        .add("sl-icon", "name", "tags", "style", "font-size: 20px");
+    const [tasksTab, tasksPanel] = tabGroup.addTabSet("tasks");
+    
+    tasksTab
+        .add(
+            "sl-icon",
+            "name", "slash-circle",
+            "style", "font-size: 20px",
+        );
+
+    const [tagsTab, tagsPanel] = tabGroup.addTabSet("tags");
+    
+    tagsTab
+        .add(
+            "sl-icon",
+            "name", "tags",
+            "style", "font-size: 20px",
+        );
 }
 
-
 document.addEventListener("DOMContentLoaded", main);