@fiscozen/navbar 0.1.11 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @fiscozen/navbar
 
+## 0.2.1
+
+### Patch Changes
+
+- 27ca593: Fix v0.2.0 CSS-variable defaults to match `@fiscozen/style` pixel spacing tokens (p-12 = 12px, h-56/w-56 = 56px, mr-32/mb-32 = 32px, gap-16 = 16px). The previous rem-based fallbacks (3rem/14rem/8rem/4rem) targeted stock Tailwind's scale, which made the navbar render ~4× larger than intended on consumers without explicit overrides — a visual regression vs. v0.1.x where the package emitted no competing CSS rules and the consumer's pixel-aligned Tailwind classes took effect directly. The variables themselves are unchanged; consumers that already set them via inline style or scoped CSS are unaffected.
+
+## 0.2.0
+
+### Minor Changes
+
+- c6445b3: Additive modernization of FzNavbar (no required consumer changes):
+  - Add `mobileBreakpoint` prop (number or `${number}px`) — replaces the need for consumers to mutate `@fiscozen/style`'s imported `breakpoints` object to align the navbar with their desktop threshold. The legacy `breakpoints` prop is deprecated and now emits a dev-mode warning when used.
+  - Add `position` prop (`'static' | 'fixed' | 'sticky'`) — replaces the `class="fixed top-0 left-0"` pattern consumers use at the call site.
+  - Add `respectSafeArea` prop (default `false`) — when enabled, adds `env(safe-area-inset-*)` to top/left/right padding for devices with notches. Honors the `--safe-area-inset-*` CSS-variable fallback used by Capacitor / Cordova apps.
+  - Add v-model support on `isMenuOpen` — the existing prop + `fznavbar:menuButtonClick` event continue to work; consumers can opt in to `v-model:isMenuOpen` for cleaner two-way binding.
+  - Add `#menu-button` slot with scope `{ isOpen, toggle }` — lets consumers replace the default `FzIconButton` hamburger on mobile.
+  - Expose layout values as CSS custom properties on the root (`--fz-navbar-padding`, `--fz-navbar-shadow`, `--fz-navbar-height`, `--fz-navbar-width`, `--fz-navbar-brand-gap`, `--fz-navbar-actions-gap`, `--fz-navbar-z-index`, `--fz-navbar-bg`). Defaults match the previous Tailwind utility values, so visual behavior is unchanged. Consumers can override per-instance via inline style without `!important` resets.
+  - Add Bootstrap interop hardening — root `<header>` carries `box-border`, `m-0`, `border-0` so the component renders identically with or without `tailwindcss-scoped-preflight` (`.twp`) scoping.
+  - Bug fix: on mobile, both `#notifications` and `#user-menu` slots render simultaneously when both are provided. The previous mutually-exclusive behavior was a hard-coded limitation.
+  - Default alignment fix: the root `<header>` and the inner navigation / actions flex containers now use `items-center`, so slot content with mixed heights (icon, button, avatar) sits visually centered along the cross-axis. Frontoffice previously worked around this on mobile by adding `items-center` at the call site.
+
 ## 0.1.11
 
 ### Patch Changes

package/dist/navbar.css

@@ -1,2 +1,2 @@
-.fz-icon-button-wrapper[data-v-84505903]>button{gap:0!important;min-width:0!important}.fz-icon-button-wrapper--backoffice[data-v-84505903]>button{padding-left:5px;padding-right:5px}.fz-icon-button-wrapper--frontoffice[data-v-84505903]>button{padding-left:11px;padding-right:11px}
+.fz-icon-button-wrapper[data-v-84505903]>button{gap:0!important;min-width:0!important}.fz-icon-button-wrapper--backoffice[data-v-84505903]>button{padding-left:5px;padding-right:5px}.fz-icon-button-wrapper--frontoffice[data-v-84505903]>button{padding-left:11px;padding-right:11px}.fz-navbar{z-index:var(--fz-navbar-z-index,10);padding:var(--fz-navbar-padding,12px);box-shadow:var(--fz-navbar-shadow,0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a);background:var(--fz-navbar-bg,transparent)}.fz-navbar.h-56{height:var(--fz-navbar-height,56px)}.fz-navbar.w-56{width:var(--fz-navbar-width,56px)}.fz-navbar>.mr-32{margin-right:var(--fz-navbar-brand-gap,32px)}.fz-navbar>.mb-32{margin-bottom:var(--fz-navbar-brand-gap,32px)}.fz-navbar>.gap-16{gap:var(--fz-navbar-actions-gap,16px)}.fz-navbar--fixed{position:fixed;top:0;left:0}.fz-navbar--sticky{position:sticky;top:0}.fz-navbar--safe-area{padding-top:calc(var(--fz-navbar-padding,12px) + max(env(safe-area-inset-top,0px), var(--safe-area-inset-top,0px)));padding-left:calc(var(--fz-navbar-padding,12px) + max(env(safe-area-inset-left,0px), var(--safe-area-inset-left,0px)));padding-right:calc(var(--fz-navbar-padding,12px) + max(env(safe-area-inset-right,0px), var(--safe-area-inset-right,0px)))}
 /*$vite$:1*/