@latte-macchiat-io/latte-vanilla-components 0.0.409 → 0.0.411

package/package.json

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

package/src/components/Form/Select/index.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { errorMessage, messageContainer, selectRecipe, selectWrapper, selectWrapperSelect } from './styles.css';
+import { errorMessage, messageContainer, selectLabel, selectRecipe, selectWrapper, selectWrapperSelect } from './styles.css';
 
 import { cn } from '../../../utils/styleOverride';
 
@@ -22,7 +22,11 @@ export const Select = ({ options, className, errors, label, name, required, onCh
 
   return (
     <div className={cn(selectRecipe(), className)}>
-      {label && <label htmlFor={name}>{label}</label>}
+      {label && (
+        <label htmlFor={name} className={selectLabel}>
+          {label}
+        </label>
+      )}
 
       <div className={selectWrapper}>
         <select id={name} name={name} required={required} onChange={onChange} className={selectWrapperSelect}>

package/src/components/Form/Select/styles.css.ts

@@ -26,6 +26,10 @@ export const selectWrapper = style({
   backgroundColor: themeContract.form.textField.backgroundColor,
 });
 
+export const selectLabel = style({
+  zIndex: 5,
+});
+
 export const selectWrapperSelect = style({
   border: 0,
   width: '100%',

package/src/components/Header/index.tsx

@@ -45,11 +45,9 @@ export const Header = ({ children, childrenOverlay, childrenToggleNav, isFixed =
   return (
     <>
       <header className={cn(headerRecipe({ isFixed }), className)}>
-        {childrenOverlay && <div className={headerOverlayRecipe({ isOpen: isNavOpen })}>{childrenOverlay}</div>}
-
         {children}
-
         {toggleNavVisibility !== 'hide' && renderToggleNav()}
+        {childrenOverlay && <div className={headerOverlayRecipe({ isOpen: isNavOpen })}>{childrenOverlay}</div>}
       </header>
 
       {isFixed && <div className={headerPlaceholder} />}