Version 2.6.0

@freshjuice/zest@2.6.0 adds six new features for finer control over the consent UI, all opt-in and backwards-compatible.

Added

Per-category hidden flag

Set categories.analytics.hidden: true (or functional, marketing) to remove a consent category from the settings modal. Hidden categories are forced to false (rejected) — a visitor can never accept a toggle they cannot see. Essential cannot be hidden.

window.ZestConfig = {
  categories: { analytics: { hidden: true } }
};

Also accepted via data-hide-categories="analytics,marketing". Closes #5.

Changed

Dynamic button text color

Primary (fill) buttons no longer hardcode #ffffff as their text color. The new --zest-accent-text custom property uses CSS contrast-color() (Baseline April 2026) to let the browser pick black or white based on the accent color. On older browsers, a JS-computed WCAG luminance fallback ensures readable text. Light accent colors get dark text automatically.

New banner positions

Three new positions join the existing four: top-left, top-right, and center. The center position places the banner dead-center of the viewport with a fade-in scale animation (overlay-style).

Button layout option

New buttonLayout config controls how buttons are arranged:

• row (default) — all buttons in one line
• split — settings on the left, accept+reject grouped on the right
• split-modern — same layout, but settings is the primary button and accept+reject are secondary

window.ZestConfig = { buttonLayout: "split-modern" };

Backdrop blur

backdropBlur is a number in pixels (e.g. 8). 0 disables. Applies backdrop-filter: blur(Npx) to the modal overlay and hard wall.

Hard consent wall

hardWall: true renders a full-viewport overlay behind the banner that blocks all page interaction until the visitor accepts or rejects. Ensures provable awareness. The banner becomes aria-modal when active.

Unified --zest-overlay variable

The modal overlay and hard wall now share a single --zest-overlay CSS custom property for their background color. One variable, one color, everywhere.

Install

npm install @freshjuice/zest@2.6.0

Or via CDN:

<script src="https://cdn.jsdelivr.net/npm/@freshjuice/zest@2.6.0"></script>

All three packages bumped to 2.6.0: @freshjuice/zest, @freshjuice/zest-astro, @freshjuice/zest-eleventy.