Tabs Con pestañas cerrables

docs/components/tabs.md

@@ -416,4 +416,40 @@ const VariantsDemo = () => {
   ]);
 };
 Mount(VariantsDemo, '#demo-variants');
+```
+
+### Closable Tabs
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6"> <div class="card-body"> <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3> <div id="demo-closable" class="bg-base-100 p-6 rounded-xl border border-base-300"></div> </div> </div>
+
+```javascript
+let nextTabId = 4;
+
+const ClosableTabsDemo = () => {
+  const tabs = $([
+    { label: 'Tab 1', content: Div('Content 1') },  // ❌ quita active: true
+    { label: 'Tab 2', content: Div('Content 2'), closable: true },
+    { label: 'Tab 3', content: Div('Content 3'), closable: true }
+  ]);
+
+  // Opcional: si quieres que la primera pestaña esté activa al inicio,
+  // puedes hacerlo mediante una señal externa o simplemente confiar en que
+  // activeIndex empieza en 0 (que es el comportamiento por defecto).
+
+  const addTab = () => {
+    const newId = nextTabId++;
+    tabs([...tabs(), {
+      label: `Tab ${newId}`,
+      content: Div(`Content ${newId}`),
+      closable: true
+    }]);
+  };
+
+  return Div({ class: 'flex flex-col gap-4' }, [
+    Button({ class: 'btn btn-sm btn-outline mb-2', onclick: addTab }, 'Add Tab'),
+    Tabs({ items: tabs })
+  ]);
+};
+
+Mount(ClosableTabsDemo, '#demo-closable');
 ```