@latte-macchiat-io/latte-vanilla-components 0.0.242 → 0.0.243

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.242",
+  "version": "0.0.243",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Header/HeaderToggleNav/index.tsx

@@ -4,14 +4,15 @@ import { bar, toggleNavButton } from './styles.css';
 
 export type HeaderToggleNavProps = {
   isOpen?: boolean;
+  onToggle: () => void;
 };
 
-export const HeaderToggleNav = ({ isOpen }: HeaderToggleNavProps) => {
+export const HeaderToggleNav = ({ isOpen, onToggle }: HeaderToggleNavProps) => {
   return (
-    <span className={toggleNavButton()}>
+    <button onClick={onToggle} aria-label="Toggle navigation" className={toggleNavButton()}>
       <span className={clsx(bar, isOpen && 'open')} />
       <span className={clsx(bar, isOpen && 'open')} />
       <span className={clsx(bar, isOpen && 'open')} />
-    </span>
+    </button>
   );
 };

package/src/components/Header/index.tsx

@@ -21,9 +21,9 @@ export const Header = ({ children, childrenOverlay, childrenToggleNav, isFixed =
       return childrenToggleNav({ isOpen: isNavOpen, onToggle: onToggleNav });
     }
     return (
-      <button onClick={onToggleNav} aria-label="Toggle navigation" className={headerToggleNav({ toggleNavVisibility })}>
-        {childrenToggleNav || <HeaderToggleNav isOpen={isNavOpen} />}
-      </button>
+      <div className={headerToggleNav({ toggleNavVisibility })}>
+        {childrenToggleNav || <HeaderToggleNav isOpen={isNavOpen} onToggle={onToggleNav} />}
+      </div>
     );
   };