@revenuecat/purchases-ui-js 4.8.24 → 4.9.0

package/dist/components/input-text/InputText.svelte

@@ -104,16 +104,39 @@
     }
   }
 
-  function readValidity(input: HTMLInputElement): boolean {
-    if (compiledPattern?.mode === "custom") {
+  // Constraints the component checks itself, in the order they are reported.
+  // The value of the custom validity message is the failing rule, so
+  // `failingRuleFromValidity` can map `customError` back to it.
+  function customFailingRule(
+    input: HTMLInputElement,
+  ): InputTextValidationRule | null {
+    // `maxlength` is deliberately not rendered: the browser would truncate
+    // typing at the limit with no feedback, which reads as a broken input.
+    // Checking here lets the value exceed the limit and show the error copy.
+    if (
+      type !== "number" &&
+      validation?.maxLength != null &&
+      input.value.length > validation.maxLength
+    ) {
+      return "maxLength";
+    }
+    if (
+      compiledPattern?.mode === "custom" &&
       // Mirrors the native `pattern` semantics: empty values are left to
       // `required`, everything else must match the whole value.
-      const mismatch =
-        input.value !== "" && !compiledPattern.regex.test(input.value);
-      input.setCustomValidity(mismatch ? "pattern" : "");
+      input.value !== "" &&
+      !compiledPattern.regex.test(input.value)
+    ) {
+      return "pattern";
     }
+    return null;
+  }
+
+  function readValidity(input: HTMLInputElement): boolean {
+    const customRule = customFailingRule(input);
+    input.setCustomValidity(customRule ?? "");
     const { validity } = input;
-    failedRule = failingRuleFromValidity(validity);
+    failedRule = failingRuleFromValidity(validity, customRule);
     return validity.valid;
   }
 
@@ -332,12 +355,13 @@
   // ignore length/pattern on `type="number"` and min/max on text-like types.
   // `step="any"` lifts the implicit `step=1` for the `decimal` keyboard, which
   // would otherwise flag decimals as `stepMismatch`; `numeric` keeps it so the
-  // integer keypad and non-integer values agree. Patterns the browser would
-  // reject are enforced in `readValidity` instead of being rendered.
+  // integer keypad and non-integer values agree. `maxLength` and patterns the
+  // browser would reject are enforced in `readValidity` instead of being
+  // rendered (see `customFailingRule`).
   const constraintAttributes = $derived.by(
     (): Pick<
       HTMLInputAttributes,
-      "min" | "max" | "step" | "minlength" | "maxlength" | "pattern"
+      "min" | "max" | "step" | "minlength" | "pattern"
     > =>
       type === "number"
         ? {
@@ -347,7 +371,6 @@
           }
         : {
             minlength: validation?.minLength ?? undefined,
-            maxlength: validation?.maxLength ?? undefined,
             pattern:
               compiledPattern?.mode === "native"
                 ? (validation?.pattern ?? undefined)

package/dist/components/input-text/validity-rule.d.ts

@@ -9,7 +9,8 @@ import type { InputTextValidationRule } from "../../types/components/input-text"
  * `stepMismatch` (a non-integer on the `numeric` keyboard) falls back to
  * `format` as well.
  *
- * `customError` is only ever set by the component for a `pattern` the browser
- * cannot compile itself, so it is reported as `pattern`.
+ * `customError` is only ever set by the component itself, for the constraints
+ * it checks instead of the browser (`maxLength`, and a `pattern` the browser
+ * cannot compile); `customRule` says which one failed.
  */
-export declare function failingRuleFromValidity(validity: ValidityState): InputTextValidationRule | null;
+export declare function failingRuleFromValidity(validity: ValidityState, customRule?: InputTextValidationRule | null): InputTextValidationRule | null;

package/dist/components/input-text/validity-rule.js

@@ -8,10 +8,11 @@
  * `stepMismatch` (a non-integer on the `numeric` keyboard) falls back to
  * `format` as well.
  *
- * `customError` is only ever set by the component for a `pattern` the browser
- * cannot compile itself, so it is reported as `pattern`.
+ * `customError` is only ever set by the component itself, for the constraints
+ * it checks instead of the browser (`maxLength`, and a `pattern` the browser
+ * cannot compile); `customRule` says which one failed.
  */
-export function failingRuleFromValidity(validity) {
+export function failingRuleFromValidity(validity, customRule = null) {
     if (validity.valid) {
         return null;
     }
@@ -30,7 +31,10 @@ export function failingRuleFromValidity(validity) {
     if (validity.tooLong) {
         return "maxLength";
     }
-    if (validity.patternMismatch || validity.customError) {
+    if (validity.customError && customRule) {
+        return customRule;
+    }
+    if (validity.patternMismatch) {
         return "pattern";
     }
     if (validity.typeMismatch || validity.badInput || validity.stepMismatch) {

package/dist/components/paywall/Paywall.svelte

@@ -496,6 +496,10 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
     height: 100%;
 
     transition-property: filter, transform;

package/dist/components/paywall/fixtures/variables.d.ts

@@ -22,6 +22,11 @@ export declare const VARIABLES: Readonly<{
         readonly "product.offer_price_per_week": "$0.50";
         readonly "product.offer_price_per_month": "$1.99";
         readonly "product.offer_price_per_year": "$23.88";
+        readonly "product.offer_price_with_zero": "$1.99";
+        readonly "product.offer_price_with_zero_per_day": "$0.07";
+        readonly "product.offer_price_with_zero_per_week": "$0.50";
+        readonly "product.offer_price_with_zero_per_month": "$1.99";
+        readonly "product.offer_price_with_zero_per_year": "$23.88";
         readonly "product.offer_period": "week";
         readonly "product.offer_period_abbreviated": "wk";
         readonly "product.offer_period_in_days": "7";
@@ -59,6 +64,11 @@ export declare const VARIABLES: Readonly<{
         readonly "product.offer_price_per_week": "$0.50";
         readonly "product.offer_price_per_month": "$1.99";
         readonly "product.offer_price_per_year": "$23.88";
+        readonly "product.offer_price_with_zero": "$1.99";
+        readonly "product.offer_price_with_zero_per_day": "$0.07";
+        readonly "product.offer_price_with_zero_per_week": "$0.50";
+        readonly "product.offer_price_with_zero_per_month": "$1.99";
+        readonly "product.offer_price_with_zero_per_year": "$23.88";
         readonly "product.offer_period": "week";
         readonly "product.offer_period_abbreviated": "wk";
         readonly "product.offer_period_in_days": "7";
@@ -96,6 +106,11 @@ export declare const VARIABLES: Readonly<{
         readonly "product.offer_price_per_week": "$0.50";
         readonly "product.offer_price_per_month": "$1.99";
         readonly "product.offer_price_per_year": "$23.88";
+        readonly "product.offer_price_with_zero": "$1.99";
+        readonly "product.offer_price_with_zero_per_day": "$0.07";
+        readonly "product.offer_price_with_zero_per_week": "$0.50";
+        readonly "product.offer_price_with_zero_per_month": "$1.99";
+        readonly "product.offer_price_with_zero_per_year": "$23.88";
         readonly "product.offer_period": "week";
         readonly "product.offer_period_abbreviated": "wk";
         readonly "product.offer_period_in_days": "7";
@@ -133,6 +148,11 @@ export declare const VARIABLES: Readonly<{
         readonly "product.offer_price_per_week": "$0.50";
         readonly "product.offer_price_per_month": "$1.99";
         readonly "product.offer_price_per_year": "$23.88";
+        readonly "product.offer_price_with_zero": "$1.99";
+        readonly "product.offer_price_with_zero_per_day": "$0.07";
+        readonly "product.offer_price_with_zero_per_week": "$0.50";
+        readonly "product.offer_price_with_zero_per_month": "$1.99";
+        readonly "product.offer_price_with_zero_per_year": "$23.88";
         readonly "product.offer_period": "week";
         readonly "product.offer_period_abbreviated": "wk";
         readonly "product.offer_period_in_days": "7";
@@ -170,6 +190,11 @@ export declare const VARIABLES: Readonly<{
         readonly "product.offer_price_per_week": "$0.50";
         readonly "product.offer_price_per_month": "$1.99";
         readonly "product.offer_price_per_year": "$23.88";
+        readonly "product.offer_price_with_zero": "$1.99";
+        readonly "product.offer_price_with_zero_per_day": "$0.07";
+        readonly "product.offer_price_with_zero_per_week": "$0.50";
+        readonly "product.offer_price_with_zero_per_month": "$1.99";
+        readonly "product.offer_price_with_zero_per_year": "$23.88";
         readonly "product.offer_period": "week";
         readonly "product.offer_period_abbreviated": "wk";
         readonly "product.offer_period_in_days": "7";
@@ -207,6 +232,11 @@ export declare const VARIABLES: Readonly<{
         readonly "product.offer_price_per_week": "$0.50";
         readonly "product.offer_price_per_month": "$1.99";
         readonly "product.offer_price_per_year": "$23.88";
+        readonly "product.offer_price_with_zero": "$1.99";
+        readonly "product.offer_price_with_zero_per_day": "$0.07";
+        readonly "product.offer_price_with_zero_per_week": "$0.50";
+        readonly "product.offer_price_with_zero_per_month": "$1.99";
+        readonly "product.offer_price_with_zero_per_year": "$23.88";
         readonly "product.offer_period": "week";
         readonly "product.offer_period_abbreviated": "wk";
         readonly "product.offer_period_in_days": "7";
@@ -244,6 +274,11 @@ export declare const VARIABLES: Readonly<{
         readonly "product.offer_price_per_week": "";
         readonly "product.offer_price_per_month": "";
         readonly "product.offer_price_per_year": "";
+        readonly "product.offer_price_with_zero": "";
+        readonly "product.offer_price_with_zero_per_day": "";
+        readonly "product.offer_price_with_zero_per_week": "";
+        readonly "product.offer_price_with_zero_per_month": "";
+        readonly "product.offer_price_with_zero_per_year": "";
         readonly "product.offer_period": "";
         readonly "product.offer_period_abbreviated": "";
         readonly "product.offer_period_in_days": "";

package/dist/components/paywall/fixtures/variables.js

@@ -23,6 +23,11 @@ export const VARIABLES = Object.freeze({
         "product.offer_price_per_week": "$0.50",
         "product.offer_price_per_month": "$1.99",
         "product.offer_price_per_year": "$23.88",
+        "product.offer_price_with_zero": "$1.99",
+        "product.offer_price_with_zero_per_day": "$0.07",
+        "product.offer_price_with_zero_per_week": "$0.50",
+        "product.offer_price_with_zero_per_month": "$1.99",
+        "product.offer_price_with_zero_per_year": "$23.88",
         "product.offer_period": "week",
         "product.offer_period_abbreviated": "wk",
         "product.offer_period_in_days": "7",
@@ -60,6 +65,11 @@ export const VARIABLES = Object.freeze({
         "product.offer_price_per_week": "$0.50",
         "product.offer_price_per_month": "$1.99",
         "product.offer_price_per_year": "$23.88",
+        "product.offer_price_with_zero": "$1.99",
+        "product.offer_price_with_zero_per_day": "$0.07",
+        "product.offer_price_with_zero_per_week": "$0.50",
+        "product.offer_price_with_zero_per_month": "$1.99",
+        "product.offer_price_with_zero_per_year": "$23.88",
         "product.offer_period": "week",
         "product.offer_period_abbreviated": "wk",
         "product.offer_period_in_days": "7",
@@ -97,6 +107,11 @@ export const VARIABLES = Object.freeze({
         "product.offer_price_per_week": "$0.50",
         "product.offer_price_per_month": "$1.99",
         "product.offer_price_per_year": "$23.88",
+        "product.offer_price_with_zero": "$1.99",
+        "product.offer_price_with_zero_per_day": "$0.07",
+        "product.offer_price_with_zero_per_week": "$0.50",
+        "product.offer_price_with_zero_per_month": "$1.99",
+        "product.offer_price_with_zero_per_year": "$23.88",
         "product.offer_period": "week",
         "product.offer_period_abbreviated": "wk",
         "product.offer_period_in_days": "7",
@@ -134,6 +149,11 @@ export const VARIABLES = Object.freeze({
         "product.offer_price_per_week": "$0.50",
         "product.offer_price_per_month": "$1.99",
         "product.offer_price_per_year": "$23.88",
+        "product.offer_price_with_zero": "$1.99",
+        "product.offer_price_with_zero_per_day": "$0.07",
+        "product.offer_price_with_zero_per_week": "$0.50",
+        "product.offer_price_with_zero_per_month": "$1.99",
+        "product.offer_price_with_zero_per_year": "$23.88",
         "product.offer_period": "week",
         "product.offer_period_abbreviated": "wk",
         "product.offer_period_in_days": "7",
@@ -171,6 +191,11 @@ export const VARIABLES = Object.freeze({
         "product.offer_price_per_week": "$0.50",
         "product.offer_price_per_month": "$1.99",
         "product.offer_price_per_year": "$23.88",
+        "product.offer_price_with_zero": "$1.99",
+        "product.offer_price_with_zero_per_day": "$0.07",
+        "product.offer_price_with_zero_per_week": "$0.50",
+        "product.offer_price_with_zero_per_month": "$1.99",
+        "product.offer_price_with_zero_per_year": "$23.88",
         "product.offer_period": "week",
         "product.offer_period_abbreviated": "wk",
         "product.offer_period_in_days": "7",
@@ -208,6 +233,11 @@ export const VARIABLES = Object.freeze({
         "product.offer_price_per_week": "$0.50",
         "product.offer_price_per_month": "$1.99",
         "product.offer_price_per_year": "$23.88",
+        "product.offer_price_with_zero": "$1.99",
+        "product.offer_price_with_zero_per_day": "$0.07",
+        "product.offer_price_with_zero_per_week": "$0.50",
+        "product.offer_price_with_zero_per_month": "$1.99",
+        "product.offer_price_with_zero_per_year": "$23.88",
         "product.offer_period": "week",
         "product.offer_period_abbreviated": "wk",
         "product.offer_period_in_days": "7",
@@ -245,6 +275,11 @@ export const VARIABLES = Object.freeze({
         "product.offer_price_per_week": "",
         "product.offer_price_per_month": "",
         "product.offer_price_per_year": "",
+        "product.offer_price_with_zero": "",
+        "product.offer_price_with_zero_per_day": "",
+        "product.offer_price_with_zero_per_week": "",
+        "product.offer_price_with_zero_per_month": "",
+        "product.offer_price_with_zero_per_year": "",
         "product.offer_period": "",
         "product.offer_period_abbreviated": "",
         "product.offer_period_in_days": "",

package/dist/components/workflows/Screen.svelte

@@ -101,7 +101,11 @@
   }: Props = $props();
 </script>
 
-<div id={containerId} class="paywall-container">
+<div
+  id={containerId}
+  class="paywall-container"
+  style="width: 100%; min-width: 0;"
+>
   {#if paywallComponents}
     <Paywall
       paywallData={paywallComponents}

package/dist/types/variables.d.ts

@@ -84,7 +84,7 @@ type CustomVariableName = string & {};
  */
 export type InputVariableName = `input.${string}`;
 export declare function mergeCustomVariables(customVariables: CustomVariables, uiConfig: UIConfig | undefined): VariableDictionary;
-type BuiltinVariableName = "product.price" | "product.price_per_period" | "product.price_per_period_abbreviated" | "product.price_per_day" | "product.price_per_week" | "product.price_per_month" | "product.price_per_year" | "product.period" | "product.period_abbreviated" | "product.periodly" | "product.period_in_days" | "product.period_in_weeks" | "product.period_in_months" | "product.period_in_years" | "product.period_with_unit" | "product.currency_code" | "product.currency_symbol" | "product.offer_price" | "product.offer_price_per_day" | "product.offer_price_per_week" | "product.offer_price_per_month" | "product.offer_price_per_year" | "product.offer_period" | "product.offer_period_abbreviated" | "product.offer_period_in_days" | "product.offer_period_in_weeks" | "product.offer_period_in_months" | "product.offer_period_in_years" | "product.offer_period_with_unit" | "product.offer_end_date" | "product.secondary_offer_price" | "product.secondary_offer_period" | "product.secondary_offer_period_abbreviated" | "product.relative_discount" | "product.store_product_name" | "success.redemption_url" | "success.redemption_url_redirect" | "success.package_identifier" | "success.product_identifier" | "success.product_title" | "success.product_description" | "success.price" | "success.currency_code" | "success.customer_email" | "success.is_subscription" | "success.is_trial";
+type BuiltinVariableName = "product.price" | "product.price_per_period" | "product.price_per_period_abbreviated" | "product.price_per_day" | "product.price_per_week" | "product.price_per_month" | "product.price_per_year" | "product.period" | "product.period_abbreviated" | "product.periodly" | "product.period_in_days" | "product.period_in_weeks" | "product.period_in_months" | "product.period_in_years" | "product.period_with_unit" | "product.currency_code" | "product.currency_symbol" | "product.offer_price" | "product.offer_price_per_day" | "product.offer_price_per_week" | "product.offer_price_per_month" | "product.offer_price_per_year" | "product.offer_price_with_zero" | "product.offer_price_with_zero_per_day" | "product.offer_price_with_zero_per_week" | "product.offer_price_with_zero_per_month" | "product.offer_price_with_zero_per_year" | "product.offer_period" | "product.offer_period_abbreviated" | "product.offer_period_in_days" | "product.offer_period_in_weeks" | "product.offer_period_in_months" | "product.offer_period_in_years" | "product.offer_period_with_unit" | "product.offer_end_date" | "product.secondary_offer_price" | "product.secondary_offer_period" | "product.secondary_offer_period_abbreviated" | "product.relative_discount" | "product.store_product_name" | "success.redemption_url" | "success.redemption_url_redirect" | "success.package_identifier" | "success.product_identifier" | "success.product_title" | "success.product_description" | "success.price" | "success.currency_code" | "success.customer_email" | "success.is_subscription" | "success.is_trial";
 export type VariableDictionary = Partial<Record<BuiltinVariableName | InputVariableName | CustomVariableName, string>>;
 export type VariablesDictionary = Record<PackageIdentifier, VariableDictionary>;
 export interface PackageInfo {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "4.8.24",
+  "version": "4.9.0",
   "author": {
     "name": "RevenueCat, Inc."
   },