Draft documentation done

docs/_includes/components/tabs.njk

@@ -8,18 +8,16 @@
 %}
 {% if registerComponent('tabs') %}
 <script>
-  document.addEventListener('alpine:init', (initialTabIndex = 0) => {
-    Alpine.data('tabs', () => ({
+  document.addEventListener('alpine:init', () => {
+    Alpine.data('tabs', (initialTabIndex = 0) => ({
       activeTabIndex: initialTabIndex,
       tabs: [],
       panels: [],
 
       init() {
-        console.log("initialTabIndex", initialTabIndex);
         this.$nextTick(() => {
-          this.tabs = Array.from(this.$el.querySelectorAll('[role=tab]:not([disabled])'));
-          this.panels = Array.from(this.$el.querySelectorAll('[role=tabpanel]'));
-
+          this.tabs = Array.from(this.$el.querySelectorAll(':scope > [role=tablist] [role=tab]:not([disabled])'));
+          this.panels = Array.from(this.$el.querySelectorAll(':scope > [role=tabpanel]'));
           if (this.tabs.length > 0) {
             this.selectTab(this.tabs[initialTabIndex], false);
           }
@@ -76,7 +74,7 @@
 
 <div
   class="tabs {{ main_attrs.class }}"
-  x-data="tabs({{ default_tab_index }})"
+  x-data="tabs({{ default_tab_index - 1 }})"
   {% if id %}id="{{ id }}"{% endif %}
   {% for key, value in main_attrs %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}

docs/_includes/layouts/component.njk

@@ -22,7 +22,6 @@ layout: layouts/base.njk
             {% for item in items %}
               <li>
                 <a href="#{{ item.id }}">{{ item.label }}</a>
-                {# Recursively call the macro if there are children #}
                 {% if item.children and item.children.length %}
                   {{ renderToc(item.children) }}
                 {% endif %}

docs/_includes/partials/sidebar.njk

@@ -102,7 +102,10 @@
           <a
             href="/components/{{ component.id }}"
             class="h-8 flex items-center gap-2 rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0"
-            
+            hx-boost="true"
+            hx-select="#content"
+            hx-target="#content"
+            hx-swap="outerHTML"
           >
             {{ component.name }}
           </a>