@crediball/elements 0.11.0 → 0.12.0

package/dist/{chunk-FOMDJR2B.js → chunk-ELPD754U.js}

@@ -2,22 +2,33 @@
 import {
   getCrediballClient,
   loadRemoteFont,
-  themeToCssVars
+  themeToCssVars,
+  getSystemColorScheme,
+  watchSystemColorScheme
 } from "@crediball/core";
 var _CrediballElement = class _CrediballElement extends HTMLElement {
   constructor() {
     super(...arguments);
     this.client = null;
     this.unsubscribe = null;
+    this.unwatchSystemColorScheme = null;
   }
   static get observedAttributes() {
-    return [..._CrediballElement.CLIENT_ATTRS];
+    return [..._CrediballElement.CLIENT_ATTRS, "color-scheme"];
   }
   connectedCallback() {
     this.connectClient();
+    this.unwatchSystemColorScheme = watchSystemColorScheme(() => {
+      if (!this.explicitColorScheme()) {
+        this.applyRemoteTheme();
+        this.render();
+      }
+    });
   }
   disconnectedCallback() {
     this.teardownClient();
+    this.unwatchSystemColorScheme?.();
+    this.unwatchSystemColorScheme = null;
   }
   /**
    * Only reconnect the shared client when a connection-relevant attribute
@@ -29,10 +40,21 @@ var _CrediballElement = class _CrediballElement extends HTMLElement {
     if (!this.isConnected) return;
     if (_CrediballElement.CLIENT_ATTRS.has(name)) {
       this.connectClient();
+    } else if (name === "color-scheme") {
+      this.applyRemoteTheme();
+      this.render();
     } else {
       this.render();
     }
   }
+  explicitColorScheme() {
+    const attr = this.getAttribute("color-scheme");
+    return attr === "light" || attr === "dark" ? attr : null;
+  }
+  /** "light"/"dark" attribute wins; otherwise follows the live OS/browser preference. */
+  resolvedColorScheme() {
+    return this.explicitColorScheme() ?? getSystemColorScheme();
+  }
   connectClient() {
     this.teardownClient();
     const publishableKey = this.getAttribute("publishable-key");
@@ -59,12 +81,18 @@ var _CrediballElement = class _CrediballElement extends HTMLElement {
    * the shadow boundary, so the shadow-DOM styles pick them up. On by default;
    * set `apply-remote-theme="false"` to theme from your own CSS instead. The
    * published theme takes precedence over host `--crediball-*` vars (dashboard wins).
+   *
+   * If a dark palette is configured on the dashboard, it's applied whenever
+   * the resolved color scheme is "dark" — following the OS/browser's
+   * `prefers-color-scheme` live, or a `color-scheme="light"|"dark"` attribute
+   * you set explicitly (wins over the OS setting, for an app with its own
+   * in-app theme toggle).
    */
   applyRemoteTheme() {
     if (this.getAttribute("apply-remote-theme") === "false") return;
     const theme = this.getSnapshot()?.packages?.ui?.theme;
     if (!theme) return;
-    for (const [cssVar, value] of Object.entries(themeToCssVars(theme))) {
+    for (const [cssVar, value] of Object.entries(themeToCssVars(theme, this.resolvedColorScheme()))) {
       this.style.setProperty(cssVar, value);
     }
     if (theme.fontUrl) loadRemoteFont(theme.fontUrl);
@@ -480,8 +508,8 @@ var CrediballPaywallElement = class extends CrediballElement {
                  </div>
                  <p class="custom-preview" hidden></p>` : ""}
           ${this.renderPromoCode(Boolean(pkgs?.hasActiveCheckoutPromotion))}
-          ${this.renderAutoTopup(packages, pkgs?.autoTopup, currency)}
           <p class="error" hidden></p>
+          ${this.renderAutoTopup(packages, pkgs?.autoTopup, currency)}
           <button class="close" part="close" type="button">Not now</button>
           ${this.referral?.link ? `<div class="referral">
                    <div class="referral-label">${escapeHtml(referralLabel)}</div>

package/dist/crediball-elements.iife.js

@@ -384,6 +384,27 @@ var Crediball = (() => {
   }
 
   // ../core/dist/theme.js
+  function getSystemColorScheme() {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+      return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  function watchSystemColorScheme(cb) {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+      return () => {
+      };
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => cb(mql.matches ? "dark" : "light");
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }
+  function resolveUiTheme(theme, scheme) {
+    if (!theme)
+      return theme ?? null;
+    if (scheme !== "dark" || !theme.dark)
+      return theme;
+    return { ...theme, ...theme.dark };
+  }
   var THEME_CSS_VAR_ENTRIES = [
     ["accent", "--crediball-accent", String],
     ["onAccent", "--crediball-on-accent", String],
@@ -394,12 +415,13 @@ var Crediball = (() => {
     ["radiusCard", "--crediball-radius-card", (v) => `${v}px`],
     ["fontStack", "--crediball-font", String]
   ];
-  function themeToCssVars(theme) {
+  function themeToCssVars(theme, scheme = "light") {
     const vars = {};
-    if (!theme)
+    const resolved = resolveUiTheme(theme, scheme);
+    if (!resolved)
       return vars;
     for (const [key, cssVar, fmt] of THEME_CSS_VAR_ENTRIES) {
-      const value = theme[key];
+      const value = resolved[key];
       if (value != null && value !== "")
         vars[cssVar] = fmt(value);
     }
@@ -428,15 +450,24 @@ var Crediball = (() => {
       super(...arguments);
       this.client = null;
       this.unsubscribe = null;
+      this.unwatchSystemColorScheme = null;
     }
     static get observedAttributes() {
-      return [..._CrediballElement.CLIENT_ATTRS];
+      return [..._CrediballElement.CLIENT_ATTRS, "color-scheme"];
     }
     connectedCallback() {
       this.connectClient();
+      this.unwatchSystemColorScheme = watchSystemColorScheme(() => {
+        if (!this.explicitColorScheme()) {
+          this.applyRemoteTheme();
+          this.render();
+        }
+      });
     }
     disconnectedCallback() {
       this.teardownClient();
+      this.unwatchSystemColorScheme?.();
+      this.unwatchSystemColorScheme = null;
     }
     /**
      * Only reconnect the shared client when a connection-relevant attribute
@@ -448,10 +479,21 @@ var Crediball = (() => {
       if (!this.isConnected) return;
       if (_CrediballElement.CLIENT_ATTRS.has(name)) {
         this.connectClient();
+      } else if (name === "color-scheme") {
+        this.applyRemoteTheme();
+        this.render();
       } else {
         this.render();
       }
     }
+    explicitColorScheme() {
+      const attr = this.getAttribute("color-scheme");
+      return attr === "light" || attr === "dark" ? attr : null;
+    }
+    /** "light"/"dark" attribute wins; otherwise follows the live OS/browser preference. */
+    resolvedColorScheme() {
+      return this.explicitColorScheme() ?? getSystemColorScheme();
+    }
     connectClient() {
       this.teardownClient();
       const publishableKey = this.getAttribute("publishable-key");
@@ -478,12 +520,18 @@ var Crediball = (() => {
      * the shadow boundary, so the shadow-DOM styles pick them up. On by default;
      * set `apply-remote-theme="false"` to theme from your own CSS instead. The
      * published theme takes precedence over host `--crediball-*` vars (dashboard wins).
+     *
+     * If a dark palette is configured on the dashboard, it's applied whenever
+     * the resolved color scheme is "dark" — following the OS/browser's
+     * `prefers-color-scheme` live, or a `color-scheme="light"|"dark"` attribute
+     * you set explicitly (wins over the OS setting, for an app with its own
+     * in-app theme toggle).
      */
     applyRemoteTheme() {
       if (this.getAttribute("apply-remote-theme") === "false") return;
       const theme = this.getSnapshot()?.packages?.ui?.theme;
       if (!theme) return;
-      for (const [cssVar, value] of Object.entries(themeToCssVars(theme))) {
+      for (const [cssVar, value] of Object.entries(themeToCssVars(theme, this.resolvedColorScheme()))) {
         this.style.setProperty(cssVar, value);
       }
       if (theme.fontUrl) loadRemoteFont(theme.fontUrl);
@@ -894,8 +942,8 @@ var Crediball = (() => {
                  </div>
                  <p class="custom-preview" hidden></p>` : ""}
           ${this.renderPromoCode(Boolean(pkgs?.hasActiveCheckoutPromotion))}
-          ${this.renderAutoTopup(packages, pkgs?.autoTopup, currency)}
           <p class="error" hidden></p>
+          ${this.renderAutoTopup(packages, pkgs?.autoTopup, currency)}
           <button class="close" part="close" type="button">Not now</button>
           ${this.referral?.link ? `<div class="referral">
                    <div class="referral-label">${escapeHtml(referralLabel)}</div>

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { CrediballClient, CrediballSnapshot } from '@crediball/core';
+import { CrediballClient, ColorScheme, CrediballSnapshot } from '@crediball/core';
 
 /**
  * Shared base for every <crediball-*> element: reads config from attributes,
@@ -12,6 +12,7 @@ import { CrediballClient, CrediballSnapshot } from '@crediball/core';
 declare abstract class CrediballElement extends HTMLElement {
     protected client: CrediballClient | null;
     private unsubscribe;
+    private unwatchSystemColorScheme;
     private static readonly CLIENT_ATTRS;
     static get observedAttributes(): string[];
     connectedCallback(): void;
@@ -23,6 +24,9 @@ declare abstract class CrediballElement extends HTMLElement {
      * those should just re-render, not tear down and refetch the client.
      */
     attributeChangedCallback(name: string): void;
+    private explicitColorScheme;
+    /** "light"/"dark" attribute wins; otherwise follows the live OS/browser preference. */
+    protected resolvedColorScheme(): ColorScheme;
     private connectClient;
     /**
      * Apply the developer-published theme (served alongside packages) as
@@ -30,6 +34,12 @@ declare abstract class CrediballElement extends HTMLElement {
      * the shadow boundary, so the shadow-DOM styles pick them up. On by default;
      * set `apply-remote-theme="false"` to theme from your own CSS instead. The
      * published theme takes precedence over host `--crediball-*` vars (dashboard wins).
+     *
+     * If a dark palette is configured on the dashboard, it's applied whenever
+     * the resolved color scheme is "dark" — following the OS/browser's
+     * `prefers-color-scheme` live, or a `color-scheme="light"|"dark"` attribute
+     * you set explicitly (wins over the OS setting, for an app with its own
+     * in-app theme toggle).
      */
     private applyRemoteTheme;
     private teardownClient;

package/dist/index.js

@@ -6,7 +6,7 @@ import {
   CrediballReferralCardElement,
   CrediballTopUpButtonElement,
   CrediballUsageElement
-} from "./chunk-FOMDJR2B.js";
+} from "./chunk-ELPD754U.js";
 export {
   CrediballBalanceElement,
   CrediballElement,

package/dist/register.js

@@ -5,7 +5,7 @@ import {
   CrediballReferralCardElement,
   CrediballTopUpButtonElement,
   CrediballUsageElement
-} from "./chunk-FOMDJR2B.js";
+} from "./chunk-ELPD754U.js";
 
 // src/register.ts
 function define(name, ctor) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/elements",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Framework-agnostic web components for showing Crediball credits inside your AI app.",
   "license": "MIT",
   "author": "Filippo Rezzadore <filipporezzadore@gmail.com>",
@@ -56,7 +56,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@crediball/core": "^0.9.0"
+    "@crediball/core": "^0.10.0"
   },
   "devDependencies": {
     "tsup": "^8.3.5",