@sofidevo/astro-dynamic-header 5.0.1 → 5.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sofidevo/astro-dynamic-header",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "description": "A dynamic Astro header component that switches between floating and fullscreen styles",
   "type": "module",
   "main": "./src/index.ts",

package/src/Header.astro

@@ -119,7 +119,7 @@ const {
 const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
 ---
 
-<style is:inline>
+<style >
   @layer theme, base, components, utilities;
 </style>
 
@@ -188,7 +188,7 @@ const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
   </header>
 </div>
 
-<style>
+<style is:inline>
   /*
    * Cascade layers keep this component overridable:
    *   base (resets/preflight) < components (ours) < utilities (your classNames)
@@ -205,6 +205,7 @@ const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
       --text-color: var(--l-text, #1a1a1a);
       --accent-color: var(--l-accent, #3e1c71);
       --backdrop-blur: var(--l-blur, blur(20px));
+
       display: flex;
       align-items: center;
       width: 100%;
@@ -216,6 +217,7 @@ const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
       transition:
         background-color 0.3s ease,
         color 0.3s ease;
+        z-index: 200;
 
       @media (width < 768px) {
         align-self: flex-end;
@@ -285,7 +287,7 @@ const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
 
     .header--fullscreen {
       border-radius: 0;
-      padding: 1em 0.6rem;
+      padding:0.6rem 1em ;
 
       @media (width < 768px) {
         max-width: 100%;