@enter-pro/cookie-management 0.0.1 → 0.0.2

package/README.md

@@ -1,13 +1,13 @@
-# @enter/cookie-management
+# @enter-pro/cookie-management
 
-Public Enter wrapper for the internal `@converge/cookie-management` cookie consent SDK.
+Public Enter wrapper for the internal Converge cookie consent SDK.
 
 This package intentionally keeps a single public root entry and re-exports the underlying SDK API unchanged.
 
 ## Install
 
 ```bash
-pnpm add @enter/cookie-management
+pnpm add @enter-pro/cookie-management
 ```
 
 ## Usage
@@ -18,7 +18,7 @@ import {
   SUPPORTED_LANGUAGES,
   type Data,
   type SupportedLanguage,
-} from '@enter/cookie-management';
+} from '@enter-pro/cookie-management';
 ```
 
-`@enter/cookie-management/i18n` is not a public entry. Import i18n constants and types from the root package entry instead.
+`@enter-pro/cookie-management/i18n` is not a public entry. Import i18n constants and types from the root package entry instead.

package/dist/index.d.ts

@@ -16,6 +16,8 @@ interface InitOptions {
     locale?: string;
     theme?: 'light' | 'dark';
     policyUrl?: string;
+    /** When true (default), map --cc-* from host CSS variables. When false, use built-in literals. */
+    useHostDesignTokens?: boolean;
 }
 type Surface = 'none' | 'banner' | 'notice';
 interface CookieUIState {

package/dist/index.js

@@ -4129,8 +4129,48 @@ var t4 = (t5) => (e4, o5) => {
   }) : customElements.define(t5, e4);
 };
 
+// ../../converge/cookie-management/src/ui/use-host-design-tokens-property.ts
+var useHostDesignTokensProperty = {
+  type: Boolean,
+  attribute: "data-use-host-tokens",
+  converter: {
+    fromAttribute: (value) => value !== "false",
+    toAttribute: (value) => value ? "true" : "false"
+  },
+  reflect: true
+};
+
+// ../../converge/cookie-management/src/ui/theme-literals.ts
+var LIGHT_THEME_LITERALS = {
+  bg: "#ffffff",
+  bgModal: "#ffffff",
+  fg: "#171717",
+  muted: "#737373",
+  border: "#e5e5e5",
+  shadowCard: "0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.08), 0 8px 24px rgb(0 0 0 / 0.06)",
+  shadowModal: "0 2px 4px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.1), 0 16px 40px rgb(0 0 0 / 0.08)",
+  accent: "#171717",
+  accentFg: "#fafafa",
+  overlayFallback: "rgba(0, 0, 0, 0.4)",
+  ring: "#e5e5e5",
+  radius: "8px"
+};
+var DARK_THEME_LITERALS = {
+  bg: "#27272a",
+  bgModal: "#18181b",
+  fg: "#f5f5f5",
+  muted: "#a3a3a3",
+  border: "rgba(255, 255, 255, 0.15)",
+  shadowCard: "0 1px 2px rgb(0 0 0 / 0.2), 0 8px 24px rgb(0 0 0 / 0.35)",
+  shadowModal: "0 4px 8px rgb(0 0 0 / 0.25), 0 16px 48px rgb(0 0 0 / 0.45)",
+  accent: "#f5f5f5",
+  accentFg: "#0a0a0a",
+  overlayFallback: "rgba(0, 0, 0, 0.68)",
+  ring: "rgba(255, 255, 255, 0.15)"
+};
+
 // ../../converge/cookie-management/src/ui/styles.ts
-var tokenVars = i`
+var hostTokenVars = i`
   :host {
     --cc-font-en: 'Schibsted Grotesk', var(--font-schibsted, ui-sans-serif, system-ui, sans-serif);
     --cc-font-zh: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
@@ -4190,6 +4230,43 @@ var tokenVars = i`
     font-family: var(--cc-font-zh);
   }
 `;
+var literalTokenVars = i`
+  :host([data-use-host-tokens='false']) {
+    --cc-font-en: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
+    --cc-bg: ${r(LIGHT_THEME_LITERALS.bg)};
+    --cc-bg-modal: ${r(LIGHT_THEME_LITERALS.bgModal)};
+    --cc-fg: ${r(LIGHT_THEME_LITERALS.fg)};
+    --cc-muted: ${r(LIGHT_THEME_LITERALS.muted)};
+    --cc-border: ${r(LIGHT_THEME_LITERALS.border)};
+    --cc-shadow-card: ${r(LIGHT_THEME_LITERALS.shadowCard)};
+    --cc-shadow-modal: ${r(LIGHT_THEME_LITERALS.shadowModal)};
+    --cc-accent: ${r(LIGHT_THEME_LITERALS.accent)};
+    --cc-accent-fg: ${r(LIGHT_THEME_LITERALS.accentFg)};
+    --cc-overlay-fallback: ${r(LIGHT_THEME_LITERALS.overlayFallback)};
+    --cc-ring: ${r(LIGHT_THEME_LITERALS.ring)};
+    --cc-radius: ${r(LIGHT_THEME_LITERALS.radius)};
+  }
+
+  :host([data-use-host-tokens='false'][data-theme='dark']) {
+    --cc-bg: ${r(DARK_THEME_LITERALS.bg)};
+    --cc-bg-modal: ${r(DARK_THEME_LITERALS.bgModal)};
+    --cc-fg: ${r(DARK_THEME_LITERALS.fg)};
+    --cc-muted: ${r(DARK_THEME_LITERALS.muted)};
+    --cc-border: ${r(DARK_THEME_LITERALS.border)};
+    --cc-shadow-card: ${r(DARK_THEME_LITERALS.shadowCard)};
+    --cc-shadow-modal: ${r(DARK_THEME_LITERALS.shadowModal)};
+    --cc-accent: ${r(DARK_THEME_LITERALS.accent)};
+    --cc-accent-fg: ${r(DARK_THEME_LITERALS.accentFg)};
+    --cc-overlay-fallback: ${r(DARK_THEME_LITERALS.overlayFallback)};
+    --cc-ring: ${r(DARK_THEME_LITERALS.ring)};
+    color-scheme: dark;
+  }
+
+  :host([data-use-host-tokens='false'][data-theme='light']) {
+    --cc-overlay-fallback: ${r(LIGHT_THEME_LITERALS.overlayFallback)};
+    color-scheme: light;
+  }
+`;
 var controls = i`
   a {
     color: var(--cc-fg);
@@ -4203,7 +4280,7 @@ var controls = i`
     min-height: 40px;
     padding: 0 16px;
     border: 1px solid var(--cc-border);
-    border-radius: var(--radius, 8px);
+    border-radius: var(--cc-radius, var(--radius, 8px));
     background: var(--cc-accent);
     color: var(--cc-accent-fg);
     font: inherit;
@@ -4258,7 +4335,7 @@ var controls = i`
     cursor: pointer;
   }
 `;
-var baseStyles = [tokenVars, controls];
+var baseStyles = [hostTokenVars, literalTokenVars, controls];
 
 // ../../converge/cookie-management/src/ui/components/opt-in-required.ts
 var _OptInRequiredBanner_decorators, _init, _a3;
@@ -4331,6 +4408,7 @@ OptInRequiredBanner.properties = {
   policyUrl: { type: String, attribute: "policy-url" },
   locale: { type: String, reflect: true },
   theme: { type: String, attribute: "data-theme", reflect: true },
+  useHostDesignTokens: useHostDesignTokensProperty,
   visible: { type: Boolean, reflect: true }
 };
 OptInRequiredBanner.styles = [
@@ -4473,6 +4551,7 @@ NoticeOnlyBar.properties = {
   policyUrl: { type: String, attribute: "policy-url" },
   locale: { type: String, reflect: true },
   theme: { type: String, attribute: "data-theme", reflect: true },
+  useHostDesignTokens: useHostDesignTokensProperty,
   visible: { type: Boolean, reflect: true }
 };
 NoticeOnlyBar.styles = [
@@ -4721,6 +4800,7 @@ ConvergePreferenceCenter = __decorateElement(_init3, 0, "ConvergePreferenceCente
 ConvergePreferenceCenter.properties = {
   locale: { type: String, reflect: true },
   theme: { type: String, attribute: "data-theme", reflect: true },
+  useHostDesignTokens: useHostDesignTokensProperty,
   visible: { type: Boolean, reflect: true },
   data: { type: Object, attribute: false },
   functional: { type: Boolean, state: true },
@@ -5009,6 +5089,7 @@ var ConvergeCookieManager = class extends (_a6 = i3) {
     this.data = null;
     this.surface = "none";
     this.prefOpen = false;
+    this.useHostDesignTokens = true;
   }
   emitConsentChange(data) {
     const detail = { data };
@@ -5024,6 +5105,7 @@ var ConvergeCookieManager = class extends (_a6 = i3) {
     return T`
       <converge-opt-in-required
         .theme=${this.theme}
+        .useHostDesignTokens=${this.useHostDesignTokens}
         .visible=${this.surface === "banner" && !this.prefOpen}
         locale=${this.locale}
         policy-url=${this.policyUrl}
@@ -5032,6 +5114,7 @@ var ConvergeCookieManager = class extends (_a6 = i3) {
       ></converge-opt-in-required>
       <converge-notice-only
         .theme=${this.theme}
+        .useHostDesignTokens=${this.useHostDesignTokens}
         .visible=${this.surface === "notice" && !this.prefOpen}
         locale=${this.locale}
         policy-url=${this.policyUrl}
@@ -5039,6 +5122,7 @@ var ConvergeCookieManager = class extends (_a6 = i3) {
       ></converge-notice-only>
       <converge-preference-center
         .theme=${this.theme}
+        .useHostDesignTokens=${this.useHostDesignTokens}
         locale=${this.locale}
         .visible=${this.prefOpen}
         .data=${this.data}
@@ -5053,6 +5137,7 @@ ConvergeCookieManager.properties = {
   policyUrl: { type: String, attribute: "policy-url" },
   locale: { type: String, reflect: true },
   theme: { type: String, attribute: "data-theme", reflect: true },
+  useHostDesignTokens: useHostDesignTokensProperty,
   data: { type: Object, attribute: false },
   surface: { type: String, attribute: false },
   prefOpen: { type: Boolean, attribute: false }
@@ -5098,9 +5183,11 @@ var UIController = class {
     const policyUrl = this.options?.policyUrl ?? "";
     const locale = this.options?.locale ?? "en";
     const theme = this.options?.theme ?? "light";
+    const useHostDesignTokens = this.options?.useHostDesignTokens ?? true;
     root.setAttribute("policy-url", policyUrl);
     root.setAttribute("locale", locale);
     root.setAttribute("data-theme", theme);
+    root.setAttribute("data-use-host-tokens", useHostDesignTokens ? "true" : "false");
     root.dir = getLocaleDir(locale);
   }
 };
@@ -5123,7 +5210,8 @@ var _CookieManager = class _CookieManager {
     this.config = {
       locale: "en",
       policyUrl: DEFAULT_POLICY_URL,
-      theme: DEFAULT_THEME
+      theme: DEFAULT_THEME,
+      useHostDesignTokens: true
     };
   }
   static getInstance() {
@@ -5225,7 +5313,8 @@ var _CookieManager = class _CookieManager {
     this.config = {
       theme: options?.theme ?? this.config.theme,
       policyUrl: options?.policyUrl ?? this.config.policyUrl,
-      locale: i18n.locale
+      locale: i18n.locale,
+      useHostDesignTokens: options?.useHostDesignTokens ?? this.config.useHostDesignTokens
     };
     this.ui.configure(this.config);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enter-pro/cookie-management",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "description": "Public Enter cookie consent SDK wrapper.",
   "type": "module",
@@ -25,7 +25,7 @@
     "typescript": "^5.9.2",
     "vitest": "^3.2.4",
     "@workspace/typescript-config": "0.0.0",
-    "@converge/cookie-management": "0.1.1"
+    "@converge/cookie-management": "0.1.4"
   },
   "publishConfig": {
     "access": "public"