Complete 1 fase docs components

src/components/Fab.js

@@ -3,18 +3,15 @@ import { val } from "../core/utils.js";
 
 /** FAB (Floating Action Button) */
 export const Fab = (props) => {
-  const { icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
+  const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props;
 
   return $html(
     "div",
     {
       ...rest,
-      class: () => `fab fixed ${val(position)} flex flex-col-reverse items-end gap-3 z-[100] ${
-        props.class || ""
-      }`,
+      class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`,
     },
     [
-      // Botón principal
       $html(
         "div",
         {
@@ -28,7 +25,6 @@ export const Fab = (props) => {
         ],
       ),
 
-      // Acciones secundarias (se despliegan hacia arriba)
       ...val(actions).map((act) =>
         $html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
           act.label ? $html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
@@ -48,4 +44,4 @@ export const Fab = (props) => {
       ),
     ],
   );
-};
+};