astro-consent 1.0.17 → 2.0.0

package/dist/templates/cssTemplate.cjs

@@ -0,0 +1,447 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_CSS = void 0;
+exports.DEFAULT_CSS = `
+/*
+  astro-consent stylesheet
+
+  Generated file location:
+  src/cookiebanner/styles.css
+
+  Tweak these custom properties first. They are the public theme API.
+
+  Core surface
+  --cb-font-family
+  --cb-z-index
+  --cb-max-width
+  --cb-padding
+  --cb-gap
+  --cb-radius
+  --cb-bg
+  --cb-surface
+  --cb-surface-strong
+  --cb-text
+  --cb-muted
+  --cb-border
+  --cb-shadow
+  --cb-backdrop
+
+  Brand
+  --cb-accent
+  --cb-accent-strong
+  --cb-accent-soft
+  --cb-success
+  --cb-danger
+
+  Buttons
+  --cb-button-bg
+  --cb-button-text
+  --cb-button-border
+  --cb-button-secondary-bg
+  --cb-button-secondary-text
+  --cb-button-secondary-border
+
+  Layout
+  --cb-banner-radius
+  --cb-modal-width
+  --cb-panel-radius
+  --cb-toggle-width
+  --cb-toggle-height
+  --cb-toggle-knob
+*/
+
+:root {
+  --cb-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --cb-z-index: 9999;
+  --cb-max-width: 76rem;
+  --cb-padding: 1rem;
+  --cb-gap: 0.85rem;
+  --cb-radius: 1.15rem;
+  --cb-banner-radius: 1.4rem;
+  --cb-panel-radius: 1rem;
+  --cb-modal-width: 44rem;
+  --cb-toggle-width: 3.4rem;
+  --cb-toggle-height: 2rem;
+  --cb-toggle-knob: 1.55rem;
+
+  --cb-bg: rgba(7, 11, 20, 0.9);
+  --cb-surface: rgba(255, 255, 255, 0.04);
+  --cb-surface-strong: rgba(255, 255, 255, 0.07);
+  --cb-text: #f8fafc;
+  --cb-muted: rgba(248, 250, 252, 0.72);
+  --cb-border: rgba(255, 255, 255, 0.11);
+  --cb-shadow: 0 24px 80px rgba(2, 6, 23, 0.34);
+  --cb-backdrop: rgba(2, 6, 23, 0.72);
+
+  --cb-accent: #7dd3fc;
+  --cb-accent-strong: #38bdf8;
+  --cb-accent-soft: rgba(125, 211, 252, 0.16);
+  --cb-success: #34d399;
+  --cb-danger: #fb7185;
+
+  --cb-button-bg: linear-gradient(135deg, var(--cb-accent-strong), var(--cb-success));
+  --cb-button-text: #00111a;
+  --cb-button-border: transparent;
+  --cb-button-secondary-bg: rgba(255, 255, 255, 0.03);
+  --cb-button-secondary-text: var(--cb-text);
+  --cb-button-secondary-border: var(--cb-border);
+}
+
+#astro-consent-banner {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--cb-z-index);
+  padding: 0 var(--cb-padding) var(--cb-padding);
+  font-family: var(--cb-font-family);
+  pointer-events: none;
+}
+
+#astro-consent-banner,
+#astro-consent-modal {
+  opacity: 0;
+  transform: translateY(18px) scale(0.98);
+  transition:
+    opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),
+    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+#astro-consent-banner.cb-visible,
+#astro-consent-modal.cb-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+#astro-consent-modal {
+  pointer-events: none;
+}
+
+#astro-consent-modal.cb-visible {
+  pointer-events: auto;
+}
+
+.cb-container,
+.cb-modal {
+  box-sizing: border-box;
+  color: var(--cb-text);
+  border: 1px solid var(--cb-border);
+  box-shadow: var(--cb-shadow);
+  backdrop-filter: blur(24px) saturate(1.08);
+  -webkit-backdrop-filter: blur(24px) saturate(1.08);
+}
+
+.cb-container {
+  max-width: var(--cb-max-width);
+  margin: 0 auto;
+  padding: 1.15rem 1.2rem;
+  display: flex;
+  gap: 1.15rem;
+  justify-content: space-between;
+  align-items: center;
+  background:
+    radial-gradient(circle at top left, var(--cb-accent-soft), transparent 34%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
+    var(--cb-bg);
+  border-radius: var(--cb-banner-radius);
+  pointer-events: auto;
+}
+
+.cb-container > div:first-child {
+  min-width: 0;
+}
+
+.cb-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+}
+
+.cb-desc {
+  margin-top: 0.35rem;
+  color: var(--cb-muted);
+  line-height: 1.5;
+}
+
+.cb-desc a {
+  color: var(--cb-accent);
+  font-weight: 650;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.18em;
+}
+
+.cb-modal-header a {
+  color: var(--cb-accent);
+  font-weight: 650;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.18em;
+}
+
+.cb-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  justify-content: flex-end;
+  flex-shrink: 0;
+}
+
+.cb-actions button,
+.cb-toggle {
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font: inherit;
+  font-weight: 650;
+  cursor: pointer;
+  transition:
+    transform 160ms ease,
+    background-color 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.cb-actions button {
+  padding: 0.82rem 1.05rem;
+}
+
+.cb-actions button:hover,
+.cb-toggle:hover {
+  transform: translateY(-1px);
+}
+
+.cb-actions button:focus-visible,
+.cb-toggle:focus-visible {
+  outline: 2px solid var(--cb-accent);
+  outline-offset: 2px;
+}
+
+.cb-accept {
+  background: var(--cb-button-bg);
+  color: var(--cb-button-text);
+  border-color: var(--cb-button-border);
+  box-shadow: 0 10px 24px rgba(56, 189, 248, 0.16);
+}
+
+.cb-reject {
+  background: var(--cb-button-secondary-bg);
+  color: var(--cb-button-secondary-text);
+  border-color: var(--cb-button-secondary-border);
+}
+
+.cb-manage {
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--cb-text);
+  border-color: var(--cb-border);
+}
+
+#astro-consent-modal {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--cb-z-index) + 1);
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  background: var(--cb-backdrop);
+}
+
+#astro-consent-banner.cb-mode-overlay {
+  pointer-events: auto;
+}
+
+#astro-consent-banner.cb-mode-overlay .cb-container {
+  display: none;
+}
+
+#astro-consent-banner.cb-mode-overlay #astro-consent-modal {
+  position: fixed;
+  inset: 0;
+  min-height: 100vh;
+  padding: 1rem;
+  background:
+    radial-gradient(circle at top center, rgba(125, 211, 252, 0.12), transparent 28%),
+    var(--cb-backdrop);
+}
+
+#astro-consent-banner.cb-mode-overlay .cb-modal {
+  width: min(100%, 40rem);
+  transform: translateY(0);
+}
+
+#astro-consent-banner.cb-mode-overlay.cb-visible .cb-modal {
+  transform: translateY(0) scale(1);
+}
+
+#astro-consent-banner.cb-mode-overlay .cb-modal-header p {
+  max-width: 38rem;
+}
+
+.cb-modal-header a {
+  color: var(--cb-accent);
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.18em;
+}
+
+.cb-modal {
+  width: min(100%, var(--cb-modal-width));
+  border-radius: calc(var(--cb-radius) + 0.45rem);
+  padding: 1.45rem;
+  background:
+    radial-gradient(circle at top right, var(--cb-accent-soft), transparent 32%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),
+    var(--cb-bg);
+}
+
+.cb-modal-header h3 {
+  margin: 0;
+  font-size: 1.18rem;
+  letter-spacing: -0.022em;
+}
+
+.cb-modal-header p {
+  margin: 0.55rem 0 0;
+  color: var(--cb-muted);
+  line-height: 1.55;
+}
+
+.cb-panel {
+  margin-top: 1.05rem;
+  border-radius: var(--cb-panel-radius);
+  overflow: hidden;
+  border: 1px solid var(--cb-border);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.cb-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1rem;
+  border-top: 1px solid var(--cb-border);
+}
+
+.cb-row:first-child {
+  border-top: 0;
+}
+
+.cb-row span {
+  font-weight: 600;
+}
+
+.cb-row strong {
+  color: var(--cb-muted);
+  font-weight: 600;
+}
+
+.cb-toggle {
+  width: var(--cb-toggle-width);
+  height: var(--cb-toggle-height);
+  padding: 0;
+  position: relative;
+  background: rgba(255, 255, 255, 0.12);
+  border-color: transparent;
+  flex-shrink: 0;
+}
+
+.cb-toggle::before {
+  content: "";
+  position: absolute;
+  top: calc((var(--cb-toggle-height) - var(--cb-toggle-knob)) / 2);
+  left: 0.24rem;
+  width: var(--cb-toggle-knob);
+  height: var(--cb-toggle-knob);
+  border-radius: 999px;
+  background: #fff;
+  transition: transform 180ms ease, box-shadow 180ms ease;
+  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.24);
+}
+
+.cb-toggle.active {
+  background: linear-gradient(135deg, var(--cb-accent-strong), var(--cb-success));
+}
+
+.cb-toggle.active::before {
+  transform: translateX(calc(var(--cb-toggle-width) - var(--cb-toggle-knob) - 0.48rem));
+}
+
+.cb-actions-modal {
+  margin-top: 1.05rem;
+  justify-content: space-between;
+  padding-top: 1.05rem;
+  border-top: 1px solid var(--cb-border);
+}
+
+#astro-consent-banner.cb-visible .cb-container,
+#astro-consent-modal.cb-visible .cb-modal {
+  animation: cb-pop-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+#astro-consent-modal.cb-visible .cb-modal-header {
+  animation: cb-rise-in 320ms 40ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+#astro-consent-modal.cb-visible .cb-panel {
+  animation: cb-rise-in 320ms 90ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+#astro-consent-modal.cb-visible .cb-actions-modal {
+  animation: cb-rise-in 320ms 140ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes cb-pop-in {
+  from {
+    transform: translateY(8px) scale(0.985);
+  }
+
+  to {
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes cb-rise-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 640px) {
+  #astro-consent-banner {
+    padding-inline: 0.5rem;
+  }
+
+  .cb-container {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .cb-actions {
+    justify-content: stretch;
+  }
+
+  .cb-actions button {
+    flex: 1 1 0;
+  }
+
+  .cb-actions-modal {
+    flex-direction: column-reverse;
+  }
+
+  .cb-actions-modal button {
+    width: 100%;
+  }
+
+  .cb-row {
+    align-items: flex-start;
+    padding-block: 0.95rem;
+  }
+}
+
+`;

package/dist/templates/cssTemplate.d.ts

@@ -1 +1 @@
-export declare const DEFAULT_CSS = "\n:root {\n  /* Layout */\n  --cb-z-index: 9999;\n  --cb-max-width: 960px;\n  --cb-padding: 16px;\n  --cb-gap: 12px;\n  --cb-radius: 10px;\n\n  /* Colours */\n  --cb-bg: #111827;\n  --cb-surface: #1f2933;\n  --cb-text: #ffffff;\n  --cb-muted: #9ca3af;\n  --cb-border: #374151;\n  --cb-accent: #6366f1;\n\n  /* Buttons */\n  --cb-btn-bg: var(--cb-accent);\n  --cb-btn-text: #ffffff;\n  --cb-btn-secondary-bg: transparent;\n  --cb-btn-secondary-text: var(--cb-text);\n  --cb-btn-border: var(--cb-border);\n\n  /* Typography */\n  --cb-font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\n  --cb-title-size: 1rem;\n  --cb-text-size: 0.875rem;\n}\n\n#astro-consent-banner {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: var(--cb-z-index);\n  background: var(--cb-bg);\n  color: var(--cb-text);\n  font-family: var(--cb-font-family);\n  border-top: 1px solid var(--cb-border);\n}\n\n#astro-consent-banner > * {\n  max-width: var(--cb-max-width);\n  margin: 0 auto;\n  padding: var(--cb-padding);\n}\n\n#astro-consent-banner h2 {\n  margin: 0 0 4px;\n  font-size: var(--cb-title-size);\n}\n\n#astro-consent-banner p {\n  margin: 0;\n  font-size: var(--cb-text-size);\n  color: var(--cb-muted);\n}\n\n#astro-consent-banner a {\n  color: var(--cb-accent);\n  text-decoration: underline;\n}\n\n.astro-consent-categories {\n  display: grid;\n  gap: var(--cb-gap);\n  margin-top: var(--cb-gap);\n}\n\n.astro-consent-category {\n  background: var(--cb-surface);\n  padding: 12px;\n  border-radius: var(--cb-radius);\n  border: 1px solid var(--cb-border);\n}\n\n.astro-consent-label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n}\n\n.astro-consent-description {\n  margin: 4px 0 0 26px;\n  font-size: 0.8rem;\n  color: var(--cb-muted);\n}\n\n.astro-consent-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n  margin-top: var(--cb-gap);\n  flex-wrap: wrap;\n}\n\n.astro-consent-actions button {\n  padding: 8px 14px;\n  border-radius: var(--cb-radius);\n  font-size: 0.875rem;\n  cursor: pointer;\n  border: 1px solid var(--cb-btn-border);\n}\n\n.astro-consent-actions button:first-child {\n  background: var(--cb-btn-secondary-bg);\n  color: var(--cb-btn-secondary-text);\n}\n\n.astro-consent-actions button:last-child {\n  background: var(--cb-btn-bg);\n  color: var(--cb-btn-text);\n  border-color: var(--cb-btn-bg);\n}\n";
+export declare const DEFAULT_CSS = "\n/*\n  astro-consent stylesheet\n\n  Generated file location:\n  src/cookiebanner/styles.css\n\n  Tweak these custom properties first. They are the public theme API.\n\n  Core surface\n  --cb-font-family\n  --cb-z-index\n  --cb-max-width\n  --cb-padding\n  --cb-gap\n  --cb-radius\n  --cb-bg\n  --cb-surface\n  --cb-surface-strong\n  --cb-text\n  --cb-muted\n  --cb-border\n  --cb-shadow\n  --cb-backdrop\n\n  Brand\n  --cb-accent\n  --cb-accent-strong\n  --cb-accent-soft\n  --cb-success\n  --cb-danger\n\n  Buttons\n  --cb-button-bg\n  --cb-button-text\n  --cb-button-border\n  --cb-button-secondary-bg\n  --cb-button-secondary-text\n  --cb-button-secondary-border\n\n  Layout\n  --cb-banner-radius\n  --cb-modal-width\n  --cb-panel-radius\n  --cb-toggle-width\n  --cb-toggle-height\n  --cb-toggle-knob\n*/\n\n:root {\n  --cb-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --cb-z-index: 9999;\n  --cb-max-width: 76rem;\n  --cb-padding: 1rem;\n  --cb-gap: 0.85rem;\n  --cb-radius: 1.15rem;\n  --cb-banner-radius: 1.4rem;\n  --cb-panel-radius: 1rem;\n  --cb-modal-width: 44rem;\n  --cb-toggle-width: 3.4rem;\n  --cb-toggle-height: 2rem;\n  --cb-toggle-knob: 1.55rem;\n\n  --cb-bg: rgba(7, 11, 20, 0.9);\n  --cb-surface: rgba(255, 255, 255, 0.04);\n  --cb-surface-strong: rgba(255, 255, 255, 0.07);\n  --cb-text: #f8fafc;\n  --cb-muted: rgba(248, 250, 252, 0.72);\n  --cb-border: rgba(255, 255, 255, 0.11);\n  --cb-shadow: 0 24px 80px rgba(2, 6, 23, 0.34);\n  --cb-backdrop: rgba(2, 6, 23, 0.72);\n\n  --cb-accent: #7dd3fc;\n  --cb-accent-strong: #38bdf8;\n  --cb-accent-soft: rgba(125, 211, 252, 0.16);\n  --cb-success: #34d399;\n  --cb-danger: #fb7185;\n\n  --cb-button-bg: linear-gradient(135deg, var(--cb-accent-strong), var(--cb-success));\n  --cb-button-text: #00111a;\n  --cb-button-border: transparent;\n  --cb-button-secondary-bg: rgba(255, 255, 255, 0.03);\n  --cb-button-secondary-text: var(--cb-text);\n  --cb-button-secondary-border: var(--cb-border);\n}\n\n#astro-consent-banner {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: var(--cb-z-index);\n  padding: 0 var(--cb-padding) var(--cb-padding);\n  font-family: var(--cb-font-family);\n  pointer-events: none;\n}\n\n#astro-consent-banner,\n#astro-consent-modal {\n  opacity: 0;\n  transform: translateY(18px) scale(0.98);\n  transition:\n    opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),\n    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n#astro-consent-banner.cb-visible,\n#astro-consent-modal.cb-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n#astro-consent-modal {\n  pointer-events: none;\n}\n\n#astro-consent-modal.cb-visible {\n  pointer-events: auto;\n}\n\n.cb-container,\n.cb-modal {\n  box-sizing: border-box;\n  color: var(--cb-text);\n  border: 1px solid var(--cb-border);\n  box-shadow: var(--cb-shadow);\n  backdrop-filter: blur(24px) saturate(1.08);\n  -webkit-backdrop-filter: blur(24px) saturate(1.08);\n}\n\n.cb-container {\n  max-width: var(--cb-max-width);\n  margin: 0 auto;\n  padding: 1.15rem 1.2rem;\n  display: flex;\n  gap: 1.15rem;\n  justify-content: space-between;\n  align-items: center;\n  background:\n    radial-gradient(circle at top left, var(--cb-accent-soft), transparent 34%),\n    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),\n    var(--cb-bg);\n  border-radius: var(--cb-banner-radius);\n  pointer-events: auto;\n}\n\n.cb-container > div:first-child {\n  min-width: 0;\n}\n\n.cb-title {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 700;\n  letter-spacing: -0.015em;\n}\n\n.cb-desc {\n  margin-top: 0.35rem;\n  color: var(--cb-muted);\n  line-height: 1.5;\n}\n\n.cb-desc a {\n  color: var(--cb-accent);\n  font-weight: 650;\n  text-decoration-thickness: 0.08em;\n  text-underline-offset: 0.18em;\n}\n\n.cb-modal-header a {\n  color: var(--cb-accent);\n  font-weight: 650;\n  text-decoration-thickness: 0.08em;\n  text-underline-offset: 0.18em;\n}\n\n.cb-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.65rem;\n  justify-content: flex-end;\n  flex-shrink: 0;\n}\n\n.cb-actions button,\n.cb-toggle {\n  appearance: none;\n  border: 1px solid transparent;\n  border-radius: 999px;\n  font: inherit;\n  font-weight: 650;\n  cursor: pointer;\n  transition:\n    transform 160ms ease,\n    background-color 160ms ease,\n    border-color 160ms ease,\n    color 160ms ease,\n    box-shadow 160ms ease;\n}\n\n.cb-actions button {\n  padding: 0.82rem 1.05rem;\n}\n\n.cb-actions button:hover,\n.cb-toggle:hover {\n  transform: translateY(-1px);\n}\n\n.cb-actions button:focus-visible,\n.cb-toggle:focus-visible {\n  outline: 2px solid var(--cb-accent);\n  outline-offset: 2px;\n}\n\n.cb-accept {\n  background: var(--cb-button-bg);\n  color: var(--cb-button-text);\n  border-color: var(--cb-button-border);\n  box-shadow: 0 10px 24px rgba(56, 189, 248, 0.16);\n}\n\n.cb-reject {\n  background: var(--cb-button-secondary-bg);\n  color: var(--cb-button-secondary-text);\n  border-color: var(--cb-button-secondary-border);\n}\n\n.cb-manage {\n  background: rgba(255, 255, 255, 0.02);\n  color: var(--cb-text);\n  border-color: var(--cb-border);\n}\n\n#astro-consent-modal {\n  position: fixed;\n  inset: 0;\n  z-index: calc(var(--cb-z-index) + 1);\n  display: grid;\n  place-items: center;\n  padding: 1rem;\n  background: var(--cb-backdrop);\n}\n\n#astro-consent-banner.cb-mode-overlay {\n  pointer-events: auto;\n}\n\n#astro-consent-banner.cb-mode-overlay .cb-container {\n  display: none;\n}\n\n#astro-consent-banner.cb-mode-overlay #astro-consent-modal {\n  position: fixed;\n  inset: 0;\n  min-height: 100vh;\n  padding: 1rem;\n  background:\n    radial-gradient(circle at top center, rgba(125, 211, 252, 0.12), transparent 28%),\n    var(--cb-backdrop);\n}\n\n#astro-consent-banner.cb-mode-overlay .cb-modal {\n  width: min(100%, 40rem);\n  transform: translateY(0);\n}\n\n#astro-consent-banner.cb-mode-overlay.cb-visible .cb-modal {\n  transform: translateY(0) scale(1);\n}\n\n#astro-consent-banner.cb-mode-overlay .cb-modal-header p {\n  max-width: 38rem;\n}\n\n.cb-modal-header a {\n  color: var(--cb-accent);\n  text-decoration-thickness: 0.08em;\n  text-underline-offset: 0.18em;\n}\n\n.cb-modal {\n  width: min(100%, var(--cb-modal-width));\n  border-radius: calc(var(--cb-radius) + 0.45rem);\n  padding: 1.45rem;\n  background:\n    radial-gradient(circle at top right, var(--cb-accent-soft), transparent 32%),\n    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),\n    var(--cb-bg);\n}\n\n.cb-modal-header h3 {\n  margin: 0;\n  font-size: 1.18rem;\n  letter-spacing: -0.022em;\n}\n\n.cb-modal-header p {\n  margin: 0.55rem 0 0;\n  color: var(--cb-muted);\n  line-height: 1.55;\n}\n\n.cb-panel {\n  margin-top: 1.05rem;\n  border-radius: var(--cb-panel-radius);\n  overflow: hidden;\n  border: 1px solid var(--cb-border);\n  background: rgba(255, 255, 255, 0.03);\n}\n\n.cb-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  padding: 1rem 1rem;\n  border-top: 1px solid var(--cb-border);\n}\n\n.cb-row:first-child {\n  border-top: 0;\n}\n\n.cb-row span {\n  font-weight: 600;\n}\n\n.cb-row strong {\n  color: var(--cb-muted);\n  font-weight: 600;\n}\n\n.cb-toggle {\n  width: var(--cb-toggle-width);\n  height: var(--cb-toggle-height);\n  padding: 0;\n  position: relative;\n  background: rgba(255, 255, 255, 0.12);\n  border-color: transparent;\n  flex-shrink: 0;\n}\n\n.cb-toggle::before {\n  content: \"\";\n  position: absolute;\n  top: calc((var(--cb-toggle-height) - var(--cb-toggle-knob)) / 2);\n  left: 0.24rem;\n  width: var(--cb-toggle-knob);\n  height: var(--cb-toggle-knob);\n  border-radius: 999px;\n  background: #fff;\n  transition: transform 180ms ease, box-shadow 180ms ease;\n  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.24);\n}\n\n.cb-toggle.active {\n  background: linear-gradient(135deg, var(--cb-accent-strong), var(--cb-success));\n}\n\n.cb-toggle.active::before {\n  transform: translateX(calc(var(--cb-toggle-width) - var(--cb-toggle-knob) - 0.48rem));\n}\n\n.cb-actions-modal {\n  margin-top: 1.05rem;\n  justify-content: space-between;\n  padding-top: 1.05rem;\n  border-top: 1px solid var(--cb-border);\n}\n\n#astro-consent-banner.cb-visible .cb-container,\n#astro-consent-modal.cb-visible .cb-modal {\n  animation: cb-pop-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n\n#astro-consent-modal.cb-visible .cb-modal-header {\n  animation: cb-rise-in 320ms 40ms cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n\n#astro-consent-modal.cb-visible .cb-panel {\n  animation: cb-rise-in 320ms 90ms cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n\n#astro-consent-modal.cb-visible .cb-actions-modal {\n  animation: cb-rise-in 320ms 140ms cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n\n@keyframes cb-pop-in {\n  from {\n    transform: translateY(8px) scale(0.985);\n  }\n\n  to {\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes cb-rise-in {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@media (max-width: 640px) {\n  #astro-consent-banner {\n    padding-inline: 0.5rem;\n  }\n\n  .cb-container {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .cb-actions {\n    justify-content: stretch;\n  }\n\n  .cb-actions button {\n    flex: 1 1 0;\n  }\n\n  .cb-actions-modal {\n    flex-direction: column-reverse;\n  }\n\n  .cb-actions-modal button {\n    width: 100%;\n  }\n\n  .cb-row {\n    align-items: flex-start;\n    padding-block: 0.95rem;\n  }\n}\n\n";

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "astro-consent",
-  "version": "1.0.17",
+  "version": "2.0.0",
   "description": "A privacy-first, GDPR-compliant cookie consent banner for Astro with a built-in preferences modal, zero dependencies, and full theme control.",
   "type": "module",
   "author": {
-    "name": "Velohost",
+    "name": "Velohost UK Limited",
     "url": "https://velohost.co.uk"
   },
   "license": "MIT",
@@ -30,10 +30,11 @@
   "files": [
     "dist",
     "README.md",
+    "CHANGELOG.md",
     "LICENSE.md"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json && tsc -p tsconfig.cli.json && mv dist/cli.js dist/cli.cjs"
+    "build": "tsc -p tsconfig.json && tsc -p tsconfig.cli.json && node -e \"const fs=require('fs');const path=require('path');fs.renameSync('dist/cli.js','dist/cli.cjs');fs.renameSync('dist/templates/cssTemplate.js','dist/templates/cssTemplate.cjs');let s=fs.readFileSync('dist/cli.cjs','utf8');s=s.replace('./templates/cssTemplate.js','./templates/cssTemplate.cjs');fs.writeFileSync('dist/cli.cjs',s);fs.chmodSync('dist/cli.cjs',0o755);\""
   },
   "keywords": [
     "astro",
@@ -45,14 +46,15 @@
     "analytics-consent",
     "marketing-consent",
     "withastro",
-    "velohost"
+    "velohost-uk-limited"
   ],
   "peerDependencies": {
-    "astro": "^4.0.0 || ^5.0.0"
+    "astro": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "devDependencies": {
     "@types/node": "^25.2.1",
-    "astro": "^5.16.6"
+    "astro": "^6.0.0",
+    "typescript": "^5.9.2"
   },
   "engines": {
     "node": ">=18.0.0"

package/dist/templates/cssTemplate.js

@@ -1,117 +0,0 @@
-export const DEFAULT_CSS = `
-:root {
-  /* Layout */
-  --cb-z-index: 9999;
-  --cb-max-width: 960px;
-  --cb-padding: 16px;
-  --cb-gap: 12px;
-  --cb-radius: 10px;
-
-  /* Colours */
-  --cb-bg: #111827;
-  --cb-surface: #1f2933;
-  --cb-text: #ffffff;
-  --cb-muted: #9ca3af;
-  --cb-border: #374151;
-  --cb-accent: #6366f1;
-
-  /* Buttons */
-  --cb-btn-bg: var(--cb-accent);
-  --cb-btn-text: #ffffff;
-  --cb-btn-secondary-bg: transparent;
-  --cb-btn-secondary-text: var(--cb-text);
-  --cb-btn-border: var(--cb-border);
-
-  /* Typography */
-  --cb-font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-  --cb-title-size: 1rem;
-  --cb-text-size: 0.875rem;
-}
-
-#astro-consent-banner {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: var(--cb-z-index);
-  background: var(--cb-bg);
-  color: var(--cb-text);
-  font-family: var(--cb-font-family);
-  border-top: 1px solid var(--cb-border);
-}
-
-#astro-consent-banner > * {
-  max-width: var(--cb-max-width);
-  margin: 0 auto;
-  padding: var(--cb-padding);
-}
-
-#astro-consent-banner h2 {
-  margin: 0 0 4px;
-  font-size: var(--cb-title-size);
-}
-
-#astro-consent-banner p {
-  margin: 0;
-  font-size: var(--cb-text-size);
-  color: var(--cb-muted);
-}
-
-#astro-consent-banner a {
-  color: var(--cb-accent);
-  text-decoration: underline;
-}
-
-.astro-consent-categories {
-  display: grid;
-  gap: var(--cb-gap);
-  margin-top: var(--cb-gap);
-}
-
-.astro-consent-category {
-  background: var(--cb-surface);
-  padding: 12px;
-  border-radius: var(--cb-radius);
-  border: 1px solid var(--cb-border);
-}
-
-.astro-consent-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: 600;
-}
-
-.astro-consent-description {
-  margin: 4px 0 0 26px;
-  font-size: 0.8rem;
-  color: var(--cb-muted);
-}
-
-.astro-consent-actions {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  margin-top: var(--cb-gap);
-  flex-wrap: wrap;
-}
-
-.astro-consent-actions button {
-  padding: 8px 14px;
-  border-radius: var(--cb-radius);
-  font-size: 0.875rem;
-  cursor: pointer;
-  border: 1px solid var(--cb-btn-border);
-}
-
-.astro-consent-actions button:first-child {
-  background: var(--cb-btn-secondary-bg);
-  color: var(--cb-btn-secondary-text);
-}
-
-.astro-consent-actions button:last-child {
-  background: var(--cb-btn-bg);
-  color: var(--cb-btn-text);
-  border-color: var(--cb-btn-bg);
-}
-`;