@sofidevo/astro-dynamic-header 3.0.1 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sofidevo/astro-dynamic-header",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "description": "A dynamic Astro header component that switches between floating and fullscreen styles",
   "type": "module",
   "main": "./src/index.ts",
@@ -14,25 +14,20 @@
     "./NavMenu": "./src/NavMenu.astro",
     "./MobileNav": "./src/MobileNav.astro",
     "./HamburgerButton": "./src/HamburgerButton.astro",
+    "./ChevronIcon": "./src/ChevronIcon.astro",
+    "./defaults": "./src/defaults.ts",
     "./Header.astro": "./src/Header.astro",
     "./NavMenu.astro": "./src/NavMenu.astro",
     "./MobileNav.astro": "./src/MobileNav.astro",
-    "./HamburgerButton.astro": "./src/HamburgerButton.astro"
+    "./HamburgerButton.astro": "./src/HamburgerButton.astro",
+    "./ChevronIcon.astro": "./src/ChevronIcon.astro"
   },
   "files": [
     "src/*.ts",
+    "src/scripts/*.ts",
     "src/*.astro",
     "README.md"
   ],
-  "scripts": {
-    "build": "astro build",
-    "dev": "astro dev",
-    "check": "astro check",
-    "check:watch": "astro check --watch",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
-  },
   "keywords": [
     "astro",
     "component",
@@ -50,13 +45,13 @@
   "author": "SofiDev contact@sofidev.top",
   "license": "MIT",
   "peerDependencies": {
-    "astro": "^6.0.6"
+    "astro": "^7.0.0"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.9",
+    "@astrojs/check": "^0.9.10",
     "@types/jsdom": "^21.1.7",
     "@vitest/coverage-v8": "^3.2.4",
-    "astro": "^6.3.7",
+    "astro": "^7.3.6",
     "jsdom": "^26.1.0",
     "typescript": "^5.0.0",
     "vitest": "^3.2.4"
@@ -68,5 +63,14 @@
   "bugs": {
     "url": "https://github.com/SofiDevO/astro-dynamic-header/issues"
   },
-  "homepage": "https://base-astro-psi.vercel.app/fullscreen-demo"
-}
+  "homepage": "https://base-astro-psi.vercel.app/fullscreen-demo",
+  "scripts": {
+    "build": "astro build",
+    "dev": "astro dev",
+    "check": "astro check",
+    "check:watch": "astro check --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  }
+}

package/src/ChevronIcon.astro

@@ -0,0 +1,33 @@
+---
+const { class: className, ...rest } = Astro.props;
+
+const viewBox = "0 0 24 24";
+const content = `<path class="hlhawq"/>`;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  class={className}
+  viewBox={viewBox}
+  {...rest}
+  set:html={content}
+/>
+
+<style is:inline>
+  /*
+   * base (resets) < components (ours) < utilities (consumer classNames).
+   * Order statement keeps it deterministic regardless of bundling order.
+   */
+  @layer theme, base, components, utilities;
+
+  @layer components {
+    .hlhawq {
+      fill: currentColor;
+      d: path(
+        "M11.646 15.146L5.854 9.354a.5.5 0 0 1 .353-.854h11.586a.5.5 0 0 1 .353.854l-5.793 5.792a.5.5 0 0 1-.707 0"
+      );
+    }
+  }
+</style>

package/src/HamburgerButton.astro

@@ -13,110 +13,118 @@ export interface Props {}
 </button>
 
 <style>
-  .hamburger {
-    display: none;
-    font: inherit;
-    overflow: visible;
-    margin: 0;
-    padding: 10px;
-    cursor: pointer;
-    transition-timing-function: linear;
-    transition-duration: 0.15s;
-    transition-property: opacity, filter, border-color;
-    text-transform: none;
-    color: inherit;
-    border: 1px solid
-      color-mix(in srgb, var(--text-color, #fff) 25%, transparent);
-    border-radius: 8px;
-    background-color: transparent;
-
-    @media screen and (max-width: 768px) {
-      z-index: 1000;
-      display: inline-block;
+  /*
+   * base (resets) < components (ours) < utilities (consumer classNames).
+   * Order statement keeps it deterministic regardless of bundling order.
+   */
+  @layer theme, base, components, utilities;
+
+  @layer components {
+    .hamburger {
+      display: none;
+      font: inherit;
+      overflow: visible;
+      margin: 0;
+      padding: 10px;
+      cursor: pointer;
+      transition-timing-function: linear;
+      transition-duration: 0.15s;
+      transition-property: opacity, filter, border-color;
+      text-transform: none;
+      color: inherit;
+      border: 1px solid
+        color-mix(in srgb, var(--text-color, #fff) 25%, transparent);
+      border-radius: 8px;
+      background-color: transparent;
+
+      @media screen and (max-width: 768px) {
+        z-index: 1000;
+        display: inline-block;
+      }
     }
-  }
 
-  .hamburger-box {
-    position: relative;
-    display: inline-block;
-    width: 40px;
-    height: 24px;
-  }
+    .hamburger-box {
+      position: relative;
+      display: inline-block;
+      width: 40px;
+      height: 24px;
+    }
 
-  .hamburger-inner {
-    top: 50%;
-    display: block;
-    margin-top: -2px;
-  }
+    .hamburger-inner {
+      top: 50%;
+      display: block;
+      margin-top: -2px;
+    }
 
-  .hamburger-inner:after,
-  .hamburger-inner:before {
-    display: block;
-    content: "";
-  }
+    .hamburger-inner:after,
+    .hamburger-inner:before {
+      display: block;
+      content: "";
+    }
 
-  .hamburger-inner,
-  .hamburger-inner::before,
-  .hamburger-inner::after {
-    background-color: var(--text-color, inherit);
-    position: absolute;
-    width: 40px;
-    height: 4px;
-    transition-timing-function: ease;
-    transition-duration: 0.15s;
-    transition-property: transform;
-    border-radius: 4px;
-  }
+    .hamburger-inner,
+    .hamburger-inner::before,
+    .hamburger-inner::after {
+      background-color: var(--text-color, inherit);
+      position: absolute;
+      width: 40px;
+      height: 4px;
+      transition-timing-function: ease;
+      transition-duration: 0.15s;
+      transition-property: transform;
+      border-radius: 4px;
+    }
 
-  .hamburger-inner:before {
-    top: -10px;
-  }
+    .hamburger-inner:before {
+      top: -10px;
+    }
 
-  .hamburger-inner:after {
-    bottom: -10px;
-  }
+    .hamburger-inner:after {
+      bottom: -10px;
+    }
 
-  .hamburger--collapse .hamburger-inner {
-    top: auto;
-    bottom: 0;
-    transition-delay: 0.13s;
-    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    transition-duration: 0.13s;
-  }
+    .hamburger--collapse .hamburger-inner {
+      top: auto;
+      bottom: 0;
+      transition-delay: 0.13s;
+      transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+      transition-duration: 0.13s;
+    }
 
-  .hamburger--collapse .hamburger-inner:before {
-    transition:
-      top 0.12s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s,
-      transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
+    .hamburger--collapse .hamburger-inner:before {
+      transition:
+        top 0.12s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s,
+        transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
 
-  .hamburger--collapse .hamburger-inner:after {
-    top: -20px;
-    transition:
-      top 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s,
-      opacity 0.1s linear;
-  }
+    .hamburger--collapse .hamburger-inner:after {
+      top: -20px;
+      transition:
+        top 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s,
+        opacity 0.1s linear;
+    }
 
-  /* Animation */
-  .hamburger--collapse.is-active .hamburger-inner {
-    transition-delay: 0.22s;
-    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    transform: translate3d(0, -10px, 0) rotate(-45deg);
-  }
+    /* Animation */
+    .hamburger--collapse.is-active .hamburger-inner {
+      transition-delay: 0.22s;
+      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+      transform: translate3d(0, -10px, 0) rotate(-45deg);
+    }
 
-  .hamburger--collapse.is-active .hamburger-inner:before {
-    top: 0;
-    transition:
-      top 0.1s cubic-bezier(0.33333, 0, 0.66667, 0.33333) 0.16s,
-      transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s;
-    transform: rotate(-90deg);
-  }
+    .hamburger--collapse.is-active .hamburger-inner:before {
+      top: 0;
+      transition:
+        top 0.1s cubic-bezier(0.33333, 0, 0.66667, 0.33333) 0.16s,
+        transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s;
+      transform: rotate(-90deg);
+    }
 
-  .hamburger--collapse.is-active .hamburger-inner:after {
-    top: 0;
-    transition:
-      top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
-      opacity 0.1s linear 0.22s;
-    opacity: 0;
+    .hamburger--collapse.is-active .hamburger-inner:after {
+      top: 0;
+      transition:
+        top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
+        opacity 0.1s linear 0.22s;
+      opacity: 0;
+    }
   }
 </style>

package/src/Header.astro

@@ -10,32 +10,10 @@ import type {
 } from "./index.js";
 
 export interface Props {
-  /**
-   * Layout style.
-   * - "floating": Centered with max-width and rounded corners.
-   * - "fullscreen": Full width with no border radius.
-   * @default "floating"
-   */
   headerType?: "floating" | "fullscreen";
-  /**
-   * Theme behavior.
-   * - "light": Force light mode.
-   * - "dark": Force dark mode.
-   * - "auto": Detects .dark class on the root element.
-   * @default "auto"
-   */
   preset?: "light" | "dark" | "auto";
-
-  /** Navigation links and structure. */
   navigation?: NavConfig;
-  /** Custom theme overrides for light and dark modes. */
   theme?: DualThemeConfig;
-  /**
-   * High-level CSS class overrides for structural wrapper elements.
-   * For fine-grained nav/logo element classes, use the nested `xxx__class`
-   * props inside `navigation` or `logo` instead.
-   * @example { header: "shadow-lg", container: "top-4" }
-   */
   classNames?: HeaderClassNames;
 }
 
@@ -57,7 +35,7 @@ if (import.meta.env.DEV) {
   }
 }
 
-// Map user theme overrides to CSS custom properties
+
 const inlineStyles: Record<string, string> = {};
 
 if (theme.light) {
@@ -75,7 +53,7 @@ if (theme.dark) {
   if (theme.dark.backdropBlur) inlineStyles["--d-blur"] = theme.dark.backdropBlur;
 }
 
-const zIndex = theme.light?.zIndex ?? 10;
+const zIndex = theme.light?.zIndex ?? theme.dark?.zIndex ?? 10;
 
 // Navigation configuration
 const {
@@ -92,45 +70,9 @@ const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
 ---
 
 <script>
-  class HamburgerController {
-    private hamburgerBtn: HTMLElement | null;
-    private mobileMenu: HTMLElement | null;
-    private links: NodeListOf<HTMLElement>;
-
-    constructor() {
-      this.hamburgerBtn = document.getElementById("hamburger-btn");
-      this.mobileMenu = document.getElementById("mobile-header-menu");
-      this.links = document.querySelectorAll(".mobile-menu__link");
-      this.init();
-    }
-
-    private init(): void {
-      if (this.hamburgerBtn && this.mobileMenu) {
-        this.hamburgerBtn.addEventListener("click", () => this.toggleMenu());
-        this.links.forEach((link) => {
-          link.addEventListener("click", () => this.closeMenu());
-        });
-      }
-    }
-
-    private closeMenu(): void {
-      if (this.hamburgerBtn && this.mobileMenu) {
-        this.hamburgerBtn.classList.remove("is-active");
-        this.mobileMenu.classList.remove("is-active");
-      }
-    }
-
-    private toggleMenu(): void {
-      if (this.hamburgerBtn && this.mobileMenu) {
-        this.hamburgerBtn.classList.toggle("is-active");
-        this.mobileMenu.classList.toggle("is-active");
-      }
-    }
-  }
+  import { initHamburger } from "./scripts/hamburger.js";
 
-  document.addEventListener("DOMContentLoaded", () => {
-    new HamburgerController();
-  });
+  initHamburger();
 </script>
 
 <div
@@ -155,6 +97,7 @@ const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
     <div class:list={["nav-menu-wrapper", classNames.nav]}>
       <NavMenu
         menuItems={menuItems}
+        homeUrl={homeUrl}
         header__menu__class={header__menu__class}
         header__item__class={header__item__class}
         menu__link__class={menu__link__class}
@@ -173,6 +116,7 @@ const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
 
     <MobileNav
       menuItems={menuItems}
+      homeUrl={homeUrl}
       type={headerType}
       mobileNav__class={classNames.mobileNav}
     >
@@ -187,118 +131,123 @@ const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
   </header>
 </div>
 
-<style is:inline>
-  .header {
-    --bg-color: var(--l-bg, rgba(255, 255, 255, 0.9));
-    --bg-color-opaque: var(--l-bg-opaque, rgb(255, 255, 255));
-    --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%;
-    justify-content: space-between;
-    padding: 1em 2em;
-    background-color: var(--bg-color);
-    backdrop-filter: var(--backdrop-blur);
-    -webkit-backdrop-filter: var(--backdrop-blur);
-    color: var(--text-color);
-    transition:
-      background-color 0.3s ease,
-      color 0.3s ease;
-
-    @media (width < 768px) {
-      align-self: flex-end;
-      padding: 0.4em;
-      margin: 0 auto;
+<style>
+  /*
+   * Cascade layers keep this component overridable:
+   *   base (resets/preflight) < components (ours) < utilities (your classNames)
+   * The order statement below makes that order deterministic no matter how
+   * the consumer's CSS is bundled. No `!important` is needed to override us.
+   */
+  @layer theme, base, components, utilities;
+
+  @layer components {
+    .header {
+      --bg-color: var(--l-bg, rgba(255, 255, 255, 0.9));
+      --bg-color-opaque: var(--l-bg-opaque, rgb(255, 255, 255));
+      --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%;
+      justify-content: space-between;
+      padding: 1em 2em;
+      background-color: var(--bg-color);
+      backdrop-filter: var(--backdrop-blur);
+      -webkit-backdrop-filter: var(--backdrop-blur);
+      color: var(--text-color);
+      transition:
+        background-color 0.3s ease,
+        color 0.3s ease;
+
+      @media (width < 768px) {
+        align-self: flex-end;
+        padding: 0.4em;
+        margin: 0 auto;
+      }
     }
-  }
-
-  /* Automatic dark mode detection via root class */
-  :root.dark .header:not(.header--force-light) {
-    --bg-color: var(--d-bg, #0d0d0dcc);
-    --bg-color-opaque: var(--d-bg-opaque, #0d0d0d);
-    --text-color: var(--d-text, #ffffff);
-    --accent-color: var(--d-accent, #00ffff);
-    --backdrop-blur: var(--d-blur, blur(20px));
-  }
 
-  /* Forced themes */
-  .header--force-dark {
-    --bg-color: var(--d-bg, #0d0d0dcc) !important;
-    --bg-color-opaque: var(--d-bg-opaque, #0d0d0d) !important;
-    --text-color: var(--d-text, #ffffff) !important;
-    --accent-color: var(--d-accent, #00ffff) !important;
-    --backdrop-blur: var(--d-blur, blur(20px)) !important;
-  }
+    /* Automatic dark mode detection via root class */
+    :root.dark .header:not(.header--force-light):not(.header--force-dark) {
+      --bg-color: var(--d-bg, #0d0d0dcc);
+      --bg-color-opaque: var(--d-bg-opaque, #0d0d0d);
+      --text-color: var(--d-text, #ffffff);
+      --accent-color: var(--d-accent, #00ffff);
+      --backdrop-blur: var(--d-blur, blur(20px));
+    }
 
-  .header--force-light {
-    --bg-color: var(--l-bg, rgba(255, 255, 255, 0.9)) !important;
-    --bg-color-opaque: var(--l-bg-opaque, rgb(255, 255, 255)) !important;
-    --text-color: var(--l-text, #1a1a1a) !important;
-    --accent-color: var(--l-accent, #3e1c71) !important;
-    --backdrop-blur: var(--l-blur, blur(20px)) !important;
-  }
+    /* Forced themes: higher specificity than .header, no !important needed */
+    .header.header--force-dark {
+      --bg-color: var(--d-bg, #0d0d0dcc);
+      --bg-color-opaque: var(--d-bg-opaque, #0d0d0d);
+      --text-color: var(--d-text, #ffffff);
+      --accent-color: var(--d-accent, #00ffff);
+      --backdrop-blur: var(--d-blur, blur(30px));
+    }
 
-  .header__container {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0 auto;
-    position: fixed;
-
-    @media (width < 768px) {
-      justify-content: flex-end;
-      align-items: flex-end;
+    .header.header--force-light {
+      --bg-color: var(--l-bg, rgba(255, 255, 255, 0.9));
+      --bg-color-opaque: var(--l-bg-opaque, rgb(255, 255, 255));
+      --text-color: var(--l-text, #1a1a1a);
+      --accent-color: var(--l-accent, #3e1c71);
+      --backdrop-blur: var(--l-blur, blur(30px));
     }
-  }
 
-  .header__container--floating {
-    padding: 0.5em;
-  }
+    .header__container {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 0 auto;
+      position: fixed;
 
-  .header__container--fullscreen {
-    padding: 0;
-  }
+      @media (width < 768px) {
+        justify-content: flex-end;
+        align-items: flex-end;
+      }
+    }
 
-  .header--floating {
-    max-width: 1100px;
-    border-radius: 20px;
-    padding: 0.7em 1em;
+    .header__container--floating {
+      padding: 0.5em;
+    }
 
-    @media (width < 768px) {
-      max-width: 95%;
+    .header__container--fullscreen {
+      padding: 0;
     }
-  }
 
-  .header--fullscreen {
-    border-radius: 0;
-    padding: 1em 2em;
+    .header--floating {
+      max-width: 1100px;
+      border-radius: 20px;
+      padding: 0.7em 1em;
 
-    @media (width < 768px) {
-      max-width: 100%;
-      padding: 0.8em 1em;
+      @media (width < 768px) {
+        max-width: 95%;
+      }
     }
-  }
 
+    .header--fullscreen {
+      border-radius: 0;
+      padding: 1em 2em;
 
-
-  .actions-desktop {
-    @media (width < 768px) {
-      display: none;
+      @media (width < 768px) {
+        max-width: 100%;
+        padding: 0.8em 1em;
+      }
     }
-  }
 
-  .actions-mobile {
-    margin-top: 20px;
-    @media (width >= 768px) {
-      display: none;
+    .actions-desktop {
+      @media (width < 768px) {
+        display: none;
+      }
     }
-  }
 
-  .header--fullscreen .mobile-header__menu.is-active {
-    transform: translate(0%);
+    .actions-mobile {
+      margin-top: 20px;
+
+      @media (width >= 768px) {
+        display: none;
+      }
+    }
   }
 </style>