consentric 1.0.0 → 2.0.0

package/README.md

@@ -59,16 +59,21 @@ npm run example   # opens http://localhost:5173
 - **Google Consent Mode v2** — pushes `default` (all denied) on mount and `update` on
   the visitor's choice, mapping the four categories to the right Consent Mode signals.
 - **Persistent & versioned** — the choice is stored in a cookie for one year and
-  restored on the next visit; bumping the schema version re-prompts everyone.
+  restored on the next visit; the stored value is versioned, so a future release can
+  re-prompt everyone after a policy change.
 - **Familiar tabbed UX** — Consent / Details / About tabs, four categories, a per-cookie
   accordion. Recognisable to visitors, nothing for you to design.
 - **10 built-in languages** — English (default), German, French, Spanish, Italian,
   Portuguese, Dutch, Polish, Czech and Slovak, picked with one `locale` prop. Every
   category, cookie row and UI string is also overridable for any other language.
+- **Light & dark** — follows the OS `prefers-color-scheme` by default; ships light and
+  dark palettes, or pass your own (one for both themes, or `{ light, dark }`). Borders and
+  fills derive from your `text` colour, so a light theme needs no host-CSS overrides.
 - **Accessible** — focus-trapped modal, focus restored on close, arrow-key tab
   navigation, full ARIA wiring, and `prefers-reduced-motion` support.
-- **No dark patterns** — "Allow all" and "Deny" get equal visual weight, the way EU
-  regulators expect a consent dialog to behave.
+- **No dark patterns by default** — "Allow all" and "Deny" get equal visual weight, the
+  way EU regulators expect a consent dialog to behave. If you want the familiar
+  emphasised "Allow all", opt in with `primaryAction="allowAll"`.
 - **Works with Next.js** — ships as a Client Component (`"use client"`), so it drops
   straight into the App Router.
 - **Zero dependencies, zero Tailwind** — styles are scoped and injected; colours come
@@ -114,9 +119,14 @@ the root of your app.
 | `locale` | `'en'` | Built-in language pack (`de`, `fr`, `es`, `it`, `pt`, `nl`, `pl`, `cs`, `sk`). English is the default and fallback; `pt-BR` resolves to `pt`. |
 | `defaultOpen` | `false` | Open the dialog on mount even if a choice is stored (for previews/Storybook). |
 | `defaultTab` | `'consent'` | Tab to show first: `consent` / `details` / `about`. |
-| `colors` | dark theme | `{ brand, brandDeep, surface, surfaceAlt, text, textMuted, backdrop, onBrand }`. |
+| `theme` | `'auto'` | `'auto'` follows the OS `prefers-color-scheme` (and re-renders on change); `'light'` / `'dark'` pin it. |
+| `colors` | light + dark | One palette (applied to both themes) **or** `{ light, dark }`. See [Light & dark themes](#light--dark-themes). |
+| `logo` | — | Brand mark. A single node, or `{ light, dark }` to swap it by theme. |
 | `categories` | built-in EN | Per-category content overrides — see below. |
 | `labels` | built-in EN | UI string overrides for localisation — see below. |
+| `primaryAction` | `'save'` | Which button gets brand emphasis: `'save'` (only once a category is on — equal-weight otherwise), `'allowAll'` (always), or `'none'`. |
+| `deferOpen` | `true` | Defer the first-visit auto-open past first paint (avoids Lighthouse `NO_LCP`). Ignored when `defaultOpen`. |
+| `fontFamily` | system stack | Override the font stack. |
 | `onChange` | — | `(choices) => void`, fired after the user makes or changes a choice. |
 | `autoClearCookies` | `true` | When a category is denied or revoked, delete the cookies declared in its table (names support a trailing `*` wildcard). The consent cookie is never touched. |
 
@@ -191,22 +201,68 @@ language.
 />
 ```
 
-## Light theme
+## Light & dark themes
 
-Defaults assume a dark `surface`. For a light theme, also set `onBrand` (the text/icon
-colour on top of the primary button) so it keeps enough contrast.
+The banner ships **built-in light and dark palettes** and, by default (`theme="auto"`),
+follows the visitor's OS `prefers-color-scheme` — re-rendering if they flip it. So the
+zero-config banner is light on a light OS and dark on a dark one. Pin it with
+`theme="light"` or `theme="dark"`.
+
+Borders, toggle tracks, badges and cookie rows are derived from `text` (via `color-mix`),
+so a **light theme works from just `brand` / `surface` / `text`** — no host-CSS overrides,
+nothing washed out on a light surface.
+
+### One palette, or one per theme
+
+Pass a **single palette** and it applies to both themes (this is the v1 behaviour — if you
+already pass `colors`, nothing changes):
+
+```tsx
+<CookieConsent colors={{ brand: '#FAE762', surface: '#050506', text: '#EDEDEF', onBrand: '#0a0a0c' }} />
+```
+
+Or pass **`{ light, dark }`** and the component switches with the theme:
 
 ```tsx
 <CookieConsent
+  theme="auto"                     // 'auto' | 'light' | 'dark'
   colors={{
-    brand: '#2563eb',
-    brandDeep: '#1d4ed8',
-    surface: '#ffffff',
-    surfaceAlt: 'rgba(0,0,0,0.04)',
-    text: '#0f172a',
-    textMuted: '#64748b',
-    backdrop: 'rgba(15,23,42,0.4)',
-    onBrand: '#ffffff',
+    light: { brand: '#2563eb', surface: '#ffffff', text: '#0f172a', textMuted: '#64748b' },
+    dark:  { brand: '#3b82f6', surface: '#0b1220', text: '#e5e7eb', textMuted: '#94a3b8' },
+  }}
+/>
+```
+
+Each palette key is optional and falls back to the built-in default for that theme:
+
+| Key | What it colours |
+|---|---|
+| `brand` / `brandDeep` | Primary button, active tab, toggle-on, links; `brandDeep` is the hover. |
+| `surface` / `surfaceAlt` | Card background / the raised category tiles. |
+| `text` / `textMuted` | Primary / secondary text. Overlays (borders, tracks, badges) derive from `text`. |
+| `backdrop` | The dimmed page behind the dialog. |
+| `onBrand` | Text/icon on top of `brand` — primary button label, toggle knob, FAB icon. Set this whenever `brand` is light/saturated. |
+| `border`, `hover`, `trackOff`, `badgeBg`, `cookieBg`, `link` | Fine control of the derived overlay tokens — override only if you need to. |
+
+### Following a `data-theme` host
+
+Already flip your own CSS variables on `html[data-theme]`? Point `colors` at them and the
+banner follows your toggle with no JS:
+
+```tsx
+<CookieConsent colors={{ surface: 'var(--bg)', text: 'var(--fg)', textMuted: 'var(--fg-muted)', brand: '#3c3fde', onBrand: '#fff' }} />
+```
+
+### Per-theme logo
+
+Pass `{ light, dark }` to `logo` so the mark swaps with the theme (e.g. a dark wordmark on
+light, a light one on dark):
+
+```tsx
+<CookieConsent
+  logo={{
+    light: <img src="/logo.svg" alt="Acme" height={20} />,
+    dark:  <img src="/logo-dark.svg" alt="Acme" height={20} />,
   }}
 />
 ```

package/dist/index.cjs

@@ -600,11 +600,11 @@ function resolveLocale(locale) {
 
 // src/styles.ts
 var CSS = `
-.tc-root,.tc-fab{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;box-sizing:border-box}
+.tc-root,.tc-fab{font-family:var(--tc-font,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif);box-sizing:border-box}
 .tc-root *,.tc-fab *{box-sizing:border-box}
 .tc-root{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:center;justify-content:center;padding:0}
 .tc-backdrop{position:absolute;inset:0;background:var(--tc-backdrop);backdrop-filter:blur(4px)}
-.tc-card{position:relative;display:flex;flex-direction:column;width:100%;height:100dvh;overflow:hidden;background:var(--tc-surface);box-shadow:0 30px 80px -20px rgba(0,0,0,.7);opacity:0;transform:translateY(18px);transition:opacity .26s ease,transform .26s cubic-bezier(.22,1,.36,1)}
+.tc-card{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;height:100dvh;overflow:hidden;background:var(--tc-surface);box-shadow:0 30px 80px -20px rgba(0,0,0,.7);opacity:0;transform:translateY(18px);transition:opacity .26s ease,transform .26s cubic-bezier(.22,1,.36,1)}
 .tc-card:focus{outline:none}
 .tc-card.tc-shown{opacity:1;transform:none}
 .tc-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem 0}
@@ -614,7 +614,7 @@ var CSS = `
 .tc-tab.tc-active{color:var(--tc-text)}
 .tc-tab.tc-active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--tc-brand)}
 .tc-logo{flex-shrink:0;color:var(--tc-text);font-weight:700;font-size:15px}
-.tc-hr{border:0;border-top:1px solid rgba(255,255,255,.07);margin:0}
+.tc-hr{border:0;border-top:1px solid var(--tc-line,rgba(128,128,128,.16));margin:0}
 .tc-body{flex:1;min-height:0;overflow-y:auto}
 .tc-panel{padding:1.75rem 1.5rem}
 .tc-h2{margin:0;font-size:1rem;font-weight:600;color:var(--tc-text)}
@@ -625,18 +625,18 @@ var CSS = `
 .tc-cat-desc{margin:.375rem 0 0;flex:1;font-size:11.5px;line-height:1.35;color:var(--tc-text-muted)}
 .tc-switch{position:relative;display:inline-flex;align-items:center;margin-top:1rem;cursor:pointer}
 .tc-switch input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
-.tc-track{width:2.75rem;height:1.5rem;border-radius:999px;background:rgba(255,255,255,.15);transition:background .2s}
+.tc-track{width:2.75rem;height:1.5rem;border-radius:999px;background:var(--tc-track-off,rgba(128,128,128,.32));transition:background .2s}
 .tc-thumb{position:absolute;left:2px;top:2px;width:1.25rem;height:1.25rem;border-radius:999px;background:var(--tc-text);transition:transform .2s}
 .tc-switch input:checked~.tc-track{background:var(--tc-brand)}
 .tc-switch input:checked~.tc-thumb{transform:translateX(1.25rem);background:var(--tc-on-brand)}
 .tc-switch input:disabled{cursor:default}
 .tc-switch input:focus-visible~.tc-track{outline:2px solid var(--tc-brand);outline-offset:2px}
-.tc-acc{padding:1.25rem 0;border-top:1px solid rgba(255,255,255,.07)}
+.tc-acc{padding:1.25rem 0;border-top:1px solid var(--tc-line,rgba(128,128,128,.16))}
 .tc-acc:first-child{border-top:0}
 .tc-acc-head{display:flex;align-items:center;gap:.75rem}
 .tc-acc-btn{display:flex;flex:1;align-items:center;gap:.625rem;text-align:left;background:none;border:0;color:var(--tc-text);cursor:pointer;font:inherit}
 .tc-acc-name{font-size:.875rem;font-weight:600}
-.tc-badge{display:grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:999px;background:rgba(255,255,255,.1);font-size:10px;color:var(--tc-text-muted);font-family:ui-monospace,monospace}
+.tc-badge{display:grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:999px;background:var(--tc-badge-bg,rgba(128,128,128,.2));font-size:10px;color:var(--tc-text-muted);font-family:ui-monospace,monospace}
 .tc-chev{flex-shrink:0;color:var(--tc-text-muted);transition:transform .2s}
 .tc-acc.tc-open .tc-chev{transform:rotate(180deg)}
 .tc-acc-about{margin:.75rem 0 0;padding-left:1.625rem;font-size:13px;line-height:1.6;color:var(--tc-text-muted)}
@@ -644,19 +644,19 @@ var CSS = `
 .tc-acc.tc-open .tc-acc-panel{grid-template-rows:1fr}
 .tc-acc-inner{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:.5rem}
 .tc-acc.tc-open .tc-acc-inner{padding-top:.75rem}
-.tc-cookie{border-radius:.75rem;background:rgba(255,255,255,.03);padding:.75rem}
+.tc-cookie{border-radius:.75rem;background:var(--tc-cookie-bg,rgba(128,128,128,.06));padding:.75rem}
 .tc-cookie-name{margin:0;font-family:ui-monospace,monospace;font-size:12px;color:var(--tc-text)}
 .tc-cookie-purpose{margin:.25rem 0 0;font-size:12px;color:var(--tc-text-muted)}
 .tc-cookie-meta{margin:.25rem 0 0;font-family:ui-monospace,monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--tc-text-muted)}
 .tc-cookie-empty{font-size:12px;font-style:italic;color:var(--tc-text-muted)}
 .tc-about p{margin:0 0 .75rem;font-size:13.5px;line-height:1.6;color:var(--tc-text-muted)}
-.tc-link{color:var(--tc-brand);text-decoration:underline;text-underline-offset:2px}
+.tc-link{color:var(--tc-link,var(--tc-brand));text-decoration:underline;text-underline-offset:2px}
 .tc-actions{display:flex;flex-direction:column;gap:.625rem;padding:1.25rem 1.5rem}
-.tc-btn{flex:1;padding:.8rem 1.25rem;border-radius:999px;font-size:.875rem;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--tc-text);transition:background .15s,border-color .15s}
-.tc-btn:hover{background:rgba(255,255,255,.05)}
+.tc-btn{flex:1;padding:.8rem 1.25rem;border-radius:999px;font-size:.875rem;font-weight:600;cursor:pointer;border:1px solid var(--tc-btn-border,rgba(128,128,128,.3));background:transparent;color:var(--tc-text);transition:background .15s,border-color .15s}
+.tc-btn:hover{background:var(--tc-btn-hover,rgba(128,128,128,.12))}
 .tc-btn-primary{border-color:transparent;background:var(--tc-brand);color:var(--tc-on-brand)}
 .tc-btn-primary:hover{background:var(--tc-brand-deep)}
-.tc-fab{position:fixed;bottom:1.25rem;left:1.25rem;z-index:2147483600;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:999px;border:0;cursor:pointer;background:var(--tc-brand);color:var(--tc-text);box-shadow:0 12px 30px -8px rgba(0,0,0,.6);transition:background .15s}
+.tc-fab{position:fixed;bottom:1.25rem;left:1.25rem;z-index:2147483600;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:999px;border:0;cursor:pointer;background:var(--tc-brand);color:var(--tc-on-brand);box-shadow:0 12px 30px -8px rgba(0,0,0,.6);transition:background .15s}
 .tc-fab:hover{background:var(--tc-brand-deep)}
 @media (min-width:640px){
   .tc-root{padding:1rem}
@@ -675,6 +675,26 @@ var CSS = `
 `;
 var TABS = ["consent", "details", "about"];
 var EMPTY = { preferences: false, statistics: false, marketing: false };
+var DARK_PALETTE = {
+  brand: "#ff5c3a",
+  brandDeep: "#eb5535",
+  surface: "#0c0814",
+  surfaceAlt: "rgba(255,255,255,0.035)",
+  text: "#f4ede3",
+  textMuted: "#a89cb8",
+  backdrop: "rgba(7,5,13,0.8)",
+  onBrand: "#0c0814"
+};
+var LIGHT_PALETTE = {
+  brand: "#ff5c3a",
+  brandDeep: "#eb5535",
+  surface: "#ffffff",
+  surfaceAlt: "rgba(18,12,28,0.04)",
+  text: "#1a1523",
+  textMuted: "#6b6577",
+  backdrop: "rgba(18,12,28,0.4)",
+  onBrand: "#1a1523"
+};
 var DEFAULT_LABELS = {
   tabConsent: "Consent",
   tabDetails: "Details",
@@ -775,9 +795,13 @@ function CookieConsent({
   locale,
   defaultOpen = false,
   defaultTab,
+  theme = "auto",
   colors,
   categories,
   labels,
+  primaryAction = "save",
+  deferOpen = true,
+  fontFamily,
   onChange,
   autoClearCookies = true
 }) {
@@ -787,6 +811,11 @@ function CookieConsent({
   const [tab, setTab] = react.useState(defaultTab ?? "consent");
   const [choices, setChoices] = react.useState(EMPTY);
   const [accOpen, setAccOpen] = react.useState({});
+  const [sysDark, setSysDark] = react.useState(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return true;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  });
+  const resolvedTheme = theme === "light" ? "light" : theme === "dark" ? "dark" : sysDark ? "dark" : "light";
   const cardRef = react.useRef(null);
   const fabRef = react.useRef(null);
   const restoreFocusRef = react.useRef(null);
@@ -828,7 +857,33 @@ function CookieConsent({
       applyConsent(saved);
       setDecided(true);
     }
-    if (!saved || defaultOpen) setOpen(true);
+    if (defaultOpen) {
+      setOpen(true);
+      return;
+    }
+    if (saved) return;
+    if (!deferOpen || typeof window === "undefined") {
+      setOpen(true);
+      return;
+    }
+    let cancel = () => {
+    };
+    const openNow = () => setOpen(true);
+    const schedule = () => {
+      const ric = window.requestIdleCallback;
+      if (typeof ric === "function") {
+        const id = ric(openNow, { timeout: 600 });
+        cancel = () => window.cancelIdleCallback?.(id);
+      } else {
+        const id = window.setTimeout(openNow, 600);
+        cancel = () => window.clearTimeout(id);
+      }
+    };
+    const raf = requestAnimationFrame(() => requestAnimationFrame(schedule));
+    return () => {
+      cancelAnimationFrame(raf);
+      cancel();
+    };
   }, []);
   react.useEffect(() => {
     if (!open) {
@@ -877,6 +932,18 @@ function CookieConsent({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [decided]);
+  react.useEffect(() => {
+    if (theme !== "auto" || typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const on = () => setSysDark(mq.matches);
+    on();
+    if (mq.addEventListener) {
+      mq.addEventListener("change", on);
+      return () => mq.removeEventListener("change", on);
+    }
+    mq.addListener(on);
+    return () => mq.removeListener(on);
+  }, [theme]);
   const commit = (ch) => {
     writeCookie(cookieName, ch);
     applyConsent(ch);
@@ -907,28 +974,32 @@ function CookieConsent({
     setTab(id);
     requestAnimationFrame(() => document.getElementById("tc-tab-" + id)?.focus());
   };
-  const palette = {
-    brand: colors?.brand ?? "#ff5c3a",
-    brandDeep: colors?.brandDeep ?? "#eb5535",
-    surface: colors?.surface ?? "#0c0814",
-    surfaceAlt: colors?.surfaceAlt ?? "rgba(255,255,255,0.035)",
-    text: colors?.text ?? "#f4ede3",
-    textMuted: colors?.textMuted ?? "#a89cb8",
-    backdrop: colors?.backdrop ?? "rgba(7,5,13,0.8)",
-    onBrand: colors?.onBrand ?? colors?.surface ?? "#0c0814"
-  };
+  const userPalette = colors ? "light" in colors || "dark" in colors ? colors[resolvedTheme] : colors : void 0;
+  const P = { ...resolvedTheme === "light" ? LIGHT_PALETTE : DARK_PALETTE, ...userPalette };
+  const mix = (c, pct) => `color-mix(in srgb, ${c} ${pct}%, transparent)`;
   const vars = {
-    "--tc-brand": palette.brand,
-    "--tc-brand-deep": palette.brandDeep,
-    "--tc-surface": palette.surface,
-    "--tc-surface-alt": palette.surfaceAlt,
-    "--tc-text": palette.text,
-    "--tc-text-muted": palette.textMuted,
-    "--tc-backdrop": palette.backdrop,
-    "--tc-on-brand": palette.onBrand
+    "--tc-brand": P.brand,
+    "--tc-brand-deep": P.brandDeep,
+    "--tc-surface": P.surface,
+    "--tc-surface-alt": P.surfaceAlt,
+    "--tc-text": P.text,
+    "--tc-text-muted": P.textMuted,
+    "--tc-backdrop": P.backdrop,
+    "--tc-on-brand": P.onBrand,
+    "--tc-line": P.border ?? mix(P.text, 7),
+    "--tc-btn-border": P.border ?? mix(P.text, 14),
+    "--tc-btn-hover": P.hover ?? mix(P.text, 6),
+    "--tc-track-off": P.trackOff ?? mix(P.text, 15),
+    "--tc-badge-bg": P.badgeBg ?? mix(P.text, 10),
+    "--tc-cookie-bg": P.cookieBg ?? mix(P.text, 3),
+    "--tc-link": P.link ?? P.brand,
+    "--tc-font": fontFamily
   };
+  const logoNode = logo && typeof logo === "object" && !("$$typeof" in logo) && ("light" in logo || "dark" in logo) ? logo[resolvedTheme] : logo;
   const tabLabel = (t) => t === "consent" ? L.tabConsent : t === "details" ? L.tabDetails : L.tabAbout;
   const hasSelection = choices.preferences || choices.statistics || choices.marketing;
+  const savePrimary = primaryAction === "save" && hasSelection;
+  const allowPrimary = primaryAction === "allowAll";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: CSS }),
     open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tc-root", style: vars, role: "dialog", "aria-modal": "true", "aria-label": L.dialogLabel, children: [
@@ -951,7 +1022,7 @@ function CookieConsent({
             },
             t
           )) }),
-          logo ?? (company ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tc-logo", children: company }) : null)
+          logoNode ?? (company ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tc-logo", children: company }) : null)
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "tc-hr" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tc-body", children: [
@@ -997,8 +1068,8 @@ function CookieConsent({
         /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "tc-hr" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tc-actions", children: [
           /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "tc-btn", onClick: denyAll, children: L.deny }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "tc-btn" + (hasSelection ? " tc-btn-primary" : ""), onClick: saveChoices, children: L.save }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "tc-btn", onClick: acceptAll, children: L.allowAll })
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "tc-btn" + (savePrimary ? " tc-btn-primary" : ""), onClick: saveChoices, children: L.save }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "tc-btn" + (allowPrimary ? " tc-btn-primary" : ""), onClick: acceptAll, children: L.allowAll })
         ] })
       ] })
     ] }),
@@ -1015,5 +1086,3 @@ exports.LOCALES = LOCALES;
 exports.SUPPORTED_LOCALES = SUPPORTED_LOCALES;
 exports.default = CookieConsent_default;
 exports.resolveLocale = resolveLocale;
-//# sourceMappingURL=index.cjs.map
-//# sourceMappingURL=index.cjs.map

package/dist/index.d.cts

@@ -29,6 +29,45 @@ interface CategoryContent {
     /** Cookies in this category (the count badge is derived from this list). */
     cookies?: CookieInfo[];
 }
+/** A single theme's colour palette. Every key is optional; anything omitted falls
+ *  back to the built-in default for the active theme. The last six ("overlay")
+ *  tokens are derived from `text` via `color-mix` when omitted, so a light theme
+ *  works from `brand`/`surface`/`text` alone — override them only for fine control. */
+interface Palette {
+    brand?: string;
+    brandDeep?: string;
+    surface?: string;
+    surfaceAlt?: string;
+    text?: string;
+    textMuted?: string;
+    backdrop?: string;
+    /** Text/icon colour on top of `brand` (primary button, toggle knob, FAB icon). */
+    onBrand?: string;
+    /** Hairlines and button borders. Default: `color-mix` of `text`. */
+    border?: string;
+    /** Button hover fill. Default: `color-mix` of `text`. */
+    hover?: string;
+    /** Toggle track when off. Default: `color-mix` of `text`. */
+    trackOff?: string;
+    /** Count-badge background. Default: `color-mix` of `text`. */
+    badgeBg?: string;
+    /** Cookie-row background. Default: `color-mix` of `text`. */
+    cookieBg?: string;
+    /** Policy-link colour on the About tab. Default: `brand`. */
+    link?: string;
+}
+/** The `colors` prop. Either one palette (pinned to both themes — back-compatible
+ *  with v1) or a `{ light, dark }` pair the component switches between by theme. */
+type ColorsProp = Palette | {
+    light?: Palette;
+    dark?: Palette;
+};
+/** A brand mark. Either one node (both themes) or a `{ light, dark }` pair the
+ *  component swaps by the active theme — so the logo follows light/dark too. */
+type LogoProp = ReactNode | {
+    light?: ReactNode;
+    dark?: ReactNode;
+};
 /** Per-category overrides. The four keys are fixed (they map to Consent Mode signals). */
 interface CategoriesConfig {
     necessary?: CategoryContent;
@@ -69,8 +108,9 @@ interface CookieConsentProps {
     cookieName?: string;
     /** Operator / brand name shown in the header and About panel. */
     company?: string;
-    /** Optional brand mark for the header (e.g. an <svg/> or <img/>). */
-    logo?: ReactNode;
+    /** Optional brand mark for the header (an <svg/> or <img/>). Pass a single node,
+     *  or `{ light, dark }` to swap the mark by theme. */
+    logo?: LogoProp;
     privacyUrl?: string;
     termsUrl?: string;
     /** Built-in language pack to use (e.g. 'de', 'pl'). English is the default and
@@ -82,23 +122,33 @@ interface CookieConsentProps {
     defaultOpen?: boolean;
     /** Tab to show first. Default: 'consent'. */
     defaultTab?: 'consent' | 'details' | 'about';
-    /** Brand palette. Defaults match the dark reference theme. For a light theme,
-     *  also set `onBrand` to a colour that reads on top of `brand`. */
-    colors?: {
-        brand?: string;
-        brandDeep?: string;
-        surface?: string;
-        surfaceAlt?: string;
-        text?: string;
-        textMuted?: string;
-        backdrop?: string;
-        /** Text/icon colour on top of `brand` (primary button). Default: `surface`. */
-        onBrand?: string;
-    };
+    /** Which theme to render. `'auto'` (default) follows the OS `prefers-color-scheme`
+     *  and re-renders when it changes; `'light'`/`'dark'` pin it. Only affects which
+     *  half of a `{ light, dark }` `colors`/`logo` is used — a single palette applies
+     *  to both themes. */
+    theme?: 'auto' | 'light' | 'dark';
+    /** Brand palette. Either one palette (applied to both themes) or `{ light, dark }`.
+     *  Built-in defaults cover both themes; a light theme works from `brand`/`surface`/
+     *  `text` alone (the overlay tokens are derived from `text`). */
+    colors?: ColorsProp;
     /** Per-category content overrides (names, descriptions, cookie tables). */
     categories?: CategoriesConfig;
     /** UI string overrides for localisation. */
     labels?: ConsentLabels;
+    /** Which action button gets primary (filled/brand) emphasis.
+     *  - `'save'` (default): "Save choices" is emphasised only once the visitor turns
+     *    an optional category on — Accept/Deny stay equal-weight otherwise, the
+     *    GDPR-friendly default (regulators expect no dark patterns).
+     *  - `'allowAll'`: "Allow all" is always emphasised (familiar consumer look).
+     *  - `'none'`: no button is ever emphasised. */
+    primaryAction?: 'save' | 'allowAll' | 'none';
+    /** Defer the first-visit auto-open until the browser is idle (double-rAF +
+     *  `requestIdleCallback`, capped ~600ms). Keeps the full-screen card from being
+     *  the only thing painted on first frame, which otherwise starves Lighthouse of
+     *  an LCP candidate (`NO_LCP`). Ignored when `defaultOpen`. Default: true. */
+    deferOpen?: boolean;
+    /** Override the font stack. Default: the system UI stack. */
+    fontFamily?: string;
     /** Fired after the user makes (or changes) a choice. */
     onChange?: (choices: Choices) => void;
     /** When a category is denied or revoked, delete the cookies declared in its
@@ -107,7 +157,7 @@ interface CookieConsentProps {
     autoClearCookies?: boolean;
 }
 
-declare function CookieConsent({ manageDefault, cookieName, company, logo, privacyUrl, termsUrl, locale, defaultOpen, defaultTab, colors, categories, labels, onChange, autoClearCookies, }: CookieConsentProps): react.JSX.Element;
+declare function CookieConsent({ manageDefault, cookieName, company, logo, privacyUrl, termsUrl, locale, defaultOpen, defaultTab, theme, colors, categories, labels, primaryAction, deferOpen, fontFamily, onChange, autoClearCookies, }: CookieConsentProps): react.JSX.Element;
 
 /** Localised name + descriptions for one category. */
 interface LocaleCategoryText {
@@ -154,4 +204,4 @@ declare const SUPPORTED_LOCALES: readonly ["en", "de", "fr", "es", "it", "pt", "
  *  Case-insensitive and region-tolerant: 'pt-BR' falls back to 'pt'. */
 declare function resolveLocale(locale?: string): LocalePack | undefined;
 
-export { type CategoriesConfig, type CategoryContent, type Choices, type ConsentLabels, CookieConsent, type CookieConsentProps, type CookieInfo, LOCALES, type LocaleCategoryText, type LocaleCookieText, type LocalePack, SUPPORTED_LOCALES, CookieConsent as default, resolveLocale };
+export { type CategoriesConfig, type CategoryContent, type Choices, type ColorsProp, type ConsentLabels, CookieConsent, type CookieConsentProps, type CookieInfo, LOCALES, type LocaleCategoryText, type LocaleCookieText, type LocalePack, type LogoProp, type Palette, SUPPORTED_LOCALES, CookieConsent as default, resolveLocale };

package/dist/index.d.ts

@@ -29,6 +29,45 @@ interface CategoryContent {
     /** Cookies in this category (the count badge is derived from this list). */
     cookies?: CookieInfo[];
 }
+/** A single theme's colour palette. Every key is optional; anything omitted falls
+ *  back to the built-in default for the active theme. The last six ("overlay")
+ *  tokens are derived from `text` via `color-mix` when omitted, so a light theme
+ *  works from `brand`/`surface`/`text` alone — override them only for fine control. */
+interface Palette {
+    brand?: string;
+    brandDeep?: string;
+    surface?: string;
+    surfaceAlt?: string;
+    text?: string;
+    textMuted?: string;
+    backdrop?: string;
+    /** Text/icon colour on top of `brand` (primary button, toggle knob, FAB icon). */
+    onBrand?: string;
+    /** Hairlines and button borders. Default: `color-mix` of `text`. */
+    border?: string;
+    /** Button hover fill. Default: `color-mix` of `text`. */
+    hover?: string;
+    /** Toggle track when off. Default: `color-mix` of `text`. */
+    trackOff?: string;
+    /** Count-badge background. Default: `color-mix` of `text`. */
+    badgeBg?: string;
+    /** Cookie-row background. Default: `color-mix` of `text`. */
+    cookieBg?: string;
+    /** Policy-link colour on the About tab. Default: `brand`. */
+    link?: string;
+}
+/** The `colors` prop. Either one palette (pinned to both themes — back-compatible
+ *  with v1) or a `{ light, dark }` pair the component switches between by theme. */
+type ColorsProp = Palette | {
+    light?: Palette;
+    dark?: Palette;
+};
+/** A brand mark. Either one node (both themes) or a `{ light, dark }` pair the
+ *  component swaps by the active theme — so the logo follows light/dark too. */
+type LogoProp = ReactNode | {
+    light?: ReactNode;
+    dark?: ReactNode;
+};
 /** Per-category overrides. The four keys are fixed (they map to Consent Mode signals). */
 interface CategoriesConfig {
     necessary?: CategoryContent;
@@ -69,8 +108,9 @@ interface CookieConsentProps {
     cookieName?: string;
     /** Operator / brand name shown in the header and About panel. */
     company?: string;
-    /** Optional brand mark for the header (e.g. an <svg/> or <img/>). */
-    logo?: ReactNode;
+    /** Optional brand mark for the header (an <svg/> or <img/>). Pass a single node,
+     *  or `{ light, dark }` to swap the mark by theme. */
+    logo?: LogoProp;
     privacyUrl?: string;
     termsUrl?: string;
     /** Built-in language pack to use (e.g. 'de', 'pl'). English is the default and
@@ -82,23 +122,33 @@ interface CookieConsentProps {
     defaultOpen?: boolean;
     /** Tab to show first. Default: 'consent'. */
     defaultTab?: 'consent' | 'details' | 'about';
-    /** Brand palette. Defaults match the dark reference theme. For a light theme,
-     *  also set `onBrand` to a colour that reads on top of `brand`. */
-    colors?: {
-        brand?: string;
-        brandDeep?: string;
-        surface?: string;
-        surfaceAlt?: string;
-        text?: string;
-        textMuted?: string;
-        backdrop?: string;
-        /** Text/icon colour on top of `brand` (primary button). Default: `surface`. */
-        onBrand?: string;
-    };
+    /** Which theme to render. `'auto'` (default) follows the OS `prefers-color-scheme`
+     *  and re-renders when it changes; `'light'`/`'dark'` pin it. Only affects which
+     *  half of a `{ light, dark }` `colors`/`logo` is used — a single palette applies
+     *  to both themes. */
+    theme?: 'auto' | 'light' | 'dark';
+    /** Brand palette. Either one palette (applied to both themes) or `{ light, dark }`.
+     *  Built-in defaults cover both themes; a light theme works from `brand`/`surface`/
+     *  `text` alone (the overlay tokens are derived from `text`). */
+    colors?: ColorsProp;
     /** Per-category content overrides (names, descriptions, cookie tables). */
     categories?: CategoriesConfig;
     /** UI string overrides for localisation. */
     labels?: ConsentLabels;
+    /** Which action button gets primary (filled/brand) emphasis.
+     *  - `'save'` (default): "Save choices" is emphasised only once the visitor turns
+     *    an optional category on — Accept/Deny stay equal-weight otherwise, the
+     *    GDPR-friendly default (regulators expect no dark patterns).
+     *  - `'allowAll'`: "Allow all" is always emphasised (familiar consumer look).
+     *  - `'none'`: no button is ever emphasised. */
+    primaryAction?: 'save' | 'allowAll' | 'none';
+    /** Defer the first-visit auto-open until the browser is idle (double-rAF +
+     *  `requestIdleCallback`, capped ~600ms). Keeps the full-screen card from being
+     *  the only thing painted on first frame, which otherwise starves Lighthouse of
+     *  an LCP candidate (`NO_LCP`). Ignored when `defaultOpen`. Default: true. */
+    deferOpen?: boolean;
+    /** Override the font stack. Default: the system UI stack. */
+    fontFamily?: string;
     /** Fired after the user makes (or changes) a choice. */
     onChange?: (choices: Choices) => void;
     /** When a category is denied or revoked, delete the cookies declared in its
@@ -107,7 +157,7 @@ interface CookieConsentProps {
     autoClearCookies?: boolean;
 }
 
-declare function CookieConsent({ manageDefault, cookieName, company, logo, privacyUrl, termsUrl, locale, defaultOpen, defaultTab, colors, categories, labels, onChange, autoClearCookies, }: CookieConsentProps): react.JSX.Element;
+declare function CookieConsent({ manageDefault, cookieName, company, logo, privacyUrl, termsUrl, locale, defaultOpen, defaultTab, theme, colors, categories, labels, primaryAction, deferOpen, fontFamily, onChange, autoClearCookies, }: CookieConsentProps): react.JSX.Element;
 
 /** Localised name + descriptions for one category. */
 interface LocaleCategoryText {
@@ -154,4 +204,4 @@ declare const SUPPORTED_LOCALES: readonly ["en", "de", "fr", "es", "it", "pt", "
  *  Case-insensitive and region-tolerant: 'pt-BR' falls back to 'pt'. */
 declare function resolveLocale(locale?: string): LocalePack | undefined;
 
-export { type CategoriesConfig, type CategoryContent, type Choices, type ConsentLabels, CookieConsent, type CookieConsentProps, type CookieInfo, LOCALES, type LocaleCategoryText, type LocaleCookieText, type LocalePack, SUPPORTED_LOCALES, CookieConsent as default, resolveLocale };
+export { type CategoriesConfig, type CategoryContent, type Choices, type ColorsProp, type ConsentLabels, CookieConsent, type CookieConsentProps, type CookieInfo, LOCALES, type LocaleCategoryText, type LocaleCookieText, type LocalePack, type LogoProp, type Palette, SUPPORTED_LOCALES, CookieConsent as default, resolveLocale };