@revenuecat/purchases-ui-js 4.8.22 → 4.8.23

package/README.md

@@ -9,3 +9,9 @@ To build your library:
 ```bash
 npm run package
 ```
+
+## Releasing
+
+Bump `version` in `package.json` in a PR. Once it lands on `main`, the Azure pipeline publishes that version to npm, skipping the publish if the version is already on the registry.
+
+After publishing, the pipeline triggers the `dependency-update` action in [purchases-js](https://github.com/RevenueCat/purchases-js). That job compares the pinned `@revenuecat/purchases-ui-js` with the latest on npm and opens a bump PR there if it is behind. The call runs on every `main` build and is a no-op when nothing changed. It needs the `CIRCLE_TOKEN` secret in the pipeline variables.

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

@@ -0,0 +1,92 @@
+<script module lang="ts">
+  import InputText from "./InputText.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import { paywallDecorator } from "../../stories/paywall-decorator";
+  import type { InputTextProps } from "../../types/components/input-text";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const defaultLocale = "en_US";
+
+  const { Story } = defineMeta({
+    title: "Components/InputText",
+    component: InputText,
+    decorators: [
+      componentDecorator(),
+      paywallDecorator(),
+      localizationDecorator({
+        defaultLocale,
+        localizations: {
+          [defaultLocale]: {
+            email_placeholder: "Enter your email",
+            zero_placeholder: "0",
+          },
+        },
+      }),
+    ],
+    args: {
+      type: "input_text",
+      id: "input-text-1",
+      name: "Text Input",
+      placeholder_lid: "email_placeholder",
+      keyboard_type: "email",
+      capitalize: "none",
+      field_id: "email",
+      required: false,
+      size: {
+        width: { type: "fill" },
+        height: { type: "fit" },
+      },
+      margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+      padding: { top: 12, trailing: 16, bottom: 12, leading: 16 },
+      font_size: 16,
+      horizontal_alignment: "leading",
+      color: {
+        light: { type: "hex", value: "#000000" },
+      },
+      placeholder_font_size: 16,
+      placeholder_horizontal_alignment: "leading",
+      placeholder_color: {
+        light: { type: "hex", value: "#A9A9A9" },
+      },
+      background_color: {
+        light: { type: "hex", value: "#F5F5F5" },
+      },
+      shape: {
+        type: "rectangle",
+        corners: {
+          top_leading: 8,
+          top_trailing: 8,
+          bottom_leading: 8,
+          bottom_trailing: 8,
+        },
+      },
+    } satisfies InputTextProps,
+  });
+</script>
+
+<Story name="Default" />
+
+<!-- `fit` width sizes the input to its displayed text (the placeholder until a
+     value is typed), matching the editor preview. -->
+<Story
+  name="Fit Width"
+  args={{
+    placeholder_lid: "zero_placeholder",
+    keyboard_type: "numeric",
+    field_id: "height_ft",
+    size: {
+      width: { type: "fit" },
+      height: { type: "fit" },
+    },
+    padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    font_size: 56,
+    font_weight_int: 700,
+    horizontal_alignment: "center",
+    placeholder_font_size: 56,
+    placeholder_font_weight_int: 700,
+    placeholder_horizontal_alignment: "center",
+    background_color: null,
+    shape: null,
+  }}
+/>

package/dist/components/input-text/InputText.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import InputText from "./InputText.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const InputText: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InputText = InstanceType<typeof InputText>;
+export default InputText;

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

@@ -9,6 +9,7 @@
   import type {
     InputTextKeyboardType,
     InputTextProps,
+    InputTextValidationRule,
   } from "../../types/components/input-text";
   import { mapBackground } from "../../utils/background-utils";
   import {
@@ -25,14 +26,23 @@
   } from "../../utils/font-utils";
   import { resolveOverrideProperties } from "../../utils/style-utils";
   import { replaceVariables } from "../../utils/variable-utils";
+  import { onDestroy } from "svelte";
   import type { FormEventHandler, HTMLInputAttributes } from "svelte/elements";
-  import { mapTextColor } from "../text/text-utils";
+  import {
+    getHtmlFromMarkdown,
+    mapTextColor,
+    markdownLinkUrlFromClick,
+  } from "../text/text-utils";
+  import { compilePattern } from "./pattern";
+  import { failingRuleFromValidity } from "./validity-rule";
 
   const props: InputTextProps = $props();
 
   let focused = $state(false);
   let error = $state(false);
   let valid = $state(!props.required);
+  let failedRule = $state<InputTextValidationRule | null>(null);
+  let currentValue = $state("");
 
   const buildConditionContext = useConditionContext({ state: true });
 
@@ -62,6 +72,9 @@
     placeholder_color,
     background_color,
     visible,
+    validation,
+    validation_error_lid,
+    validation_error_lids,
   } = $derived.by(() => {
     return {
       ...props,
@@ -91,8 +104,21 @@
     }
   }
 
+  function readValidity(input: HTMLInputElement): boolean {
+    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" : "");
+    }
+    const { validity } = input;
+    failedRule = failingRuleFromValidity(validity);
+    return validity.valid;
+  }
+
   function handleValueChange(input: HTMLInputElement) {
-    error = !input.validity.valid;
+    error = !readValidity(input);
     if (error) {
       return;
     }
@@ -101,7 +127,8 @@
 
   const oninput: FormEventHandler<HTMLInputElement> = (event) => {
     const input = event.currentTarget;
-    valid = input.validity.valid;
+    currentValue = input.value;
+    valid = readValidity(input);
     // Keep the propagated value in lockstep with `valid` so Continue can
     // never unlock before the workflow has received the current value.
     if (valid) {
@@ -114,7 +141,7 @@
 
   const onblur: FormEventHandler<HTMLInputElement> = (event) => {
     focused = false;
-    valid = event.currentTarget.validity.valid;
+    valid = readValidity(event.currentTarget);
     handleValueChange(event.currentTarget);
   };
 
@@ -127,8 +154,26 @@
     onInputChanged,
     onSensitiveInputChanged,
     onReservedAttributeChanged,
+    emitComponentInteraction,
+    onNavigateToUrl,
   } = getPaywallContext();
 
+  // Links in the error copy go through the host like text component links do:
+  // some hosts block a bare `target="_blank"` anchor.
+  const onErrorClick = (event: MouseEvent) => {
+    const url = markdownLinkUrlFromClick(event);
+    if (!url) {
+      return;
+    }
+    emitComponentInteraction({
+      componentType: "text",
+      componentName: props.name,
+      componentValue: "navigate_to_url",
+      componentURL: url,
+    });
+    onNavigateToUrl?.(url);
+  };
+
   const verticalAlignItems = $derived(
     vertical_alignment === "top"
       ? "flex-start"
@@ -137,13 +182,34 @@
         : null,
   );
 
-  const wrapperStyle = $derived(
+  // `fill` and percentage heights resolve against the parent, so they must sit
+  // on the element that is the stack's flex item (the outer container); the
+  // bordered box then takes what is left above the error row. Fixed and fit
+  // heights stay on the bordered box so the error row never eats into them.
+  const heightOnContainer = $derived(
+    size.height.type === "fill" || size.height.type === "relative",
+  );
+
+  // The margin lives on the outer container so the error text sits inside the
+  // component's margin box, directly below the bordered input.
+  const containerStyle = $derived(
     css({
       display: "flex",
-      ...(verticalAlignItems ? { "align-items": verticalAlignItems } : {}),
+      "flex-direction": "column",
       width: mapSize(size.width),
-      height: mapSize(size.height),
+      ...(heightOnContainer ? { height: mapSize(size.height) } : {}),
       margin: mapSpacing(margin),
+    }),
+  );
+
+  const wrapperStyle = $derived(
+    css({
+      display: "flex",
+      ...(verticalAlignItems ? { "align-items": verticalAlignItems } : {}),
+      width: "100%",
+      ...(heightOnContainer
+        ? { flex: "1 1 auto", "min-height": "0" }
+        : { flex: "none", height: mapSize(size.height) }),
       ...mapBackground(colorMode, background_color, null),
       ...mapBorder(colorMode, border),
       "border-radius": mapBorderRadius(shape),
@@ -151,11 +217,14 @@
     }),
   );
 
+  function resolveFontFamily(fontName: string | null | undefined): string {
+    const family = uiConfig.app.fonts[fontName ?? ""]?.web?.family;
+    return isFontRCFMManaged(fontName ?? "")
+      ? getScopedFontFamily(family ?? "")
+      : "sans-serif";
+  }
+
   const inputStyle = $derived.by(() => {
-    const font = uiConfig.app.fonts[font_name ?? ""];
-    const fontFamily = font?.web?.family;
-    const placeholderFont = uiConfig.app.fonts[placeholder_font_name ?? ""];
-    const placeholderFontFamily = placeholderFont?.web?.family;
     const placeholderColor = mapTextColor(colorMode, placeholder_color);
 
     return css({
@@ -166,9 +235,7 @@
         TextAlignments[horizontal_alignment] || TextAlignments.leading,
       "font-weight": font_weight_int ?? FontWeights.regular,
       "font-size": `${font_size}px`,
-      "font-family": isFontRCFMManaged(font_name ?? "")
-        ? getScopedFontFamily(fontFamily ?? "")
-        : "sans-serif",
+      "font-family": resolveFontFamily(font_name),
 
       "--placeholder-color": placeholderColor.color,
       "--placeholder-background": placeholderColor.background,
@@ -181,11 +248,7 @@
       "--placeholder-font-weight":
         placeholder_font_weight_int ?? FontWeights.regular,
       "--placeholder-font-size": `${placeholder_font_size}px`,
-      "--placeholder-font-family": isFontRCFMManaged(
-        placeholder_font_name ?? "",
-      )
-        ? getScopedFontFamily(placeholderFontFamily ?? "")
-        : "sans-serif",
+      "--placeholder-font-family": resolveFontFamily(placeholder_font_name),
     });
   });
 
@@ -195,7 +258,48 @@
     replaceVariables(getLocalizedString(placeholder_lid), $variables),
   );
 
+  const errorLid = $derived(
+    (failedRule ? validation_error_lids?.[failedRule] : null) ??
+      validation_error_lid ??
+      undefined,
+  );
+  const errorMessage = $derived(
+    replaceVariables(getLocalizedString(errorLid) ?? "", $variables),
+  );
+  // Same markdown subset as text components; the helper escapes HTML first so
+  // localization strings cannot reach the `{@html}` sink as markup.
+  const errorHtml = $derived(getHtmlFromMarkdown(errorMessage));
+  const errorId = $derived(`${props.id}-error`);
+  const showErrorMessage = $derived(error && errorMessage !== "");
+  // The error row is reserved as soon as any error copy is configured, so the
+  // message appearing never shifts the layout below the input. Inputs without
+  // copy keep their original footprint.
+  const hasErrorCopy = $derived(
+    validation_error_lid != null ||
+      Object.values(validation_error_lids ?? {}).some((lid) => lid != null),
+  );
+
+  const errorStyle = $derived(
+    css({
+      ...mapTextColor(colorMode, color),
+      "text-align":
+        TextAlignments[horizontal_alignment] || TextAlignments.leading,
+      "font-size": `${Math.max(10, font_size - 2)}px`,
+      "font-family": resolveFontFamily(font_name),
+    }),
+  );
+
   const type = $derived.by((): HTMLInputAttributes["type"] => {
+    // Password masking must always win; a format constraint only changes the
+    // type of otherwise plain inputs.
+    if (props.keyboard_type !== "password") {
+      if (validation?.format === "email") {
+        return "email";
+      }
+      if (validation?.format === "uri") {
+        return "url";
+      }
+    }
     switch (props.keyboard_type) {
       case "decimal":
       case "numeric":
@@ -219,34 +323,148 @@
     keyboard_type === "password" ? "text" : keyboard_type,
   );
 
+  // `pattern` only applies to text-like types, so number inputs skip it.
+  const compiledPattern = $derived(
+    type === "number" ? null : compilePattern(validation?.pattern),
+  );
+
+  // Only the constraints the resolved type honours are rendered: browsers
+  // 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.
+  const constraintAttributes = $derived.by(
+    (): Pick<
+      HTMLInputAttributes,
+      "min" | "max" | "step" | "minlength" | "maxlength" | "pattern"
+    > =>
+      type === "number"
+        ? {
+            min: validation?.minimum ?? undefined,
+            max: validation?.maximum ?? undefined,
+            step: keyboard_type === "decimal" ? "any" : undefined,
+          }
+        : {
+            minlength: validation?.minLength ?? undefined,
+            maxlength: validation?.maxLength ?? undefined,
+            pattern:
+              compiledPattern?.mode === "native"
+                ? (validation?.pattern ?? undefined)
+                : undefined,
+          },
+  );
+
   const isVisible = $derived(visible !== false);
 
+  $effect(() => {
+    // The `{#if isVisible}` block remounts the `<input>` empty, so the state
+    // that mirrors it must not survive a hide/show cycle either.
+    if (!isVisible) {
+      error = false;
+      failedRule = null;
+      valid = !required;
+      currentValue = "";
+    }
+  });
+
+  // An <input> never shrinks below its browser-default intrinsic width, so in
+  // `fit` width mode a hidden sizer span mirrors the displayed text (styled
+  // and padded like the input) to give the wrapper its content size, and the
+  // input is stretched over it. This matches the editor preview.
+  const isContentSized = $derived(size.width.type === "fit");
+  const displayedText = $derived(
+    type === "password" ? "•".repeat(currentValue.length) : currentValue,
+  );
+
+  const sizerText = $derived(displayedText || placeholder || "\u200b");
+  const sizerStyle = $derived.by(() => {
+    const showsPlaceholder = displayedText === "";
+    return css({
+      padding: mapSpacing(padding),
+      "font-weight":
+        (showsPlaceholder ? placeholder_font_weight_int : font_weight_int) ??
+        FontWeights.regular,
+      "font-size": `${showsPlaceholder ? placeholder_font_size : font_size}px`,
+      "font-family": resolveFontFamily(
+        showsPlaceholder ? placeholder_font_name : font_name,
+      ),
+    });
+  });
+
   if (validationContext) {
     $effect(() => {
       // A hidden field can't be filled in, so it shouldn't be able to block
       // Continue for the rest of the screen.
-      validationContext.updateSatisfaction(!isVisible || valid);
+      validationContext.updateSatisfaction(props.id, !isVisible || valid);
     });
+    onDestroy(() => validationContext.removeInput(props.id));
   }
 </script>
 
 {#if isVisible}
-  <div class="rc-gradient-border" style={wrapperStyle}>
-    <input
-      {type}
-      {placeholder}
-      {required}
-      inputmode={inputMode}
-      autocapitalize={capitalize}
-      style={inputStyle}
-      {oninput}
-      onfocus={() => (focused = true)}
-      {onblur}
-    />
+  <div class="rc-input-text" style={containerStyle}>
+    <div
+      class="rc-gradient-border"
+      class:content-sized={isContentSized}
+      style={wrapperStyle}
+    >
+      {#if isContentSized}
+        <span class="sizer" aria-hidden="true" style={sizerStyle}
+          >{sizerText}</span
+        >
+      {/if}
+      <input
+        {type}
+        {placeholder}
+        {required}
+        {...constraintAttributes}
+        inputmode={inputMode}
+        autocapitalize={capitalize}
+        aria-invalid={error}
+        aria-describedby={showErrorMessage ? errorId : undefined}
+        style={inputStyle}
+        {oninput}
+        onfocus={() => (focused = true)}
+        {onblur}
+      />
+    </div>
+    {#if hasErrorCopy}
+      <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+      <div class="rc-input-error" style={errorStyle} onclick={onErrorClick}>
+        {#if showErrorMessage}
+          <span class="rc-input-error-message" id={errorId} role="alert">
+            {@html errorHtml}
+          </span>
+        {/if}
+      </div>
+    {/if}
   </div>
 {/if}
 
 <style>
+  .rc-input-error {
+    /* A parent stack paints a full-size absolutely positioned `::before`
+       overlay, which sits above static descendants and swallows their pointer
+       events. Positioning the row paints it after that overlay so links in the
+       message stay clickable. */
+    position: relative;
+    /* Reserve one line (line-height + top gap) so the message never shifts the
+       layout below the input when it appears. `em` follows the row's own
+       font-size from the inline style. */
+    flex: none;
+    box-sizing: border-box;
+    padding-top: 4px;
+    line-height: 1.4;
+    min-height: calc(1.4em + 4px);
+    /* Never let the message dictate the width: a `fit` width container sizes
+       to the bordered box (the sizer), and the row stretches to match and
+       wraps. A cyclic percentage min-width counts as zero for intrinsic
+       sizing, which is what keeps the row out of the measurement. */
+    width: 0;
+    min-width: 100%;
+  }
+
   input {
     width: 100%;
     height: 100%;
@@ -255,6 +473,37 @@
     border-radius: inherit;
   }
 
+  .content-sized {
+    position: relative;
+  }
+
+  .sizer {
+    display: block;
+    visibility: hidden;
+    white-space: pre;
+    line-height: normal; /* Match the intrinsic height of a bare <input> */
+    border-inline-end: 2px solid transparent; /* Room for the caret */
+  }
+
+  .content-sized input {
+    position: absolute;
+    inset: 0;
+    width: auto;
+    height: auto;
+  }
+
+  /* Spin buttons would overlap the text of a content-sized number input. */
+  .content-sized input::-webkit-outer-spin-button,
+  .content-sized input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .content-sized input[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+
   input:focus-visible {
     outline: none;
   }

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

@@ -14,6 +14,8 @@
     InputTextProps,
     ReservedAttribute,
   } from "../../types/components/input-text";
+  import type { Localizations } from "../../types/localization";
+  import type { ComponentInteractionData } from "../../types/paywall-component-interaction";
 
   interface Props extends InputTextProps {
     onInputChanged?: (fieldId: string, value: string) => void;
@@ -23,6 +25,10 @@
       value: string,
     ) => void;
     onSatisfactionChange?: (satisfied: boolean) => void;
+    onNavigateToUrl?: (url: string) => void;
+    onComponentInteraction?: (data: ComponentInteractionData) => void;
+    localizations?: Localizations;
+    selectedLocale?: string;
   }
 
   const {
@@ -30,6 +36,10 @@
     onSensitiveInputChanged,
     onReservedAttributeChanged,
     onSatisfactionChange,
+    onNavigateToUrl,
+    onComponentInteraction,
+    localizations = { en_US: {} },
+    selectedLocale,
     ...inputTextProps
   }: Props = $props();
 
@@ -42,9 +52,8 @@
   setColorModeContext();
   setLocalizationContext(() => ({
     defaultLocale: "en_US",
-    localizations: {
-      en_US: {},
-    },
+    selectedLocale,
+    localizations,
   }));
 
   setPaywallContext({
@@ -53,7 +62,8 @@
     baseVariables: readable(undefined),
     infoPerPackage: readable(undefined),
     onPurchase: () => {},
-    emitComponentInteraction: () => {},
+    emitComponentInteraction: onComponentInteraction ?? (() => {}),
+    onNavigateToUrl,
     onButtonAction: () => {},
     onInputChanged,
     onSensitiveInputChanged,

package/dist/components/input-text/InputTextTestWrapper.svelte.d.ts

@@ -1,9 +1,15 @@
 import type { InputTextProps, ReservedAttribute } from "../../types/components/input-text";
+import type { Localizations } from "../../types/localization";
+import type { ComponentInteractionData } from "../../types/paywall-component-interaction";
 interface Props extends InputTextProps {
     onInputChanged?: (fieldId: string, value: string) => void;
     onSensitiveInputChanged?: (fieldId: string, value: string) => void;
     onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;
     onSatisfactionChange?: (satisfied: boolean) => void;
+    onNavigateToUrl?: (url: string) => void;
+    onComponentInteraction?: (data: ComponentInteractionData) => void;
+    localizations?: Localizations;
+    selectedLocale?: string;
 }
 declare const InputTextTestWrapper: import("svelte").Component<Props, {}, "">;
 type InputTextTestWrapper = ReturnType<typeof InputTextTestWrapper>;

package/dist/components/input-text/pattern.d.ts

@@ -0,0 +1,16 @@
+/**
+ * How a `validation.pattern` is enforced on the rendered input.
+ *
+ * Browsers compile the `pattern` attribute as `^(?:pattern)$` with the `v`
+ * flag and silently ignore it when that fails, which would drop the constraint
+ * altogether. Patterns that are valid `v`-mode regexes are left to the browser
+ * (`patternMismatch`); anything else that still compiles as a plain JS regex is
+ * matched by the component and reported through `setCustomValidity`.
+ */
+export type CompiledPattern = {
+    mode: "native";
+} | {
+    mode: "custom";
+    regex: RegExp;
+};
+export declare function compilePattern(pattern: string | null | undefined): CompiledPattern | null;

package/dist/components/input-text/pattern.js

@@ -0,0 +1,24 @@
+const FALLBACK_FLAGS = ["u", ""];
+export function compilePattern(pattern) {
+    if (!pattern) {
+        return null;
+    }
+    const source = `^(?:${pattern})$`;
+    try {
+        new RegExp(source, "v");
+        return { mode: "native" };
+    }
+    catch {
+        // Not a valid `v`-mode regex; try the more lenient dialects below.
+    }
+    for (const flags of FALLBACK_FLAGS) {
+        try {
+            return { mode: "custom", regex: new RegExp(source, flags) };
+        }
+        catch {
+            // Try the next dialect.
+        }
+    }
+    console.warn(`Ignoring invalid input_text validation pattern: ${pattern}`);
+    return null;
+}

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

@@ -0,0 +1,15 @@
+import type { InputTextValidationRule } from "../../types/components/input-text";
+/**
+ * Maps a native `ValidityState` to the first failing validation rule, so the
+ * per-rule error copy can be picked. Order matters: an empty required field is
+ * reported as `required` even if other constraints would also fail.
+ *
+ * `typeMismatch` lands in `format` even without `validation.format`, since a
+ * `keyboard_type: "email"` input is `type="email"` and fails the same way.
+ * `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`.
+ */
+export declare function failingRuleFromValidity(validity: ValidityState): InputTextValidationRule | null;

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

@@ -0,0 +1,40 @@
+/**
+ * Maps a native `ValidityState` to the first failing validation rule, so the
+ * per-rule error copy can be picked. Order matters: an empty required field is
+ * reported as `required` even if other constraints would also fail.
+ *
+ * `typeMismatch` lands in `format` even without `validation.format`, since a
+ * `keyboard_type: "email"` input is `type="email"` and fails the same way.
+ * `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`.
+ */
+export function failingRuleFromValidity(validity) {
+    if (validity.valid) {
+        return null;
+    }
+    if (validity.valueMissing) {
+        return "required";
+    }
+    if (validity.rangeUnderflow) {
+        return "minimum";
+    }
+    if (validity.rangeOverflow) {
+        return "maximum";
+    }
+    if (validity.tooShort) {
+        return "minLength";
+    }
+    if (validity.tooLong) {
+        return "maxLength";
+    }
+    if (validity.patternMismatch || validity.customError) {
+        return "pattern";
+    }
+    if (validity.typeMismatch || validity.badInput || validity.stepMismatch) {
+        return "format";
+    }
+    return null;
+}

package/dist/components/options/InputMultipleChoice.svelte

@@ -44,10 +44,13 @@
   if (validationContext) {
     const unsubscribe = inputChoiceContext.isSatisfied.subscribe(
       (satisfied) => {
-        validationContext.updateSatisfaction(satisfied);
+        validationContext.updateSatisfaction(props.id, satisfied);
       },
     );
-    onDestroy(unsubscribe);
+    onDestroy(() => {
+      unsubscribe();
+      validationContext.removeInput(props.id);
+    });
   }
 </script>
 

package/dist/components/options/InputSingleChoice.svelte

@@ -30,10 +30,13 @@
   if (validationContext) {
     const unsubscribe = inputChoiceContext.isSatisfied.subscribe(
       (satisfied) => {
-        validationContext.updateSatisfaction(satisfied);
+        validationContext.updateSatisfaction(props.id, satisfied);
       },
     );
-    onDestroy(unsubscribe);
+    onDestroy(() => {
+      unsubscribe();
+      validationContext.removeInput(props.id);
+    });
   }
 </script>
 

package/dist/components/paywall/Paywall.stories.svelte

@@ -27,6 +27,7 @@
   import { BACKGROUND_PAYWALL } from "./fixtures/background-paywall";
   import { FIXED_HEIGHT_STACK_PAYWALL } from "./fixtures/fixed-height-stack-paywall";
   import { FILL_HEIGHT_WEBVIEW_PAYWALL } from "./fixtures/fill-height-webview-paywall";
+  import { createHeroMediaPaywall } from "./fixtures/hero-media-paywall";
   import { OVERRIDE_PAYWALL } from "./fixtures/override-paywall";
   import { SHEET_PAYWALL } from "./fixtures/sheet-paywall";
   import { SHEET_PAYWALL_VIDEO_STACKING } from "./fixtures/sheet-video-stacking-paywall";
@@ -565,6 +566,31 @@
     paywallData: paywallWithTransparentHeaderAndTopImage,
   }}
 />
+
+<Story
+  name="Hero media - nested image"
+  decorators={[viewportDecorator(375, 500, 0)]}
+  args={{
+    paywallData: createHeroMediaPaywall("image"),
+  }}
+/>
+
+<Story
+  name="Hero media - nested video"
+  decorators={[viewportDecorator(375, 500, 0)]}
+  args={{
+    paywallData: createHeroMediaPaywall("video"),
+  }}
+/>
+
+<Story
+  name="Hero media - nested web view"
+  decorators={[viewportDecorator(375, 500, 0)]}
+  args={{
+    paywallData: createHeroMediaPaywall("web_view"),
+  }}
+/>
+
 <Story
   name="Timeline"
   args={{

package/dist/components/paywall/Paywall.svelte

@@ -50,7 +50,10 @@
   import { onMount } from "svelte";
   import { derived, readable, writable } from "svelte/store";
   import Stack from "../stack/Stack.svelte";
-  import { mapPaywallContentStackStyle } from "./paywall-utils";
+  import {
+    firstContentIsHeroMedia,
+    mapPaywallContentStackStyle,
+  } from "./paywall-utils";
   import Sheet from "./Sheet.svelte";
   import ViewportBackdrop from "./ViewportBackdrop.svelte";
   import {
@@ -425,11 +428,8 @@
 
   const { stack, sticky_footer, header } = base;
 
-  const firstComponent = stack.components[0];
-  const firstComponentIsFullWidthImage =
-    firstComponent?.type === "image" &&
-    firstComponent.size.width.type === "fill";
-  const pullContentUnderHeader = !!header && firstComponentIsFullWidthImage;
+  const pullContentUnderHeader =
+    !!header && firstContentIsHeroMedia(stack.components);
 
   let headerHeight = $state(0);
   let footerHeight = $state(0);
@@ -496,6 +496,12 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
+    box-sizing: border-box;
+    /* Definite containing block so fill-width children (`-webkit-fill-available`)
+       do not shrink-wrap the host overlay and walk a Chromium zoom feedback loop. */
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
     height: 100%;
 
     transition-property: filter, transform;

package/dist/components/paywall/fixtures/hero-media-paywall.d.ts

@@ -0,0 +1,3 @@
+import type { PaywallData } from "../../../types/paywall";
+export type HeroMediaType = "image" | "video" | "web_view";
+export declare const createHeroMediaPaywall: (type: HeroMediaType) => PaywallData;

package/dist/components/paywall/fixtures/hero-media-paywall.js

@@ -0,0 +1,182 @@
+import { createStack, createTextComponent } from "./helpers";
+const ZERO_SPACING = {
+    bottom: 0,
+    leading: 0,
+    top: 0,
+    trailing: 0,
+};
+const imageSource = (url) => ({
+    light: {
+        width: 640,
+        height: 360,
+        original: url,
+        heic: url,
+        heic_low_res: url,
+        webp: url,
+        webp_low_res: url,
+    },
+});
+const createImageHero = () => ({
+    type: "image",
+    id: "image-hero",
+    name: "Image hero",
+    source: imageSource("https://placehold.co/640x360/2563eb/ffffff.webp?text=Image+Hero"),
+    size: {
+        width: { type: "fill" },
+        height: { type: "fixed", value: 240 },
+    },
+    mask_shape: null,
+    fit_mode: "fill",
+    padding: { ...ZERO_SPACING },
+    margin: { ...ZERO_SPACING },
+    color_overlay: null,
+    border: null,
+    shadow: null,
+});
+const createVideoHero = () => ({
+    type: "video",
+    id: "video-hero",
+    name: "Video hero",
+    source: null,
+    fallback_source: imageSource("https://placehold.co/640x360/7c3aed/ffffff.webp?text=Video+Hero"),
+    size: {
+        width: { type: "fill" },
+        height: { type: "fixed", value: 240 },
+    },
+    mask_shape: null,
+    fit_mode: "fill",
+    padding: { ...ZERO_SPACING },
+    margin: { ...ZERO_SPACING },
+    color_overlay: null,
+    border: null,
+    shadow: null,
+    auto_play: false,
+    loop: false,
+    mute_audio: true,
+    show_controls: false,
+});
+const createWebViewHero = () => ({
+    type: "web_view",
+    id: "web-view-hero",
+    name: "Web view hero",
+    protocol_version: 1,
+    url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/2705.svg",
+    size: {
+        width: { type: "fill" },
+        height: { type: "fixed", value: 240 },
+    },
+});
+const createHero = (type) => {
+    switch (type) {
+        case "image":
+            return createImageHero();
+        case "video":
+            return createVideoHero();
+        case "web_view":
+            return createWebViewHero();
+    }
+};
+const createHeader = () => {
+    const stack = createStack({
+        id: "hero-header-stack",
+        name: "Hero header stack",
+        components: [
+            {
+                ...createTextComponent({
+                    id: "hero-header-label",
+                    textLid: "hero_header_label",
+                }),
+                color: {
+                    light: {
+                        type: "hex",
+                        value: "#ffffff",
+                    },
+                },
+                font_size: 18,
+                font_weight: "bold",
+            },
+        ],
+    });
+    stack.size.width = { type: "fill" };
+    stack.padding = {
+        bottom: 18,
+        leading: 20,
+        top: 18,
+        trailing: 20,
+    };
+    stack.background_color = {
+        light: {
+            type: "hex",
+            value: "#11182799",
+        },
+    };
+    return {
+        type: "header",
+        id: "hero-header",
+        name: "Hero header",
+        stack,
+    };
+};
+export const createHeroMediaPaywall = (type) => {
+    const heroContainer = createStack({
+        id: `${type}-hero-container`,
+        name: `${type} hero container`,
+        components: [createHero(type)],
+    });
+    heroContainer.size.width = { type: "fill" };
+    heroContainer.padding = { ...ZERO_SPACING };
+    heroContainer.spacing = 0;
+    const rootStack = createStack({
+        id: `${type}-hero-root`,
+        name: `${type} hero root`,
+        components: [
+            heroContainer,
+            {
+                ...createTextComponent({
+                    id: `${type}-body`,
+                    textLid: "body",
+                }),
+                font_size: 18,
+                horizontal_alignment: "center",
+                size: {
+                    width: { type: "fill" },
+                    height: { type: "fit" },
+                },
+            },
+        ],
+    });
+    rootStack.size.width = { type: "fill" };
+    rootStack.padding = {
+        bottom: 24,
+        leading: 0,
+        top: 0,
+        trailing: 0,
+    };
+    rootStack.spacing = 24;
+    return {
+        id: `${type}_hero_paywall`,
+        default_locale: "en_US",
+        components_localizations: {
+            en_US: {
+                hero_header_label: "Header overlays the hero",
+                body: `Full-width ${type.replace("_", " ")} detected through a nested stack`,
+            },
+        },
+        components_config: {
+            base: {
+                background: {
+                    type: "color",
+                    value: {
+                        light: {
+                            type: "hex",
+                            value: "#ffffff",
+                        },
+                    },
+                },
+                header: createHeader(),
+                stack: rootStack,
+                sticky_footer: null,
+            },
+        },
+    };
+};

package/dist/components/paywall/paywall-utils.d.ts

@@ -1,3 +1,5 @@
 import type { Size } from "../../types";
+import type { Component } from "../../types/component";
 import type { CSS } from "../../utils/base-utils";
+export declare function firstContentIsHeroMedia(components: Component[]): boolean;
 export declare function mapPaywallContentStackStyle(height: Size, pullContentUnderHeader: boolean, headerHeight: number): CSS;

package/dist/components/paywall/paywall-utils.js

@@ -1,3 +1,25 @@
+function findFirstContent(components) {
+    for (const component of components) {
+        if (component.type === "fallback_header") {
+            continue;
+        }
+        if (component.type === "stack") {
+            const nestedContent = findFirstContent(component.components);
+            if (nestedContent) {
+                return nestedContent;
+            }
+            continue;
+        }
+        return component;
+    }
+}
+export function firstContentIsHeroMedia(components) {
+    const firstContent = findFirstContent(components);
+    return ((firstContent?.type === "image" ||
+        firstContent?.type === "video" ||
+        firstContent?.type === "web_view") &&
+        firstContent.size.width.type === "fill");
+}
 export function mapPaywallContentStackStyle(height, pullContentUnderHeader, headerHeight) {
     return {
         // Nested fill children need a definite root height; other roots keep

package/dist/components/text/TextNode.svelte

@@ -3,6 +3,7 @@
     getHtmlFromMarkdown,
     getTextComponentStyles,
     getTextWrapperInlineStyles,
+    markdownLinkUrlFromClick,
   } from "./text-utils";
   import Text from "./Text.svelte";
   import { getColorModeContext } from "../../stores/color-mode";
@@ -53,28 +54,7 @@
   const markdownParsed = $derived(getHtmlFromMarkdown(label));
 
   const onclick = (event: MouseEvent) => {
-    if (
-      event.defaultPrevented ||
-      event.button !== 0 ||
-      event.metaKey ||
-      event.ctrlKey ||
-      event.shiftKey ||
-      event.altKey
-    ) {
-      return;
-    }
-
-    const target = event.target;
-    if (!(target instanceof Element)) {
-      return;
-    }
-
-    const anchor = target.closest("a[href]");
-    if (!(anchor instanceof HTMLAnchorElement)) {
-      return;
-    }
-
-    const url = anchor.getAttribute("href") ?? anchor.href;
+    const url = markdownLinkUrlFromClick(event);
     if (!url) {
       return;
     }

package/dist/components/text/text-utils.d.ts

@@ -4,6 +4,14 @@ import type { TextNodeProps } from "../../types/components/text";
 import type { AppFontsConfig } from "../../types/ui-config";
 import { type CSS } from "../../utils/base-utils";
 export declare const defaultColor: ColorScheme;
+/**
+ * Returns the `href` of the markdown link a plain left click landed on, or
+ * `null` when the click should be left alone (modifier keys, non-primary
+ * button, already handled, not on a link). Hosts route these through
+ * `onNavigateToUrl`, since a bare `target="_blank"` anchor is blocked in some
+ * of them (embedded webviews, sandboxed frames).
+ */
+export declare function markdownLinkUrlFromClick(event: MouseEvent): string | null;
 export declare function mapTextColor(colorMode: ColorMode, scheme: ColorGradientScheme): CSS;
 /**
  * Generates comprehensive styles for text components by combining text, component and size styles

package/dist/components/text/text-utils.js

@@ -6,6 +6,32 @@ import { getScopedFontFamily, isFontRCFMManaged } from "../../utils/font-utils";
 export const defaultColor = {
     light: { type: "hex", value: DEFAULT_TEXT_COLOR },
 };
+/**
+ * Returns the `href` of the markdown link a plain left click landed on, or
+ * `null` when the click should be left alone (modifier keys, non-primary
+ * button, already handled, not on a link). Hosts route these through
+ * `onNavigateToUrl`, since a bare `target="_blank"` anchor is blocked in some
+ * of them (embedded webviews, sandboxed frames).
+ */
+export function markdownLinkUrlFromClick(event) {
+    if (event.defaultPrevented ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey) {
+        return null;
+    }
+    const target = event.target;
+    if (!(target instanceof Element)) {
+        return null;
+    }
+    const anchor = target.closest("a[href]");
+    if (!(anchor instanceof HTMLAnchorElement)) {
+        return null;
+    }
+    return anchor.getAttribute("href") || anchor.href || null;
+}
 export function mapTextColor(colorMode, scheme) {
     const info = mapColorMode(colorMode, scheme);
     const color = mapColorInfo(info);

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; height: 100%;"
+>
   {#if paywallComponents}
     <Paywall
       paywallData={paywallComponents}

package/dist/stores/inputValidation.d.ts

@@ -4,13 +4,16 @@ import { type Readable } from "svelte/store";
  * Used to restore selection state when navigating back to a step.
  */
 export type InitialInputSelections = Record<string, string[]>;
-interface InputValidationContext {
+export interface InputValidationContext {
+    /** True only when every registered input is satisfied. */
     isSatisfied: Readable<boolean>;
-    updateSatisfaction: (satisfied: boolean) => void;
+    /** Registers or updates the satisfaction of a single input, keyed by component id. */
+    updateSatisfaction: (id: string, satisfied: boolean) => void;
+    /** Stops an unmounted input from gating the screen. */
+    removeInput: (id: string) => void;
 }
 export declare function createInputValidationContext(initiallySatisfied?: boolean): InputValidationContext;
 export declare function setInputValidationContext(context: InputValidationContext): void;
 export declare function getInputValidationContext(): InputValidationContext | undefined;
 export declare function setInitialInputSelectionsContext(selections: InitialInputSelections): void;
 export declare function getInitialInputSelectionsContext(): InitialInputSelections;
-export {};

package/dist/stores/inputValidation.js

@@ -1,15 +1,38 @@
 import { getContext, setContext } from "svelte";
-import { writable } from "svelte/store";
+import { derived, writable } from "svelte/store";
 const key = Symbol("inputValidation");
 const initialSelectionsKey = Symbol("initialInputSelections");
 export function createInputValidationContext(initiallySatisfied = true) {
-    const isSatisfied = writable(initiallySatisfied);
-    const updateSatisfaction = (satisfied) => {
-        isSatisfied.set(satisfied);
+    const satisfactionById = writable(new Map());
+    // `initiallySatisfied` only matters while no input has registered yet; once
+    // any input reports, the map is the single source of truth.
+    const isSatisfied = derived(satisfactionById, (byId) => byId.size === 0
+        ? initiallySatisfied
+        : Array.from(byId.values()).every(Boolean));
+    const updateSatisfaction = (id, satisfied) => {
+        satisfactionById.update((byId) => {
+            if (byId.get(id) === satisfied) {
+                return byId;
+            }
+            const next = new Map(byId);
+            next.set(id, satisfied);
+            return next;
+        });
+    };
+    const removeInput = (id) => {
+        satisfactionById.update((byId) => {
+            if (!byId.has(id)) {
+                return byId;
+            }
+            const next = new Map(byId);
+            next.delete(id);
+            return next;
+        });
     };
     return {
         isSatisfied,
         updateSatisfaction,
+        removeInput,
     };
 }
 export function setInputValidationContext(context) {

package/dist/types/components/input-text.d.ts

@@ -6,6 +6,22 @@ import type { Overrides } from "../overrides";
 export type InputTextCapitalizeType = "none" | "sentences" | "words" | "characters";
 export type InputTextKeyboardType = "decimal" | "email" | "numeric" | "password" | "tel" | "text" | "url";
 export type ReservedAttribute = "$email" | "$displayName" | "$phoneNumber";
+export type InputTextValidationFormat = "email" | "uri";
+/**
+ * JSON Schema subset mapped to native HTML constraint attributes.
+ * Keys keep the JSON Schema camelCase vocabulary.
+ */
+export interface InputTextValidation {
+    minimum?: number | null;
+    maximum?: number | null;
+    minLength?: number | null;
+    maxLength?: number | null;
+    pattern?: string | null;
+    format?: InputTextValidationFormat | null;
+}
+export type InputTextValidationRule = "required" | "minimum" | "maximum" | "minLength" | "maxLength" | "pattern" | "format";
+/** Per-rule error copy; `validation_error_lid` is the fallback for missing keys. */
+export type InputTextValidationErrorLids = Partial<Record<InputTextValidationRule, string | null>>;
 export interface InputTextProps extends BaseComponent {
     type: "input_text";
     visible?: boolean | null;
@@ -15,6 +31,9 @@ export interface InputTextProps extends BaseComponent {
     field_id: string;
     reserved_attribute?: ReservedAttribute | null;
     required: boolean;
+    validation?: InputTextValidation | null;
+    validation_error_lid?: string | null;
+    validation_error_lids?: InputTextValidationErrorLids | null;
     size: SizeType;
     padding: Spacing;
     margin: Spacing;

package/dist/types/overrides.d.ts

@@ -61,7 +61,7 @@ export type OverrideCondition = IntroOfferCondition | MultipleIntroOffersConditi
 /**
  * The reserved properties of an override that should not be included in the override properties
  */
-type ReservedProperty = "id" | "type" | "overrides" | "stack" | "components" | "items" | "pages" | "tabs" | "field_id" | "option_id" | "keyboard_type" | "capitalize";
+type ReservedProperty = "id" | "type" | "overrides" | "stack" | "components" | "items" | "pages" | "tabs" | "field_id" | "option_id" | "keyboard_type" | "capitalize" | "validation" | "validation_error_lid" | "validation_error_lids";
 type OverrideProperties<C> = Partial<Omit<C, ReservedProperty>>;
 type Override<C> = {
     conditions: OverrideCondition[];

package/dist/types.d.ts

@@ -128,4 +128,4 @@ export declare enum StackDistribution {
 export type { WorkflowScreen } from "./types/workflow";
 export type { ColorScheme } from "./types/colors";
 export type { ComponentInteractionData, ComponentInteractionType, OnComponentInteraction, } from "./types/paywall-component-interaction";
-export type { ReservedAttribute } from "./types/components/input-text";
+export type { InputTextValidation, InputTextValidationErrorLids, InputTextValidationFormat, InputTextValidationRule, ReservedAttribute, } from "./types/components/input-text";

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.22",
+  "version": "4.8.23",
   "author": {
     "name": "RevenueCat, Inc."
   },