/** * Vanilla JS consent banner for non-Vue users. * Creates DOM elements, wires up ConsentManager callbacks, and provides show/hide API. */ import type { VanillaBannerOptions, VanillaBannerInstance, VanillaTheme, BannerPosition } from "./types"; export declare const BANNER_CSS = "/* Vue Privacy - Vanilla Banner Styles */\n:root,[data-consent-theme=\"light\"]{--consent-bg:#fff;--consent-text:#1a1a1a;--consent-text-secondary:#666;--consent-link:#0066cc;--consent-btn-accept-bg:#0066cc;--consent-btn-accept-text:#fff;--consent-btn-reject-bg:#e0e0e0;--consent-btn-reject-text:#1a1a1a;--consent-font:system-ui,-apple-system,sans-serif}\n.consent-banner{position:fixed;left:0;right:0;z-index:9999;padding:1rem;background:var(--consent-bg,#fff);color:var(--consent-text,#1a1a1a);box-shadow:0 -2px 10px rgba(0,0,0,.1);font-family:var(--consent-font,system-ui,-apple-system,sans-serif);box-sizing:border-box}\n.consent-banner *,.consent-banner *::before,.consent-banner *::after{box-sizing:border-box}\n.consent-banner--bottom{bottom:0}\n.consent-banner--top{top:0;box-shadow:0 2px 10px rgba(0,0,0,.1)}\n.consent-banner--center{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);max-width:500px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.15)}\n.consent-banner__content{max-width:1200px;margin:0 auto}\n.consent-banner__title{margin:0 0 .5rem;font-size:1.125rem;font-weight:600;color:var(--consent-text,#1a1a1a)}\n.consent-banner__message{margin:0 0 1rem;font-size:.875rem;line-height:1.5;color:var(--consent-text-secondary,#666)}\n.consent-banner__privacy-link{color:var(--consent-link,#0066cc);text-decoration:underline}\n.consent-banner__privacy-link:hover{text-decoration:none}\n.consent-banner__actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end;max-width:1200px;margin:0 auto}\n.consent-banner__btn{padding:.5rem 1rem;font-size:.875rem;font-weight:500;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s,opacity .2s;font-family:inherit}\n.consent-banner__btn:hover{opacity:.9}\n.consent-banner__btn:focus-visible{outline:2px solid var(--consent-link,#0066cc);outline-offset:2px}\n.consent-banner__btn--accept{background:var(--consent-btn-accept-bg,#0066cc);color:var(--consent-btn-accept-text,#fff)}\n.consent-banner__btn--reject{background:var(--consent-btn-reject-bg,#e0e0e0);color:var(--consent-btn-reject-text,#1a1a1a)}\n.consent-banner__btn--customize{background:transparent;color:var(--consent-link,#0066cc);border:1px solid currentColor}\n.consent-banner--hidden{display:none}\n@media(max-width:640px){.consent-banner__actions{flex-direction:column}.consent-banner__btn{width:100%;text-align:center}}\n@media(prefers-color-scheme:dark){[data-consent-theme=\"auto\"]{--consent-bg:#1a1a1a;--consent-text:#fff;--consent-text-secondary:#a0a0a0;--consent-link:#66b3ff;--consent-btn-accept-bg:#0066cc;--consent-btn-accept-text:#fff;--consent-btn-reject-bg:#333;--consent-btn-reject-text:#fff}}\n[data-consent-theme=\"dark\"]{--consent-bg:#1a1a1a;--consent-text:#fff;--consent-text-secondary:#a0a0a0;--consent-link:#66b3ff;--consent-btn-accept-bg:#0066cc;--consent-btn-accept-text:#fff;--consent-btn-reject-bg:#333;--consent-btn-reject-text:#fff}"; /** * Inject banner CSS into document head (idempotent, SSR-safe) */ export declare function injectVanillaBannerStyles(): void; export declare function createBanner(options: VanillaBannerOptions): VanillaBannerInstance; export type { VanillaBannerOptions, VanillaBannerInstance, VanillaTheme, BannerPosition };