sl tab wrappers

js/elemwrapper.js

@@ -1,15 +1,49 @@
 export class ElemWrapper {
     elem;
+    appendChild;
+    setAttribute;
+    style;
+    classList;
+    addEventListener;
+    remove;
+    cloneNode;
+    contains;
+    querySelectorAll;
     constructor(elem) {
         this.elem = elem;
+        this.appendChild = this.elem.appendChild.bind(this.elem);
+        this.setAttribute = this.elem.setAttribute.bind(this.elem);
+        this.style = this.elem.style;
+        this.classList = this.elem.classList;
+        this.addEventListener = this.elem.addEventListener.bind(this.elem);
+        this.remove = this.elem.remove.bind(this.elem);
+        this.cloneNode = this.elem.cloneNode.bind(this.elem);
+        this.contains = this.elem.contains.bind(this.elem);
+        this.querySelectorAll = this.elem.querySelectorAll.bind(this.elem);
+    }
+    static create(tagName) {
+        return new ElemWrapper(document.createElement(tagName));
+    }
+    append(elem) {
+        this.appendChild(elem.elem);
+    }
+    appendAfterLastChild(tagName, elem) {
+        const children = this.querySelectorAll(tagName);
+        if (children.length > 0) {
+            const lastChild = children[children.length - 1];
+            lastChild.after(elem.elem);
+        }
+        else {
+            this.appendChild(elem.elem);
+        }
     }
     add(name, ...attrs) {
-        const elem = document.createElement(name);
-        this.elem.appendChild(elem);
+        const elem = ElemWrapper.create(name);
+        this.append(elem);
         for (let i = 0; i < attrs.length; i += 2) {
             elem.setAttribute(attrs[i], attrs[i + 1]);
         }
-        return new ElemWrapper(elem);
+        return elem;
     }
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbXdyYXBwZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9lbGVtd3JhcHBlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sV0FBVztJQUNBO0lBQXBCLFlBQW9CLElBQWlCO1FBQWpCLFNBQUksR0FBSixJQUFJLENBQWE7SUFBRyxDQUFDO0lBRXpDLEdBQUcsQ0FBQyxJQUFZLEVBQUUsR0FBRyxLQUFlO1FBQ2hDLE1BQU0sSUFBSSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDMUMsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFNUIsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLEtBQUssQ0FBQyxNQUFNLEVBQUUsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDO1lBQ3ZDLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxFQUFFLEtBQUssQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUM5QyxDQUFDO1FBRUQsT0FBTyxJQUFJLFdBQVcsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNqQyxDQUFDO0NBQ0oifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbXdyYXBwZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9lbGVtd3JhcHBlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sV0FBVztJQUNiLElBQUksQ0FBYztJQUNsQixXQUFXLENBQXVCO0lBQ2xDLFlBQVksQ0FBd0M7SUFDcEQsS0FBSyxDQUFzQjtJQUMzQixTQUFTLENBQWU7SUFDeEIsZ0JBQWdCLENBQWdJO0lBQ2hKLE1BQU0sQ0FBdUI7SUFDN0IsU0FBUyxDQUF1QztJQUNoRCxRQUFRLENBQTBCO0lBQ2xDLGdCQUFnQixDQUE2QztJQUNwRSxZQUFZLElBQWlCO1FBQ3pCLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUN6RCxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDM0QsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQztRQUM3QixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDO1FBQ3JDLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbkUsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQy9DLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNyRCxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbkQsSUFBSSxDQUFDLGdCQUFnQixHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN2RSxDQUFDO0lBRUQsTUFBTSxDQUFDLE1BQU0sQ0FBQyxPQUFlO1FBQ3pCLE9BQU8sSUFBSSxXQUFXLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDO0lBQzVELENBQUM7SUFFRCxNQUFNLENBQUMsSUFBaUI7UUFDcEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDaEMsQ0FBQztJQUVELG9CQUFvQixDQUFDLE9BQWUsRUFBRSxJQUFpQjtRQUNuRCxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxDQUFDLENBQUM7UUFFaEQsSUFBSSxRQUFRLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRSxDQUFDO1lBQ3RCLE1BQU0sU0FBUyxHQUFHLFFBQVEsQ0FBQyxRQUFRLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1lBQ2hELFNBQVMsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQy9CLENBQUM7YUFBTSxDQUFDO1lBQ0osSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDaEMsQ0FBQztJQUNMLENBQUM7SUFFRCxHQUFHLENBQUMsSUFBWSxFQUFFLEdBQUcsS0FBZTtRQUNoQyxNQUFNLElBQUksR0FBRyxXQUFXLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3RDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFbEIsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLEtBQUssQ0FBQyxNQUFNLEVBQUUsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDO1lBQ3ZDLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxFQUFFLEtBQUssQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUM5QyxDQUFDO1FBRUQsT0FBTyxJQUFJLENBQUM7SUFDaEIsQ0FBQztDQUNKIn0=

js/main.js

@@ -1,13 +1,15 @@
 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", "")
+    const tabGroup = new SLTabGroup();
+    root.append(tabGroup);
+    const [tasksTab, tasksPanel] = tabGroup.addTabSet("tasks");
+    tasksTab
         .add("sl-icon", "name", "slash-circle", "style", "font-size: 20px");
-    tabGroup
-        .add("sl-tab", "slot", "nav", "panel", "tags")
+    const [tagsTab, tagsPanel] = tabGroup.addTabSet("tags");
+    tagsTab
         .add("sl-icon", "name", "tags", "style", "font-size: 20px");
 }
 document.addEventListener("DOMContentLoaded", main);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL21haW4udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUU1QyxLQUFLLFVBQVUsSUFBSTtJQUNmLE1BQU0sSUFBSSxHQUFHLElBQUksV0FBVyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUM1QyxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLGNBQWMsQ0FBQyxDQUFDO0lBRTFDLFFBQVE7U0FDSCxHQUFHLENBQUMsUUFBUSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsRUFBRSxDQUFDO1NBQzVELEdBQUcsQ0FBQyxTQUFTLEVBQUUsTUFBTSxFQUFFLGNBQWMsRUFBRSxPQUFPLEVBQUUsaUJBQWlCLENBQUMsQ0FBQztJQUV4RSxRQUFRO1NBQ0gsR0FBRyxDQUFDLFFBQVEsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRSxNQUFNLENBQUM7U0FDN0MsR0FBRyxDQUFDLFNBQVMsRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxpQkFBaUIsQ0FBQyxDQUFDO0FBQ3BFLENBQUM7QUFHRCxRQUFRLENBQUMsZ0JBQWdCLENBQUMsa0JBQWtCLEVBQUUsSUFBSSxDQUFDLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL21haW4udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBRTFDLEtBQUssVUFBVSxJQUFJO0lBQ2YsTUFBTSxJQUFJLEdBQUcsSUFBSSxXQUFXLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBRTVDLE1BQU0sUUFBUSxHQUFHLElBQUksVUFBVSxFQUFFLENBQUM7SUFDbEMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUV0QixNQUFNLENBQUMsUUFBUSxFQUFFLFVBQVUsQ0FBQyxHQUFHLFFBQVEsQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLENBQUM7SUFFM0QsUUFBUTtTQUNILEdBQUcsQ0FDQSxTQUFTLEVBQ1QsTUFBTSxFQUFFLGNBQWMsRUFDdEIsT0FBTyxFQUFFLGlCQUFpQixDQUM3QixDQUFDO0lBRU4sTUFBTSxDQUFDLE9BQU8sRUFBRSxTQUFTLENBQUMsR0FBRyxRQUFRLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRXhELE9BQU87U0FDRixHQUFHLENBQ0EsU0FBUyxFQUNULE1BQU0sRUFBRSxNQUFNLEVBQ2QsT0FBTyxFQUFFLGlCQUFpQixDQUM3QixDQUFDO0FBQ1YsQ0FBQztBQUVELFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxrQkFBa0IsRUFBRSxJQUFJLENBQUMsQ0FBQyJ9

js/sltab.js

@@ -0,0 +1,9 @@
+import { ElemWrapper } from "./elemwrapper";
+export class SLTab extends ElemWrapper {
+    constructor(panel) {
+        super(document.createElement("sl-tab"));
+        this.setAttribute("panel", panel);
+        this.setAttribute("slot", "nav");
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2x0YWIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9zbHRhYi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTVDLE1BQU0sT0FBTyxLQUFNLFNBQVEsV0FBVztJQUNsQyxZQUFZLEtBQWE7UUFDckIsS0FBSyxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQztRQUN4QyxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsQ0FBQztRQUNsQyxJQUFJLENBQUMsWUFBWSxDQUFDLE1BQU0sRUFBRSxLQUFLLENBQUMsQ0FBQztJQUNyQyxDQUFDO0NBQ0oifQ==

js/sltabgroup.js

@@ -0,0 +1,25 @@
+import { ElemWrapper } from "./elemwrapper";
+import { SLTab } from "./sltab";
+import { SLTabPanel } from "./sltabpanel";
+export class SLTabGroup extends ElemWrapper {
+    constructor() {
+        super(document.createElement("sl-tab-group"));
+    }
+    addTab(panel) {
+        const tab = new SLTab(panel);
+        this.appendAfterLastChild("sl-tab", tab);
+        return tab;
+    }
+    addTabPanel(name) {
+        const tabPanel = new SLTabPanel(name);
+        this.appendAfterLastChild("sl-tab-panel", tabPanel);
+        return tabPanel;
+    }
+    addTabSet(name) {
+        return [
+            this.addTab(name),
+            this.addTabPanel(name),
+        ];
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2x0YWJncm91cC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL3NsdGFiZ3JvdXAudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1QyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sU0FBUyxDQUFDO0FBQ2hDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDMUMsTUFBTSxPQUFPLFVBQVcsU0FBUSxXQUFXO0lBQ3ZDO1FBQ0ksS0FBSyxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQztJQUNsRCxDQUFDO0lBRUQsTUFBTSxDQUFDLEtBQWE7UUFDaEIsTUFBTSxHQUFHLEdBQUcsSUFBSSxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDN0IsSUFBSSxDQUFDLG9CQUFvQixDQUFDLFFBQVEsRUFBRSxHQUFHLENBQUMsQ0FBQztRQUN6QyxPQUFPLEdBQUcsQ0FBQztJQUNmLENBQUM7SUFFRCxXQUFXLENBQUMsSUFBWTtRQUNwQixNQUFNLFFBQVEsR0FBRyxJQUFJLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUN0QyxJQUFJLENBQUMsb0JBQW9CLENBQUMsY0FBYyxFQUFFLFFBQVEsQ0FBQyxDQUFDO1FBQ3BELE9BQU8sUUFBUSxDQUFDO0lBQ3BCLENBQUM7SUFFRCxTQUFTLENBQUMsSUFBWTtRQUNsQixPQUFPO1lBQ0gsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUM7WUFDakIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUM7U0FDekIsQ0FBQztJQUNOLENBQUM7Q0FDSiJ9

js/sltabpanel.js

@@ -0,0 +1,8 @@
+import { ElemWrapper } from "./elemwrapper";
+export class SLTabPanel extends ElemWrapper {
+    constructor(name) {
+        super(document.createElement("sl-tab-panel"));
+        this.setAttribute("name", name);
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2x0YWJwYW5lbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL3NsdGFicGFuZWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUU1QyxNQUFNLE9BQU8sVUFBVyxTQUFRLFdBQVc7SUFDdkMsWUFBWSxJQUFZO1FBQ3BCLEtBQUssQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUM7UUFDOUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDcEMsQ0FBQztDQUNKIn0=

static/app.mjs

@@ -1,25 +1,101 @@
 // js/elemwrapper.js
 var ElemWrapper = class _ElemWrapper {
   elem;
+  appendChild;
+  setAttribute;
+  style;
+  classList;
+  addEventListener;
+  remove;
+  cloneNode;
+  contains;
+  querySelectorAll;
   constructor(elem) {
     this.elem = elem;
+    this.appendChild = this.elem.appendChild.bind(this.elem);
+    this.setAttribute = this.elem.setAttribute.bind(this.elem);
+    this.style = this.elem.style;
+    this.classList = this.elem.classList;
+    this.addEventListener = this.elem.addEventListener.bind(this.elem);
+    this.remove = this.elem.remove.bind(this.elem);
+    this.cloneNode = this.elem.cloneNode.bind(this.elem);
+    this.contains = this.elem.contains.bind(this.elem);
+    this.querySelectorAll = this.elem.querySelectorAll.bind(this.elem);
+  }
+  static create(tagName) {
+    return new _ElemWrapper(document.createElement(tagName));
+  }
+  append(elem) {
+    this.appendChild(elem.elem);
+  }
+  appendAfterLastChild(tagName, elem) {
+    const children = this.querySelectorAll(tagName);
+    if (children.length > 0) {
+      const lastChild = children[children.length - 1];
+      lastChild.after(elem.elem);
+    } else {
+      this.appendChild(elem.elem);
+    }
   }
   add(name, ...attrs) {
-    const elem = document.createElement(name);
-    this.elem.appendChild(elem);
+    const elem = _ElemWrapper.create(name);
+    this.append(elem);
     for (let i = 0; i < attrs.length; i += 2) {
       elem.setAttribute(attrs[i], attrs[i + 1]);
     }
-    return new _ElemWrapper(elem);
+    return elem;
+  }
+};
+
+// js/sltab.js
+var SLTab = class extends ElemWrapper {
+  constructor(panel) {
+    super(document.createElement("sl-tab"));
+    this.setAttribute("panel", panel);
+    this.setAttribute("slot", "nav");
+  }
+};
+
+// js/sltabpanel.js
+var SLTabPanel = class extends ElemWrapper {
+  constructor(name) {
+    super(document.createElement("sl-tab-panel"));
+    this.setAttribute("name", name);
+  }
+};
+
+// js/sltabgroup.js
+var SLTabGroup = class extends ElemWrapper {
+  constructor() {
+    super(document.createElement("sl-tab-group"));
+  }
+  addTab(panel) {
+    const tab = new SLTab(panel);
+    this.appendAfterLastChild("sl-tab", tab);
+    return tab;
+  }
+  addTabPanel(name) {
+    const tabPanel = new SLTabPanel(name);
+    this.appendAfterLastChild("sl-tab-panel", tabPanel);
+    return tabPanel;
+  }
+  addTabSet(name) {
+    return [
+      this.addTab(name),
+      this.addTabPanel(name)
+    ];
   }
 };
 
 // js/main.js
 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");
-  tabGroup.add("sl-tab", "slot", "nav", "panel", "tags").add("sl-icon", "name", "tags", "style", "font-size: 20px");
+  const tabGroup = new SLTabGroup();
+  root.append(tabGroup);
+  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);
-//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vdHMvZWxlbXdyYXBwZXIudHMiLCAiLi4vdHMvbWFpbi50cyJdLAogICJzb3VyY2VzQ29udGVudCI6IFtudWxsLCBudWxsXSwKICAibWFwcGluZ3MiOiAiO0FBQU0sSUFBTyxjQUFQLE1BQU8sYUFBVztFQUNBO0VBQXBCLFlBQW9CLE1BQWlCO0FBQWpCLFNBQUEsT0FBQTtFQUFvQjtFQUV4QyxJQUFJLFNBQWlCLE9BQWU7QUFDaEMsVUFBTSxPQUFPLFNBQVMsY0FBYyxJQUFJO0FBQ3hDLFNBQUssS0FBSyxZQUFZLElBQUk7QUFFMUIsYUFBUyxJQUFJLEdBQUcsSUFBSSxNQUFNLFFBQVEsS0FBSyxHQUFHO0FBQ3RDLFdBQUssYUFBYSxNQUFNLENBQUMsR0FBRyxNQUFNLElBQUksQ0FBQyxDQUFDO0lBQzVDO0FBRUEsV0FBTyxJQUFJLGFBQVksSUFBSTtFQUMvQjs7OztBQ1ZKLGVBQWUsT0FBSTtBQUNmLFFBQU0sT0FBTyxJQUFJLFlBQVksU0FBUyxJQUFJO0FBQzFDLFFBQU0sV0FBVyxLQUFLLElBQUksY0FBYztBQUV4QyxXQUNLLElBQUksVUFBVSxRQUFRLE9BQU8sU0FBUyxTQUFTLFVBQVUsRUFBRSxFQUMzRCxJQUFJLFdBQVcsUUFBUSxnQkFBZ0IsU0FBUyxpQkFBaUI7QUFFdEUsV0FDSyxJQUFJLFVBQVUsUUFBUSxPQUFPLFNBQVMsTUFBTSxFQUM1QyxJQUFJLFdBQVcsUUFBUSxRQUFRLFNBQVMsaUJBQWlCO0FBQ2xFO0FBR0EsU0FBUyxpQkFBaUIsb0JBQW9CLElBQUk7IiwKICAibmFtZXMiOiBbXQp9Cg==
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vdHMvZWxlbXdyYXBwZXIudHMiLCAiLi4vdHMvc2x0YWIudHMiLCAiLi4vdHMvc2x0YWJwYW5lbC50cyIsICIuLi90cy9zbHRhYmdyb3VwLnRzIiwgIi4uL3RzL21haW4udHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbbnVsbCwgbnVsbCwgbnVsbCwgbnVsbCwgbnVsbF0sCiAgIm1hcHBpbmdzIjogIjtBQUFNLElBQU8sY0FBUCxNQUFPLGFBQVc7RUFDYjtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNQLFlBQVksTUFBaUI7QUFDekIsU0FBSyxPQUFPO0FBQ1osU0FBSyxjQUFjLEtBQUssS0FBSyxZQUFZLEtBQUssS0FBSyxJQUFJO0FBQ3ZELFNBQUssZUFBZSxLQUFLLEtBQUssYUFBYSxLQUFLLEtBQUssSUFBSTtBQUN6RCxTQUFLLFFBQVEsS0FBSyxLQUFLO0FBQ3ZCLFNBQUssWUFBWSxLQUFLLEtBQUs7QUFDM0IsU0FBSyxtQkFBbUIsS0FBSyxLQUFLLGlCQUFpQixLQUFLLEtBQUssSUFBSTtBQUNqRSxTQUFLLFNBQVMsS0FBSyxLQUFLLE9BQU8sS0FBSyxLQUFLLElBQUk7QUFDN0MsU0FBSyxZQUFZLEtBQUssS0FBSyxVQUFVLEtBQUssS0FBSyxJQUFJO0FBQ25ELFNBQUssV0FBVyxLQUFLLEtBQUssU0FBUyxLQUFLLEtBQUssSUFBSTtBQUNqRCxTQUFLLG1CQUFtQixLQUFLLEtBQUssaUJBQWlCLEtBQUssS0FBSyxJQUFJO0VBQ3JFO0VBRUEsT0FBTyxPQUFPLFNBQWU7QUFDekIsV0FBTyxJQUFJLGFBQVksU0FBUyxjQUFjLE9BQU8sQ0FBQztFQUMxRDtFQUVBLE9BQU8sTUFBaUI7QUFDcEIsU0FBSyxZQUFZLEtBQUssSUFBSTtFQUM5QjtFQUVBLHFCQUFxQixTQUFpQixNQUFpQjtBQUNuRCxVQUFNLFdBQVcsS0FBSyxpQkFBaUIsT0FBTztBQUU5QyxRQUFJLFNBQVMsU0FBUyxHQUFHO0FBQ3JCLFlBQU0sWUFBWSxTQUFTLFNBQVMsU0FBUyxDQUFDO0FBQzlDLGdCQUFVLE1BQU0sS0FBSyxJQUFJO0lBQzdCLE9BQU87QUFDSCxXQUFLLFlBQVksS0FBSyxJQUFJO0lBQzlCO0VBQ0o7RUFFQSxJQUFJLFNBQWlCLE9BQWU7QUFDaEMsVUFBTSxPQUFPLGFBQVksT0FBTyxJQUFJO0FBQ3BDLFNBQUssT0FBTyxJQUFJO0FBRWhCLGFBQVMsSUFBSSxHQUFHLElBQUksTUFBTSxRQUFRLEtBQUssR0FBRztBQUN0QyxXQUFLLGFBQWEsTUFBTSxDQUFDLEdBQUcsTUFBTSxJQUFJLENBQUMsQ0FBQztJQUM1QztBQUVBLFdBQU87RUFDWDs7OztBQ2xERSxJQUFPLFFBQVAsY0FBcUIsWUFBVztFQUNsQyxZQUFZLE9BQWE7QUFDckIsVUFBTSxTQUFTLGNBQWMsUUFBUSxDQUFDO0FBQ3RDLFNBQUssYUFBYSxTQUFTLEtBQUs7QUFDaEMsU0FBSyxhQUFhLFFBQVEsS0FBSztFQUNuQzs7OztBQ0xFLElBQU8sYUFBUCxjQUEwQixZQUFXO0VBQ3ZDLFlBQVksTUFBWTtBQUNwQixVQUFNLFNBQVMsY0FBYyxjQUFjLENBQUM7QUFDNUMsU0FBSyxhQUFhLFFBQVEsSUFBSTtFQUNsQzs7OztBQ0hFLElBQU8sYUFBUCxjQUEwQixZQUFXO0VBQ3ZDLGNBQUE7QUFDSSxVQUFNLFNBQVMsY0FBYyxjQUFjLENBQUM7RUFDaEQ7RUFFQSxPQUFPLE9BQWE7QUFDaEIsVUFBTSxNQUFNLElBQUksTUFBTSxLQUFLO0FBQzNCLFNBQUsscUJBQXFCLFVBQVUsR0FBRztBQUN2QyxXQUFPO0VBQ1g7RUFFQSxZQUFZLE1BQVk7QUFDcEIsVUFBTSxXQUFXLElBQUksV0FBVyxJQUFJO0FBQ3BDLFNBQUsscUJBQXFCLGdCQUFnQixRQUFRO0FBQ2xELFdBQU87RUFDWDtFQUVBLFVBQVUsTUFBWTtBQUNsQixXQUFPO01BQ0gsS0FBSyxPQUFPLElBQUk7TUFDaEIsS0FBSyxZQUFZLElBQUk7O0VBRTdCOzs7O0FDdEJKLGVBQWUsT0FBSTtBQUNmLFFBQU0sT0FBTyxJQUFJLFlBQVksU0FBUyxJQUFJO0FBRTFDLFFBQU0sV0FBVyxJQUFJLFdBQVU7QUFDL0IsT0FBSyxPQUFPLFFBQVE7QUFFcEIsUUFBTSxDQUFDLFVBQVUsVUFBVSxJQUFJLFNBQVMsVUFBVSxPQUFPO0FBRXpELFdBQ0ssSUFDRyxXQUNBLFFBQVEsZ0JBQ1IsU0FBUyxpQkFBaUI7QUFHbEMsUUFBTSxDQUFDLFNBQVMsU0FBUyxJQUFJLFNBQVMsVUFBVSxNQUFNO0FBRXRELFVBQ0ssSUFDRyxXQUNBLFFBQVEsUUFDUixTQUFTLGlCQUFpQjtBQUV0QztBQUVBLFNBQVMsaUJBQWlCLG9CQUFvQixJQUFJOyIsCiAgIm5hbWVzIjogW10KfQo=

ts/elemwrapper.ts

@@ -1,14 +1,54 @@
 export class ElemWrapper {
-    constructor(private elem: HTMLElement) {}
+    public elem: HTMLElement;
+    public appendChild: (node: Node) => void;
+    public setAttribute: (name: string, value: string) => void;
+    public style: CSSStyleDeclaration;
+    public classList: DOMTokenList;
+    public addEventListener: (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined) => void;
+    public remove: (node: Node) => void;
+    public cloneNode: (deep?: boolean | undefined) => Node;
+    public contains: (node: Node) => boolean;
+    public querySelectorAll: (selectors: string) => NodeListOf<Element>;
+    constructor(elem: HTMLElement) {
+        this.elem = elem;
+        this.appendChild = this.elem.appendChild.bind(this.elem);
+        this.setAttribute = this.elem.setAttribute.bind(this.elem);
+        this.style = this.elem.style;
+        this.classList = this.elem.classList;
+        this.addEventListener = this.elem.addEventListener.bind(this.elem);
+        this.remove = this.elem.remove.bind(this.elem);
+        this.cloneNode = this.elem.cloneNode.bind(this.elem);
+        this.contains = this.elem.contains.bind(this.elem);
+        this.querySelectorAll = this.elem.querySelectorAll.bind(this.elem);
+    }
+
+    static create(tagName: string) {
+        return new ElemWrapper(document.createElement(tagName));
+    }
+    
+    append(elem: ElemWrapper) {
+        this.appendChild(elem.elem);
+    }
+
+    appendAfterLastChild(tagName: string, elem: ElemWrapper) {
+        const children = this.querySelectorAll(tagName);
+          
+        if (children.length > 0) {
+            const lastChild = children[children.length - 1];
+            lastChild.after(elem.elem);
+        } else {
+            this.appendChild(elem.elem);
+        }
+    }
 
     add(name: string, ...attrs: string[]): ElemWrapper {
-        const elem = document.createElement(name);
-        this.elem.appendChild(elem);
+        const elem = ElemWrapper.create(name);
+        this.append(elem);
 
         for (let i = 0; i < attrs.length; i += 2) {
             elem.setAttribute(attrs[i], attrs[i + 1]);
         }
 
-        return new ElemWrapper(elem);
+        return elem;
     }
 }

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);

ts/sltab.ts

@@ -0,0 +1,9 @@
+import { ElemWrapper } from "./elemwrapper";
+
+export class SLTab extends ElemWrapper {
+    constructor(panel: string) {
+        super(document.createElement("sl-tab"));
+        this.setAttribute("panel", panel);
+        this.setAttribute("slot", "nav");
+    }
+}

ts/sltabgroup.ts

@@ -0,0 +1,27 @@
+import { ElemWrapper } from "./elemwrapper";
+import { SLTab } from "./sltab";
+import { SLTabPanel } from "./sltabpanel";
+export class SLTabGroup extends ElemWrapper {
+    constructor() {
+        super(document.createElement("sl-tab-group"));
+    }
+
+    addTab(panel: string): SLTab {
+        const tab = new SLTab(panel);
+        this.appendAfterLastChild("sl-tab", tab);
+        return tab;
+    }
+
+    addTabPanel(name: string): SLTabPanel {
+        const tabPanel = new SLTabPanel(name);
+        this.appendAfterLastChild("sl-tab-panel", tabPanel);
+        return tabPanel;
+    }
+
+    addTabSet(name: string): [SLTab, SLTabPanel] {
+        return [
+            this.addTab(name),
+            this.addTabPanel(name),
+        ];
+    }
+}

ts/sltabpanel.ts

@@ -0,0 +1,8 @@
+import { ElemWrapper } from "./elemwrapper";
+
+export class SLTabPanel extends ElemWrapper {
+    constructor(name: string) {
+        super(document.createElement("sl-tab-panel"));
+        this.setAttribute("name", name);
+    }
+}