Tabs Con pestañas cerrables

docs/components/drawer.md

@@ -275,7 +275,7 @@ const CartDrawer = () => {
           Button({ 
             class: 'btn btn-ghost btn-circle btn-sm',
             onclick: () => isOpen(false)
-          }, '✕')
+          }, Span('✕'))
         ])
       ]),
       Div({ class: 'flex-1 overflow-y-auto p-4' }, cart().length === 0 
@@ -290,12 +290,12 @@ const CartDrawer = () => {
               Button({ 
                 class: 'btn btn-xs btn-circle',
                 onclick: () => updateQuantity(item.id, -1)
-              }, '-'),
+              }, Span('-')),
               Span({ class: 'w-8 text-center' }, item.quantity),
               Button({ 
                 class: 'btn btn-xs btn-circle',
                 onclick: () => updateQuantity(item.id, 1)
-              }, '+')
+              }, Span('+'))
             ]),
             Span({ class: 'font-bold w-16 text-right' }, `$${item.price * item.quantity}`)
           ])
@@ -313,7 +313,7 @@ const CartDrawer = () => {
             Toast('Checkout initiated!', 'alert-success', 2000);
           },
           disabled: () => cart().length === 0
-        }, 'Checkout')
+        }, Span('Checkout'))
       ])
     ]),
     content: Div({ class: 'p-4' }, [
@@ -322,7 +322,7 @@ const CartDrawer = () => {
         Button({ 
           class: 'btn btn-primary',
           onclick: () => isOpen(true)
-        }, () => `🛒 Cart (${cart().length})`)
+        }, Span({ class: 'flex items-center gap-2' }, [Span('🛒'), Span(`Cart (${cart().length})`)]))
       ]),
       Div({ class: 'mt-4 grid grid-cols-2 gap-4' }, [
         Button({ 
@@ -331,7 +331,7 @@ const CartDrawer = () => {
             cart([...cart(), { id: Date.now(), name: 'New Product', price: 39, quantity: 1 }]);
             Toast('Added to cart!', 'alert-success', 1500);
           }
-        }, ['📦', 'Add to Cart'])
+        }, Span({ class: 'flex flex-col items-center gap-1' }, [Span('📦'), Span('Add to Cart')]))
       ])
     ])
   });