@crediball/elements 0.10.0 → 0.11.0

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

@@ -217,13 +217,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 +247,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 +318,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 +342,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 +430,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 +448,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 +479,12 @@ var CrediballPaywallElement = class extends CrediballElement {
                    <button class="custom-add" type="button">${escapeHtml(addButtonText)}</button>
                  </div>
                  <p class="custom-preview" hidden></p>` : ""}
+          ${this.renderPromoCode(Boolean(pkgs?.hasActiveCheckoutPromotion))}
           ${this.renderAutoTopup(packages, pkgs?.autoTopup, currency)}
           <p class="error" hidden></p>
           <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 +526,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 +611,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 +625,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

@@ -631,13 +631,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 +661,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 +732,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 +756,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 +844,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 +862,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 +893,12 @@ var Crediball = (() => {
                    <button class="custom-add" type="button">${escapeHtml(addButtonText)}</button>
                  </div>
                  <p class="custom-preview" hidden></p>` : ""}
+          ${this.renderPromoCode(Boolean(pkgs?.hasActiveCheckoutPromotion))}
           ${this.renderAutoTopup(packages, pkgs?.autoTopup, currency)}
           <p class="error" hidden></p>
           <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 +940,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 +1025,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 +1039,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

@@ -127,8 +127,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-FOMDJR2B.js";
 export {
   CrediballBalanceElement,
   CrediballElement,

package/dist/register.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/elements",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Framework-agnostic web components for showing Crediball credits inside your AI app.",
   "license": "MIT",
   "author": "Filippo Rezzadore <filipporezzadore@gmail.com>",