Update new functions

src/components/Tabs.js

@@ -1,5 +1,5 @@
 // components/Tabs.js
-import { $, $html, $for } from "../sigpro.js";
+import { $, Tag, For } from "../sigpro.js";
 import { val, ui } from "../core/utils.js";
 
 /**
@@ -15,14 +15,14 @@ export const Tabs = (props) => {
   const itemsSignal = typeof items === "function" ? items : () => items || [];
   const activeIndex = $(0);
 
-  $watch(() => {
+  Watch(() => {
     const idx = itemsSignal().findIndex(it => val(it.active) === true);
     if (idx !== -1 && idx !== activeIndex()) activeIndex(idx);
   });
 
-  return $html("div", { ...rest, class: "w-full" }, [
+  return Tag("div", { ...rest, class: "w-full" }, [
     // 1. Tab List: Aplanamos los botones para que sean hijos directos
-    $html("div", { 
+    Tag("div", { 
       role: "tablist", 
       class: ui('tabs', className || 'tabs-box') 
     }, () => {
@@ -30,7 +30,7 @@ export const Tabs = (props) => {
       return list.map((it, idx) => {
         const isSelected = () => activeIndex() === idx;
         
-        const tab = $html("button", {
+        const tab = Tag("button", {
           role: "tab",
           class: () => ui("tab", isSelected() ? "tab-active" : ""),
           onclick: (e) => {
@@ -43,7 +43,7 @@ export const Tabs = (props) => {
         });
 
         // Mantenemos el watch para el label por si es dinámico
-        $watch(() => {
+        Watch(() => {
           const content = val(it.label);
           if (content instanceof Node) {
             tab.replaceChildren(content);
@@ -58,11 +58,11 @@ export const Tabs = (props) => {
 
     // 2. Tab Content: Aquí el display:contents no molesta tanto, 
     // pero lo aplanamos por consistencia
-    $html("div", { class: "tab-panels" }, () => {
+    Tag("div", { class: "tab-panels" }, () => {
       return itemsSignal().map((it, idx) => {
         const isVisible = () => activeIndex() === idx;
         
-        return $html("div", {
+        return Tag("div", {
           role: "tabpanel",
           class: "tab-content bg-base-100 border-base-300 p-6",
           style: () => isVisible() ? "display: block" : "display: none"