@crediball/elements 0.10.0 → 0.12.0

package/dist/{chunk-YP5JNDTD.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);
@@ -217,13 +245,24 @@ var STYLE = `
   .card {
     width: 100%;
     max-width: 420px;
+    /* Cap to the overlay's own (viewport-correct, since it's fixed/inset:0)
+       content box and scroll internally past that \u2014 otherwise a host with
+       many optional sections enabled (balance, subscribe, promo code,
+       packages, custom amount, auto top-up, referral) can produce a card
+       taller than the mobile viewport, which the centered overlay then
+       clips top and bottom with no way to reach the rest. */
+    max-height: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+    box-sizing: border-box;
     padding: 32px;
     border-radius: var(--crediball-radius-card, 18px);
     background: var(--crediball-canvas, #ffffff);
     color: var(--crediball-ink, #1d1d1f);
   }
   .balance-row { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--crediball-hairline, #e0e0e0); }
-  .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--crediball-ink-muted, #7a7a7a); margin-bottom: 4px; }
+  .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--crediball-ink-muted, #7a7a7a); margin-bottom: 4px; }
   .balance-value { font-size: 22px; font-weight: 600; }
   h3 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
   p.desc { margin: 8px 0 0; font-size: 14px; color: var(--crediball-ink-muted, #7a7a7a); }
@@ -236,14 +275,17 @@ var STYLE = `
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 16px;
     background: var(--crediball-accent, #0066cc);
     color: var(--crediball-on-accent, #ffffff);
     font: inherit;
-    font-size: 17px;
     padding: 11px 22px;
     border-radius: var(--crediball-radius, 9999px);
   }
-  button.option .meta { opacity: 0.85; font-size: 14px; }
+  .option-left { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
+  .option-name { font-size: 17px; font-weight: 600; line-height: 1.2; }
+  .option-credits { font-size: 13px; opacity: 0.85; line-height: 1.2; }
+  .option-price { font-size: 17px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
   .custom-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
   .custom-row .sym { font-size: 14px; color: var(--crediball-ink-muted, #7a7a7a); }
   .custom-row input {
@@ -304,6 +346,8 @@ var STYLE = `
     color: var(--crediball-ink, #1d1d1f);
     outline: none;
   }
+  .promo-code-input.invalid { border-color: var(--crediball-accent, #0066cc); }
+  .promo-code-error { margin: 6px 0 0; font-size: 12px; color: var(--crediball-accent, #0066cc); }
   .autotopup { margin-top: 16px; }
   .autotopup-toggle {
     appearance: none; border: none; cursor: pointer; background: transparent; padding: 0;
@@ -326,7 +370,7 @@ var STYLE = `
   }
   .autotopup-hint { margin: 6px 0 0; font-size: 11px; color: var(--crediball-ink-muted, #7a7a7a); }
   .referral { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--crediball-hairline, #e0e0e0); }
-  .referral-label { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--crediball-ink-muted, #7a7a7a); }
+  .referral-label { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--crediball-ink-muted, #7a7a7a); white-space: pre-line; }
   .referral-row { display: flex; gap: 8px; align-items: center; }
   .referral-row .link {
     flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
@@ -414,6 +458,10 @@ var CrediballPaywallElement = class extends CrediballElement {
     const plans = pkgs?.activeSubscription ? [] : pkgs?.subscriptionPlans ?? [];
     const custom = pkgs?.customTopup;
     const showCustom = Boolean(custom?.enabled);
+    const referralReward = this.referral?.rewardCredits ?? 0;
+    const referredReward = this.referral?.referredRewardCredits ?? 0;
+    const defaultReferralLabel = referredReward > 0 ? "Refer a friend.\nYou earn {credits} credits and your friend {referredCredits} credits" : "Refer a friend \xB7 earn {credits} credits";
+    const referralLabel = (this.getAttribute("referral-label") ?? defaultReferralLabel).replace("{credits}", formatCredits(referralReward)).replace("{referredCredits}", formatCredits(referredReward));
     this.shadow.innerHTML = `
       <style>${STYLE}</style>
       <div class="overlay" part="overlay">
@@ -428,18 +476,23 @@ var CrediballPaywallElement = class extends CrediballElement {
                    ${plans.map(
       (p) => `
                      <button class="option" data-kind="plan" data-id="${escapeHtml(p.id)}">
-                       <span>${escapeHtml(p.name)}</span>
-                       <span class="meta">${formatMoney(p.price, currency)}/${PERIOD_SUFFIX[p.period] ?? p.period} \xB7 ${formatCredits(p.credits)} cr</span>
+                       <div class="option-left">
+                         <div class="option-name">${escapeHtml(p.name)}</div>
+                         <div class="option-credits">${formatCredits(p.credits)} credits</div>
+                       </div>
+                       <div class="option-price">${formatMoney(p.price, currency)}/${PERIOD_SUFFIX[p.period] ?? p.period}</div>
                      </button>`
     ).join("")}
                  </div>` : ""}
-          ${this.renderPromoCode(Boolean(pkgs?.hasActiveCheckoutPromotion))}
           <div class="list">
             ${packages.length ? packages.map(
       (p) => `
                   <button class="option" data-kind="package" data-id="${escapeHtml(p.id)}">
-                    <span>${escapeHtml(p.name)}</span>
-                    <span class="meta">${formatMoney(p.price, currency)} \xB7 ${formatCredits(p.credits)} cr</span>
+                    <div class="option-left">
+                      <div class="option-name">${escapeHtml(p.name)}</div>
+                      <div class="option-credits">${formatCredits(p.credits)} credits</div>
+                    </div>
+                    <div class="option-price">${formatMoney(p.price, currency)}</div>
                   </button>`
     ).join("") : showCustom ? "" : legacyAmounts.map(
       (a) => `
@@ -454,16 +507,12 @@ var CrediballPaywallElement = class extends CrediballElement {
                    <button class="custom-add" type="button">${escapeHtml(addButtonText)}</button>
                  </div>
                  <p class="custom-preview" hidden></p>` : ""}
-          ${this.renderAutoTopup(packages, pkgs?.autoTopup, currency)}
+          ${this.renderPromoCode(Boolean(pkgs?.hasActiveCheckoutPromotion))}
           <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(
-      (this.getAttribute("referral-label") ?? "Refer a friend \xB7 earn {credits} credits").replace(
-        "{credits}",
-        formatCredits(this.referral.rewardCredits ?? 0)
-      )
-    )}</div>
+                   <div class="referral-label">${escapeHtml(referralLabel)}</div>
                    <div class="referral-row">
                      <div class="link" title="${escapeHtml(this.referral.link)}">${escapeHtml(this.referral.link)}</div>
                      <button class="referral-copy" type="button">${this.referralCopied ? "Copied!" : "Copy"}</button>
@@ -505,6 +554,24 @@ var CrediballPaywallElement = class extends CrediballElement {
       this.promoCodeOpen = true;
       this.render();
     });
+    const promoInput = this.shadow.querySelector(".promo-code-input");
+    const promoErrorEl = this.shadow.querySelector(".promo-code-error");
+    if (promoInput && promoErrorEl) {
+      let promoTouched = false;
+      const checkPromoFormat = () => {
+        const value = promoInput.value.trim();
+        const valid = !value || /^[A-Za-z0-9_-]+$/.test(value);
+        const showError2 = promoTouched && !valid;
+        promoInput.classList.toggle("invalid", showError2);
+        promoErrorEl.hidden = !showError2;
+        if (showError2) promoErrorEl.textContent = "Promo codes only contain letters, numbers, - and _.";
+      };
+      promoInput.addEventListener("blur", () => {
+        promoTouched = true;
+        checkPromoFormat();
+      });
+      promoInput.addEventListener("input", checkPromoFormat);
+    }
     if (showCustom) {
       const input = this.shadow.querySelector(".custom-input");
       const addBtn = this.shadow.querySelector(".custom-add");
@@ -572,8 +639,9 @@ var CrediballPaywallElement = class extends CrediballElement {
    * once the app has an active Checkout promotion (same as the custom-amount
    * field auto-following the dashboard's custom-topup config) — the
    * `allow-promo-code` attribute is only needed to force it on before you've
-   * set one up. Not validated client-side — an invalid code simply doesn't
-   * grant a bonus when the top-up is processed. */
+   * set one up. Format-only client check (flags an obvious typo/paste
+   * mistake on blur, see wireUpPromoCode()) — whether the code is actually
+   * active/redeemable is only known server-side when a purchase is made. */
   renderPromoCode(hasActiveCheckoutPromotion) {
     if (!this.hasAttribute("allow-promo-code") && !hasActiveCheckoutPromotion) return "";
     const label = this.getAttribute("promo-code-label") ?? "Have a promo code?";
@@ -585,6 +653,7 @@ var CrediballPaywallElement = class extends CrediballElement {
     return `<div class="promo-code">
       <div class="promo-code-label">${escapeHtml(label)}</div>
       <input class="promo-code-input" placeholder="PROMOCODE" aria-label="Promo code" />
+      <p class="promo-code-error" hidden></p>
     </div>`;
   }
   /** The current promo code input value (uppercased, trimmed), or undefined

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);
@@ -631,13 +679,24 @@ var Crediball = (() => {
   .card {
     width: 100%;
     max-width: 420px;
+    /* Cap to the overlay's own (viewport-correct, since it's fixed/inset:0)
+       content box and scroll internally past that \u2014 otherwise a host with
+       many optional sections enabled (balance, subscribe, promo code,
+       packages, custom amount, auto top-up, referral) can produce a card
+       taller than the mobile viewport, which the centered overlay then
+       clips top and bottom with no way to reach the rest. */
+    max-height: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+    box-sizing: border-box;
     padding: 32px;
     border-radius: var(--crediball-radius-card, 18px);
     background: var(--crediball-canvas, #ffffff);
     color: var(--crediball-ink, #1d1d1f);
   }
   .balance-row { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--crediball-hairline, #e0e0e0); }
-  .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--crediball-ink-muted, #7a7a7a); margin-bottom: 4px; }
+  .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--crediball-ink-muted, #7a7a7a); margin-bottom: 4px; }
   .balance-value { font-size: 22px; font-weight: 600; }
   h3 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
   p.desc { margin: 8px 0 0; font-size: 14px; color: var(--crediball-ink-muted, #7a7a7a); }
@@ -650,14 +709,17 @@ var Crediball = (() => {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 16px;
     background: var(--crediball-accent, #0066cc);
     color: var(--crediball-on-accent, #ffffff);
     font: inherit;
-    font-size: 17px;
     padding: 11px 22px;
     border-radius: var(--crediball-radius, 9999px);
   }
-  button.option .meta { opacity: 0.85; font-size: 14px; }
+  .option-left { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
+  .option-name { font-size: 17px; font-weight: 600; line-height: 1.2; }
+  .option-credits { font-size: 13px; opacity: 0.85; line-height: 1.2; }
+  .option-price { font-size: 17px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
   .custom-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
   .custom-row .sym { font-size: 14px; color: var(--crediball-ink-muted, #7a7a7a); }
   .custom-row input {
@@ -718,6 +780,8 @@ var Crediball = (() => {
     color: var(--crediball-ink, #1d1d1f);
     outline: none;
   }
+  .promo-code-input.invalid { border-color: var(--crediball-accent, #0066cc); }
+  .promo-code-error { margin: 6px 0 0; font-size: 12px; color: var(--crediball-accent, #0066cc); }
   .autotopup { margin-top: 16px; }
   .autotopup-toggle {
     appearance: none; border: none; cursor: pointer; background: transparent; padding: 0;
@@ -740,7 +804,7 @@ var Crediball = (() => {
   }
   .autotopup-hint { margin: 6px 0 0; font-size: 11px; color: var(--crediball-ink-muted, #7a7a7a); }
   .referral { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--crediball-hairline, #e0e0e0); }
-  .referral-label { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--crediball-ink-muted, #7a7a7a); }
+  .referral-label { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--crediball-ink-muted, #7a7a7a); white-space: pre-line; }
   .referral-row { display: flex; gap: 8px; align-items: center; }
   .referral-row .link {
     flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
@@ -828,6 +892,10 @@ var Crediball = (() => {
       const plans = pkgs?.activeSubscription ? [] : pkgs?.subscriptionPlans ?? [];
       const custom = pkgs?.customTopup;
       const showCustom = Boolean(custom?.enabled);
+      const referralReward = this.referral?.rewardCredits ?? 0;
+      const referredReward = this.referral?.referredRewardCredits ?? 0;
+      const defaultReferralLabel = referredReward > 0 ? "Refer a friend.\nYou earn {credits} credits and your friend {referredCredits} credits" : "Refer a friend \xB7 earn {credits} credits";
+      const referralLabel = (this.getAttribute("referral-label") ?? defaultReferralLabel).replace("{credits}", formatCredits(referralReward)).replace("{referredCredits}", formatCredits(referredReward));
       this.shadow.innerHTML = `
       <style>${STYLE}</style>
       <div class="overlay" part="overlay">
@@ -842,18 +910,23 @@ var Crediball = (() => {
                    ${plans.map(
         (p) => `
                      <button class="option" data-kind="plan" data-id="${escapeHtml(p.id)}">
-                       <span>${escapeHtml(p.name)}</span>
-                       <span class="meta">${formatMoney(p.price, currency)}/${PERIOD_SUFFIX[p.period] ?? p.period} \xB7 ${formatCredits(p.credits)} cr</span>
+                       <div class="option-left">
+                         <div class="option-name">${escapeHtml(p.name)}</div>
+                         <div class="option-credits">${formatCredits(p.credits)} credits</div>
+                       </div>
+                       <div class="option-price">${formatMoney(p.price, currency)}/${PERIOD_SUFFIX[p.period] ?? p.period}</div>
                      </button>`
       ).join("")}
                  </div>` : ""}
-          ${this.renderPromoCode(Boolean(pkgs?.hasActiveCheckoutPromotion))}
           <div class="list">
             ${packages.length ? packages.map(
         (p) => `
                   <button class="option" data-kind="package" data-id="${escapeHtml(p.id)}">
-                    <span>${escapeHtml(p.name)}</span>
-                    <span class="meta">${formatMoney(p.price, currency)} \xB7 ${formatCredits(p.credits)} cr</span>
+                    <div class="option-left">
+                      <div class="option-name">${escapeHtml(p.name)}</div>
+                      <div class="option-credits">${formatCredits(p.credits)} credits</div>
+                    </div>
+                    <div class="option-price">${formatMoney(p.price, currency)}</div>
                   </button>`
       ).join("") : showCustom ? "" : legacyAmounts.map(
         (a) => `
@@ -868,16 +941,12 @@ var Crediball = (() => {
                    <button class="custom-add" type="button">${escapeHtml(addButtonText)}</button>
                  </div>
                  <p class="custom-preview" hidden></p>` : ""}
-          ${this.renderAutoTopup(packages, pkgs?.autoTopup, currency)}
+          ${this.renderPromoCode(Boolean(pkgs?.hasActiveCheckoutPromotion))}
           <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(
-        (this.getAttribute("referral-label") ?? "Refer a friend \xB7 earn {credits} credits").replace(
-          "{credits}",
-          formatCredits(this.referral.rewardCredits ?? 0)
-        )
-      )}</div>
+                   <div class="referral-label">${escapeHtml(referralLabel)}</div>
                    <div class="referral-row">
                      <div class="link" title="${escapeHtml(this.referral.link)}">${escapeHtml(this.referral.link)}</div>
                      <button class="referral-copy" type="button">${this.referralCopied ? "Copied!" : "Copy"}</button>
@@ -919,6 +988,24 @@ var Crediball = (() => {
         this.promoCodeOpen = true;
         this.render();
       });
+      const promoInput = this.shadow.querySelector(".promo-code-input");
+      const promoErrorEl = this.shadow.querySelector(".promo-code-error");
+      if (promoInput && promoErrorEl) {
+        let promoTouched = false;
+        const checkPromoFormat = () => {
+          const value = promoInput.value.trim();
+          const valid = !value || /^[A-Za-z0-9_-]+$/.test(value);
+          const showError2 = promoTouched && !valid;
+          promoInput.classList.toggle("invalid", showError2);
+          promoErrorEl.hidden = !showError2;
+          if (showError2) promoErrorEl.textContent = "Promo codes only contain letters, numbers, - and _.";
+        };
+        promoInput.addEventListener("blur", () => {
+          promoTouched = true;
+          checkPromoFormat();
+        });
+        promoInput.addEventListener("input", checkPromoFormat);
+      }
       if (showCustom) {
         const input = this.shadow.querySelector(".custom-input");
         const addBtn = this.shadow.querySelector(".custom-add");
@@ -986,8 +1073,9 @@ var Crediball = (() => {
      * once the app has an active Checkout promotion (same as the custom-amount
      * field auto-following the dashboard's custom-topup config) — the
      * `allow-promo-code` attribute is only needed to force it on before you've
-     * set one up. Not validated client-side — an invalid code simply doesn't
-     * grant a bonus when the top-up is processed. */
+     * set one up. Format-only client check (flags an obvious typo/paste
+     * mistake on blur, see wireUpPromoCode()) — whether the code is actually
+     * active/redeemable is only known server-side when a purchase is made. */
     renderPromoCode(hasActiveCheckoutPromotion) {
       if (!this.hasAttribute("allow-promo-code") && !hasActiveCheckoutPromotion) return "";
       const label = this.getAttribute("promo-code-label") ?? "Have a promo code?";
@@ -999,6 +1087,7 @@ var Crediball = (() => {
       return `<div class="promo-code">
       <div class="promo-code-label">${escapeHtml(label)}</div>
       <input class="promo-code-input" placeholder="PROMOCODE" aria-label="Promo code" />
+      <p class="promo-code-error" hidden></p>
     </div>`;
     }
     /** The current promo code input value (uppercased, trimmed), or undefined

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;
@@ -127,8 +137,9 @@ declare class CrediballPaywallElement extends CrediballElement {
      * once the app has an active Checkout promotion (same as the custom-amount
      * field auto-following the dashboard's custom-topup config) — the
      * `allow-promo-code` attribute is only needed to force it on before you've
-     * set one up. Not validated client-side — an invalid code simply doesn't
-     * grant a bonus when the top-up is processed. */
+     * set one up. Format-only client check (flags an obvious typo/paste
+     * mistake on blur, see wireUpPromoCode()) — whether the code is actually
+     * active/redeemable is only known server-side when a purchase is made. */
     private renderPromoCode;
     /** The current promo code input value (uppercased, trimmed), or undefined
      * when the field isn't shown/filled in. Read at click time — never re-render

package/dist/index.js

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

package/dist/register.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/elements",
-  "version": "0.10.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",