@revenuecat/purchases-ui-js 4.12.4 → 4.13.0

package/dist/components/icon/Icon.svelte

@@ -7,6 +7,7 @@
     mapBorder,
     mapBorderRadius,
     mapColor,
+    mapFillBounds,
     mapShadow,
     mapSize,
     mapSpacing,
@@ -38,6 +39,7 @@
     css({
       width: mapSize(size.width),
       height: mapSize(size.height),
+      ...mapFillBounds(size),
       margin: mapSpacing(margin),
       padding: mapSpacing(padding),
       "background-color": mapColor(colorMode, background?.color),

package/dist/components/image/Image.svelte

@@ -4,16 +4,18 @@
   import { getLocalizationContext } from "../../stores/localization";
   import type { ImageProps } from "../../types/components/image";
   import {
+    clampFillSize,
     css,
     mapColor,
     mapColorMode,
+    mapFillBounds,
     mapFitMode,
     mapSize,
     mapSpacing,
   } from "../../utils/base-utils";
   import { resolveOverrideProperties } from "../../utils/style-utils";
+  import { resolveLocalizedSource } from "../../utils/source-utils";
   import ClipPath from "./ClipPath.svelte";
-  import { resolveImageSource } from "./image-utils";
   import { viewBoxSize } from "./view-box-size";
   import Overlay from "./Overlay.svelte";
 
@@ -43,7 +45,12 @@
   });
 
   const source = $derived(
-    resolveImageSource(props, conditionContext, getLocalizedImage),
+    resolveLocalizedSource(
+      props,
+      "override_source_lid",
+      conditionContext,
+      getLocalizedImage,
+    ),
   );
 
   const getColorMode = getColorModeContext();
@@ -86,7 +93,10 @@
     if (size.height.type === "fixed") {
       return size.height.value;
     }
-    return Math.round(wrapperWidth * (imageSize.height / imageSize.width));
+    const aspectHeight = Math.round(
+      wrapperWidth * (imageSize.height / imageSize.width),
+    );
+    return clampFillSize(aspectHeight, size.height);
   });
 
   const style = $derived(
@@ -102,6 +112,7 @@
       ...(size.width.type === "fixed"
         ? {}
         : { "min-width": 0, "min-height": 0 }),
+      ...mapFillBounds(size),
     }),
   );
 

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

@@ -16,6 +16,7 @@
     css,
     mapBorder,
     mapBorderRadius,
+    mapFillBounds,
     mapShadow,
     mapSize,
     mapSpacing,
@@ -221,6 +222,7 @@
       "flex-direction": "column",
       width: mapSize(size.width),
       ...(heightOnContainer ? { height: mapSize(size.height) } : {}),
+      ...mapFillBounds(size),
       margin: mapSpacing(margin),
     }),
   );

package/dist/components/loader-animation/LoaderAnimation.stories.svelte

@@ -5,7 +5,9 @@
   import { setLoaderContext } from "../../stores/loader";
   import type { LoaderAnimationProps } from "../../types/components/loader-animation";
   import { defineMeta } from "@storybook/addon-svelte-csf";
+  import type { ComponentProps } from "svelte";
   import { writable } from "svelte/store";
+  import { expect } from "storybook/test";
   import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
 
   /**
@@ -64,6 +66,12 @@
   });
 </script>
 
+{#snippet linearClampTemplate(props: ComponentProps<typeof LoaderAnimation>)}
+  <div class="linear-clamp-stage">
+    <LoaderAnimation {...props} />
+  </div>
+{/snippet}
+
 <Story
   name="Circular — In progress"
   decorators={[staticLoaderDecorator(0.7)]}
@@ -94,3 +102,37 @@
   decorators={[staticLoaderDecorator(1)]}
   args={linearArgs}
 />
+
+<Story
+  name="Linear — Clamped fill height"
+  decorators={[staticLoaderDecorator(0.5)]}
+  template={linearClampTemplate}
+  play={async ({ canvasElement }) => {
+    const loader = canvasElement.querySelector(".rc-loader-animation--linear");
+    await expect(loader?.getBoundingClientRect().height).toBe(48);
+  }}
+  args={{
+    ...linearArgs,
+    track: {
+      ...linearArgs.track,
+      size: {
+        width: { type: "fill", min: 200, max: 320 },
+        height: { type: "fill", min: 24, max: 48 },
+      },
+    },
+    fill: {
+      ...linearArgs.fill,
+      size: {
+        width: { type: "fill", min: 200, max: 320 },
+        height: { type: "fill", min: 24, max: 48 },
+      },
+    },
+  }}
+/>
+
+<style>
+  .linear-clamp-stage {
+    width: 400px;
+    height: 80px;
+  }
+</style>

package/dist/components/loader-animation/LoaderAnimation.svelte

@@ -20,6 +20,7 @@
     mapColor,
     mapColorInfo,
     mapColorMode,
+    mapFillBounds,
     mapShadow,
     mapSize,
     mapSpacing,
@@ -71,8 +72,12 @@
   const pillWidth = (layer: LinearAnimationLayer) =>
     layer.size.width.type === "fill" ? "100%" : mapSize(layer.size.width);
 
+  const pillHeight = (layer: LinearAnimationLayer) =>
+    layer.size.height.type === "fill" ? "100%" : mapSize(layer.size.height);
+
   const pillLayerStyle = (layer: LinearAnimationLayer) => ({
-    height: mapSize(layer.size.height),
+    height: pillHeight(layer),
+    ...mapFillBounds({ height: layer.size.height }),
     "border-radius": mapBorderRadius(layer.shape ?? null),
     background: mapColor(colorMode, layer.color),
     ...mapBorder(colorMode, layer.border ?? null),
@@ -119,6 +124,7 @@
       "aspect-ratio": "1",
       "flex-shrink": "0",
       width: diameterWidth(actualProps.track),
+      ...mapFillBounds({ width: actualProps.track.diameter }),
       margin: mapSpacing(actualProps.margin ?? null),
       padding: mapSpacing(actualProps.padding ?? null),
     })}
@@ -169,6 +175,11 @@
       display: "block",
       "flex-shrink": "0",
       width: pillWidth(actualProps.track),
+      ...(actualProps.track.size.height.type === "fill"
+        ? { height: "100%" }
+        : {}),
+      ...mapFillBounds({ width: actualProps.track.size.width }),
+      ...mapFillBounds({ height: actualProps.track.size.height }),
       margin: mapSpacing(actualProps.margin ?? null),
       padding: mapSpacing(actualProps.padding ?? null),
     })}

package/dist/components/loader-group/LoaderGroup.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
   import {
     mapDimension,
-    mapFillHeight,
-    mapFixedHeightBounds,
-    mapFixedWidthBounds,
     mapLayerAlignment,
+    mapStackSize,
   } from "../stack/stack-utils";
   import { setStackDimensionContext } from "../stack/stack-dimension-context";
   import BackgroundVideoSurface from "../paywall/BackgroundVideoSurface.svelte";
@@ -21,7 +19,6 @@
     mapBorder,
     mapBorderRadius,
     mapShadow,
-    mapSize,
     mapSpacing,
     px,
   } from "../../utils/base-utils";
@@ -59,18 +56,11 @@
   });
 
   const borderRadiusCss = $derived(mapBorderRadius(actualProps.shape));
-  const heightFill = $derived(actualProps.size.height.type === "fill");
-
   const containerStyle = $derived(
     css({
       display: "flex",
       position: "relative",
-      width: mapSize(actualProps.size.width),
-      ...(heightFill
-        ? mapFillHeight(getParentStackDimension?.())
-        : { height: mapSize(actualProps.size.height) }),
-      ...mapFixedWidthBounds(actualProps.size.width),
-      ...mapFixedHeightBounds(actualProps.size.height),
+      ...mapStackSize(actualProps.size, getParentStackDimension?.()),
       ...mapDimension(actualProps.dimension),
       gap: px(actualProps.spacing),
       margin: mapSpacing(actualProps.margin),

package/dist/components/loader-progress-components/LoaderProgressComponents.svelte

@@ -4,7 +4,12 @@
   import { useConditionContext } from "../../stores/condition-context.svelte";
   import { getRequiredLoaderContext } from "../../stores/loader";
   import type { LoaderProgressComponentsProps } from "../../types/components/loader-progress-components";
-  import { css, mapSize, mapSpacing } from "../../utils/base-utils";
+  import {
+    css,
+    mapFillBounds,
+    mapSize,
+    mapSpacing,
+  } from "../../utils/base-utils";
   import { resolveOverrideProperties } from "../../utils/style-utils";
 
   const props: LoaderProgressComponentsProps = $props();
@@ -49,6 +54,7 @@
       "justify-content": "center",
       width: mapSize(actualProps.size.width),
       height: mapSize(actualProps.size.height),
+      ...mapFillBounds(actualProps.size),
       padding: mapSpacing(actualProps.padding),
       margin: mapSpacing(actualProps.margin),
     }),

package/dist/components/paywall/Paywall.svelte

@@ -224,8 +224,12 @@
     }),
   );
 
-  const { default_locale, components_config, components_localizations } =
-    paywallData;
+  const {
+    default_locale,
+    components_config,
+    components_localizations,
+    components_video_localizations,
+  } = paywallData;
   const { base } = components_config;
   const defaultPackageId = findSelectedPackageId(base);
 
@@ -250,6 +254,7 @@
     defaultLocale: default_locale,
     selectedLocale,
     localizations: components_localizations!,
+    videoLocalizations: components_video_localizations,
   }));
 
   const selectedPackageId = writable<string | undefined>(defaultPackageId);

package/dist/components/paywall/Sheet.svelte

@@ -12,7 +12,7 @@
     rcVideoBackgroundHostClass,
     videoBackgroundHostStyles,
   } from "../../utils/video-background-host";
-  import { css, mapSize } from "../../utils/base-utils";
+  import { css, mapFillBounds, mapSize } from "../../utils/base-utils";
   import { resolveOverrideProperties } from "../../utils/style-utils";
   import { onMount } from "svelte";
   import Stack from "../stack/Stack.svelte";
@@ -48,6 +48,7 @@
   const sheetStyle = $derived(
     css({
       height: mapSize(size.height),
+      ...mapFillBounds({ height: size.height }),
       ...videoBackgroundHostStyles({
         hasVideoBg,
         clipOverflow: true,

package/dist/components/skeleton-loader/SkeletonLoader.svelte

@@ -4,6 +4,7 @@
     css,
     mapBorder,
     mapBorderRadius,
+    mapFillBounds,
     mapShadow,
     mapSize,
     mapSpacing,
@@ -51,6 +52,7 @@
     position: "relative",
     width: mapSize(size.width),
     height: mapSize(size.height),
+    ...mapFillBounds(size),
     ...mapDimension(dimension),
     gap: px(spacing),
     margin: mapSpacing({

package/dist/components/stack/Stack.stories.svelte

@@ -10,6 +10,8 @@
   import { STORY_BACKGROUND_VIDEO_FILL } from "../../stories/video-background-story-fixture";
   import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
   import { defineMeta } from "@storybook/addon-svelte-csf";
+  import type { ComponentProps } from "svelte";
+  import { expect } from "storybook/test";
 
   const defaultLocale = Object.keys(localizations)[0];
 
@@ -198,6 +200,23 @@
   });
 </script>
 
+{#snippet fillClampTemplate(props: ComponentProps<typeof Stack>)}
+  <div class="fill-clamp-layouts">
+    <Stack {...props} testId="vertical-fill-clamp" />
+    <Stack
+      {...props}
+      id="horizontal-fill-clamp"
+      name="Horizontal fill clamp"
+      testId="horizontal-fill-clamp"
+      dimension={{
+        type: "horizontal",
+        alignment: "center",
+        distribution: "start",
+      }}
+    />
+  </div>
+{/snippet}
+
 <Story name="Vertical Stack" />
 
 <Story
@@ -211,6 +230,56 @@
   }}
 />
 
+<Story
+  name="Fill min/max clamps"
+  template={fillClampTemplate}
+  play={async ({ canvasElement }) => {
+    for (const testId of ["vertical-fill-clamp", "horizontal-fill-clamp"]) {
+      const child = canvasElement.querySelector(
+        `[data-testid="${testId}"] > .stack`,
+      );
+      const bounds = child?.getBoundingClientRect();
+      await expect(bounds?.width).toBe(220);
+      await expect(bounds?.height).toBe(140);
+    }
+  }}
+  args={{
+    size: {
+      width: { type: "fixed", value: 360 },
+      height: { type: "fixed", value: 240 },
+    },
+    components: [
+      {
+        type: "stack",
+        id: "clamped-child",
+        name: "Clamped child",
+        components: [],
+        size: {
+          width: { type: "fill", min: 120, max: 220 },
+          height: { type: "fill", min: 80, max: 140 },
+        },
+        dimension: {
+          type: "vertical",
+          alignment: "center",
+          distribution: "center",
+        },
+        spacing: 0,
+        margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+        padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+        background: {
+          type: "color",
+          value: { light: { type: "hex", value: "#6C63FF" } },
+        },
+        background_color: null,
+        border: null,
+        shape: null,
+        shadow: null,
+        badge: null,
+      },
+    ],
+  }}
+/>
+
 <Story
   name="Surface — video background"
   parameters={{
@@ -3018,3 +3087,11 @@
     },
   }}
 />
+
+<style>
+  .fill-clamp-layouts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+  }
+</style>

package/dist/components/stack/Stack.svelte

@@ -17,7 +17,6 @@
     mapBorder,
     mapBorderRadius,
     mapShadow,
-    mapSize,
     mapSpacing,
     px,
     type CSS,
@@ -27,10 +26,8 @@
   import {
     mapBadge,
     mapDimension,
-    mapFillHeight,
-    mapFixedHeightBounds,
-    mapFixedWidthBounds,
     mapLayerAlignment,
+    mapStackSize,
   } from "./stack-utils";
   import { setStackDimensionContext } from "./stack-dimension-context";
 
@@ -85,20 +82,11 @@
   });
   const borderRadiusCss = $derived(mapBorderRadius(shape));
 
-  const heightFill = $derived(size.height.type === "fill");
-
   const stackStyle = $derived(
     css({
       display: "flex",
       position: "relative",
-      width: mapSize(size.width),
-      // Fill height: definite height + growth in columns; stretch in rows
-      // (see mapFillHeight). Lets nested fill children (e.g. web_view) resolve.
-      ...(heightFill
-        ? mapFillHeight(getParentStackDimension?.())
-        : { height: mapSize(size.height) }),
-      ...mapFixedWidthBounds(size.width),
-      ...mapFixedHeightBounds(size.height),
+      ...mapStackSize(size, getParentStackDimension?.()),
       ...mapDimension(dimension),
       gap: px(spacing),
       margin: mapSpacing(margin),

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

@@ -1,10 +1,12 @@
-import type { Size } from "../../types";
+import type { Size, SizeType } from "../../types";
 import type { Dimension, ZAlignment } from "../../types/alignment";
 import type { Badge } from "../../types/components/stack";
 import { type CSS } from "../../utils/base-utils";
 export declare function mapFixedWidthBounds(width: Size): CSS;
 export declare function mapFixedHeightBounds(height: Size): CSS;
 export declare function mapFillHeight(parentDimension?: Dimension["type"]): CSS;
+/** Fill clamps must follow the flex min-size reset so authored bounds win. */
+export declare function mapStackSize(size: SizeType, parentDimension?: Dimension["type"]): CSS;
 export declare function mapDimension(dimension: Dimension): Record<string, string>;
 type JustifyAlign = {
     justifyContent: string;

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

@@ -1,4 +1,4 @@
-import { px } from "../../utils/base-utils";
+import { mapFillBounds, mapSize, px } from "../../utils/base-utils";
 const ALIGNMENT_MAP = Object.freeze({
     leading: "flex-start",
     top: "flex-start",
@@ -50,6 +50,18 @@ export function mapFillHeight(parentDimension) {
             : {}),
     };
 }
+/** Fill clamps must follow the flex min-size reset so authored bounds win. */
+export function mapStackSize(size, parentDimension) {
+    return {
+        width: mapSize(size.width),
+        ...(size.height.type === "fill"
+            ? mapFillHeight(parentDimension)
+            : { height: mapSize(size.height) }),
+        ...mapFixedWidthBounds(size.width),
+        ...mapFixedHeightBounds(size.height),
+        ...mapFillBounds(size),
+    };
+}
 export function mapDimension(dimension) {
     if (dimension.type === "zlayer") {
         return {};

package/dist/components/tabs/Tabs.svelte

@@ -15,6 +15,7 @@
     css,
     mapBorder,
     mapBorderRadius,
+    mapFillBounds,
     mapShadow,
     mapSize,
     mapSpacing,
@@ -64,6 +65,7 @@
       position: "relative",
       width: mapSize(size.width),
       height: mapSize(size.height),
+      ...mapFillBounds(size),
       margin: mapSpacing(margin),
       padding: mapSpacing(padding),
       ...videoBackgroundHostStyles({

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

@@ -1,6 +1,6 @@
 import { FontSizes, FontWeights, TextAlignments, } from "../../types";
 import { mapBackground } from "../../utils/background-utils";
-import { css, mapColorInfo, mapColorMode, mapSize, mapSpacing, } from "../../utils/base-utils";
+import { css, mapColorInfo, mapColorMode, mapFillBounds, mapSize, mapSpacing, } from "../../utils/base-utils";
 import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
 import { getScopedFontFamily, isFontRCFMManaged } from "../../utils/font-utils";
 export const defaultColor = {
@@ -81,6 +81,7 @@ export function getTextWrapperInlineStyles(colorMode, _restProps, size, backgrou
         position: "relative",
         width: mapSize(size.width),
         height: mapSize(size.height),
+        ...mapFillBounds(size),
         ...mapBackground(colorMode, background_color, null),
     });
 }

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

@@ -1,6 +1,8 @@
 import type { TimelineProps } from "../../types/components/timeline";
 import type { ColorMode } from "../../types";
 export declare function getTimelineInlineStyles(props: TimelineProps): {
+    padding: string;
+    margin: string;
     display: string;
     "grid-template-columns": string;
     "column-gap": string;
@@ -9,8 +11,6 @@ export declare function getTimelineInlineStyles(props: TimelineProps): {
     flex: string;
     width: string;
     height: string;
-    padding: string;
-    margin: string;
 };
 export declare function getTimelineItemContentInlineStyles(_colorMode: ColorMode, timelineSpacing: {
     text_spacing: number;

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

@@ -1,4 +1,4 @@
-import { mapSize, mapSpacing } from "../../utils/base-utils";
+import { mapFillBounds, mapSize, mapSpacing } from "../../utils/base-utils";
 export function getTimelineInlineStyles(props) {
     return {
         display: "grid",
@@ -9,6 +9,7 @@ export function getTimelineInlineStyles(props) {
         flex: "0 1 auto",
         width: mapSize(props.size.width),
         height: mapSize(props.size.height),
+        ...mapFillBounds(props.size),
         padding: mapSpacing(props.padding),
         margin: mapSpacing(props.margin),
     };

package/dist/components/video/Video.stories.svelte

@@ -1,12 +1,32 @@
 <script module lang="ts">
   import Video from "./Video.svelte";
   import { componentDecorator } from "../../stories/component-decorator";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import type { VideoInfo } from "../../types/media";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
+  const localizedVideo: VideoInfo = {
+    dark: null,
+    light: {
+      width: 1920,
+      height: 1080,
+      url: "https://videos.pexels.com/video-files/10288594/10288594-hd_1920_1080_25fps.mp4",
+      url_low_res:
+        "https://videos.pexels.com/video-files/10288594/10288594-hd_1920_1080_25fps.mp4",
+    },
+  };
+
   const { Story } = defineMeta({
     title: "Components/Video",
     component: Video,
-    decorators: [componentDecorator()],
+    decorators: [
+      componentDecorator(),
+      localizationDecorator({
+        defaultLocale: "en_US",
+        localizations: {},
+        videoLocalizations: { en_US: { localized_video: localizedVideo } },
+      }),
+    ],
     parameters: {
       chromatic: { disableSnapshot: true },
     },
@@ -139,6 +159,14 @@
   }}
 />
 
+<Story
+  name="Localized Source"
+  args={{
+    source: null,
+    override_video_lid: "localized_video",
+  }}
+/>
+
 <Story
   name="Overlay Radial Gradient"
   args={{

package/dist/components/video/Video.svelte

@@ -2,18 +2,22 @@
   import { untrack } from "svelte";
   import { getColorModeContext } from "../../stores/color-mode";
   import { useConditionContext } from "../../stores/condition-context.svelte";
+  import { getLocalizationContext } from "../../stores/localization";
   import type { VideoProps } from "../../types/components/video";
   import type { VideoFiles, ImageFiles } from "../../types/media";
   import {
+    clampFillSize,
     css,
     mapBorderRadius,
     mapColor,
     mapColorMode,
+    mapFillBounds,
     mapFitMode,
     mapSize,
     mapSpacing,
   } from "../../utils/base-utils";
   import { resolveOverrideProperties } from "../../utils/style-utils";
+  import { resolveLocalizedSource } from "../../utils/source-utils";
   import {
     applyInlineVideoPlaybackFlags,
     subscribeDecorativeVideoAutoplayAttempts,
@@ -25,9 +29,12 @@
   const props: VideoProps = $props();
 
   const buildConditionContext = useConditionContext();
+  const { getLocalizedVideo } = getLocalizationContext();
+
+  const conditionContext = $derived(buildConditionContext());
+
   const {
     id,
-    source,
     fallback_source,
     size,
     mask_shape,
@@ -45,10 +52,19 @@
   } = $derived.by(() => {
     return {
       ...props,
-      ...resolveOverrideProperties(buildConditionContext(), props.overrides),
+      ...resolveOverrideProperties(conditionContext, props.overrides),
     };
   });
 
+  const source = $derived(
+    resolveLocalizedSource(
+      props,
+      "override_video_lid",
+      conditionContext,
+      getLocalizedVideo,
+    ),
+  );
+
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
   const video: VideoFiles | null = $derived(
@@ -145,9 +161,12 @@
     const h = videoSize.height;
     if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {
       // Avoid 0-height box and NaN before metadata (`NaN <= 0` is false); 16:9 placeholder until dimensions resolve.
-      return wrapperWidth > 0 ? Math.round(wrapperWidth * (9 / 16)) : 200;
+      const placeholderHeight =
+        wrapperWidth > 0 ? Math.round(wrapperWidth * (9 / 16)) : 200;
+      return clampFillSize(placeholderHeight, size.height);
     }
-    return Math.round(wrapperWidth * (h / w));
+    const aspectHeight = Math.round(wrapperWidth * (h / w));
+    return clampFillSize(aspectHeight, size.height);
   });
 
   const style = $derived(
@@ -161,6 +180,7 @@
       ...(size.width.type === "fixed"
         ? {}
         : { "min-width": 0, "min-height": 0 }),
+      ...mapFillBounds(size),
     }),
   );
 

package/dist/components/wallet-button/WalletButton.svelte

@@ -4,7 +4,13 @@
   import { getColorModeContext } from "../../stores/color-mode";
   import { getPaywallContext } from "../../stores/paywall";
   import type { WalletButtonProps } from "../../types/components/wallet-button";
-  import { css, mapSize, mapSpacing, px } from "../../utils/base-utils";
+  import {
+    css,
+    mapFillBounds,
+    mapSize,
+    mapSpacing,
+    px,
+  } from "../../utils/base-utils";
   import { DEFAULT_SPACING } from "../../utils/constants";
   import { onDestroy } from "svelte";
 
@@ -62,6 +68,7 @@
     position: "relative",
     width: mapSize(size.width),
     height: mapSize(size.height),
+    ...mapFillBounds(size),
     ...mapDimension(dimension),
     gap: px(spacing),
     margin: mapSpacing({

package/dist/components/web-view/WebView.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import type { WebViewProps } from "../../types/components/web-view";
-  import { css, mapSize, px } from "../../utils/base-utils";
+  import { css, mapFillBounds, mapSize, px } from "../../utils/base-utils";
   import { getStackDimensionContext } from "../stack/stack-dimension-context";
   import { mapFillHeight } from "../stack/stack-utils";
   import { isSameOriginAsHost, sanitizeWebViewUrl } from "./web-view-utils";
@@ -126,6 +126,7 @@
               width.type === "fixed" || widthFit || heightFit ? 0 : 1,
           }),
       "line-height": 0,
+      ...mapFillBounds(props.size),
       // No transition: the iframe is height:100% of this box, so animating the
       // resize would flash the iframe's own scrollbar mid-change.
     });

package/dist/stores/localization.d.ts

@@ -1,15 +1,18 @@
-import type { Localizations } from "../types/localization";
-import type { ImageInfo } from "../types/media";
+import type { Localizations, VideoLocalizations } from "../types/localization";
+import type { ImageInfo, VideoInfo } from "../types/media";
 type GetLocalizedString = (id?: string) => string | undefined;
 export type GetLocalizedImage = (id?: string) => ImageInfo | undefined;
+export type GetLocalizedVideo = (id?: string) => VideoInfo | undefined;
 interface LocalizationContext {
     getLocalizedString: GetLocalizedString;
     getLocalizedImage: GetLocalizedImage;
+    getLocalizedVideo: GetLocalizedVideo;
 }
 export interface LocalizationContextProps {
     defaultLocale: string;
     selectedLocale?: string;
     localizations: Localizations;
+    videoLocalizations?: VideoLocalizations;
 }
 export declare function setLocalizationContext(props: () => LocalizationContextProps): LocalizationContext;
 export declare function getLocalizationContext(): LocalizationContext;

package/dist/stores/localization.js

@@ -1,30 +1,32 @@
 import { getContext, setContext } from "svelte";
 const key = Symbol("localization");
 export function setLocalizationContext(props) {
-    const getLocalizedValue = (id) => {
+    const lookup = (table, id) => {
         if (!id) {
             return undefined;
         }
-        const { selectedLocale, defaultLocale, localizations } = props();
+        const { selectedLocale, defaultLocale } = props();
         const locale = selectedLocale ?? defaultLocale;
-        const selected = localizations[locale]?.[id];
-        const fallback = localizations[defaultLocale]?.[id];
+        const selected = table[locale]?.[id];
+        const fallback = table[defaultLocale]?.[id];
         return selected ?? fallback;
     };
     const getLocalizedString = (id) => {
         if (!id) {
             return "";
         }
-        const value = getLocalizedValue(id);
+        const value = lookup(props().localizations, id);
         return typeof value === "string" ? value : undefined;
     };
     const getLocalizedImage = (id) => {
-        const value = getLocalizedValue(id);
+        const value = lookup(props().localizations, id);
         return typeof value === "object" ? value : undefined;
     };
+    const getLocalizedVideo = (id) => lookup(props().videoLocalizations ?? {}, id);
     const context = {
         getLocalizedString,
         getLocalizedImage,
+        getLocalizedVideo,
     };
     setContext(key, context);
     return context;

package/dist/types/components/video.d.ts

@@ -18,7 +18,7 @@ export interface VideoProps extends BaseComponent {
     visible?: boolean | null;
     source: VideoInfo | null;
     fallback_source?: ImageInfo | null;
-    override_source_lid?: string | null;
+    override_video_lid?: string | null;
     size: SizeType;
     mask_shape?: RectangleShape | CircleShape | ConcaveShape | ConvexShape | null;
     fit_mode: FitMode;

package/dist/types/localization.d.ts

@@ -1,5 +1,6 @@
-import type { ImageInfo } from "./media";
+import type { ImageInfo, VideoInfo } from "./media";
 export type LocalizationValue = string | ImageInfo;
 type Localization = Partial<Record<string, LocalizationValue>>;
 export type Localizations = Partial<Record<string, Localization>>;
+export type VideoLocalizations = Partial<Record<string, Partial<Record<string, VideoInfo>>>>;
 export {};

package/dist/types/paywall.d.ts

@@ -3,7 +3,7 @@ import type { ColorScheme } from "./colors";
 import type { FooterProps } from "./components/footer";
 import type { HeaderProps } from "./components/header";
 import type { StackProps } from "./components/stack";
-import type { Localizations } from "./localization";
+import type { Localizations, VideoLocalizations } from "./localization";
 import type { StateDeclaration } from "./state";
 export interface RootPaywall {
     background?: Background;
@@ -29,6 +29,7 @@ export interface PaywallData {
     default_locale: string;
     components_config: ComponentConfig;
     components_localizations: Localizations;
+    components_video_localizations?: VideoLocalizations;
     /** Declared paywall-state keys (key → {type, default}). Absent on paywalls without state. */
     state_declarations?: Record<string, StateDeclaration>;
 }

package/dist/types.d.ts

@@ -57,6 +57,9 @@ type FitSize = {
 type FillSize = {
     type: "fill";
     value?: null;
+    /** Optional px clamps on the filled axis. */
+    min?: number | null;
+    max?: number | null;
 };
 export type Size = FixedSize | RelativeSize | FitSize | FillSize;
 export type SizeType = {

package/dist/utils/base-utils.d.ts

@@ -1,4 +1,4 @@
-import type { BorderType, CircleShape, ColorMode, ConcaveShape, ConvexShape, PillShape, RectangleShape, ShadowType, Size, Spacing } from "../types";
+import type { BorderType, CircleShape, ColorMode, ConcaveShape, ConvexShape, PillShape, RectangleShape, ShadowType, Size, SizeType, Spacing } from "../types";
 import type { ColorGradientInfo, ColorGradientScheme, ColorScheme } from "../types/colors";
 import type { FitMode } from "../types/media";
 export type CSS = Record<string, string | number>;
@@ -9,6 +9,10 @@ export declare function mapColorMode<T>(colorMode: ColorMode, value: {
     dark?: T | null;
 }): T;
 export declare function mapSize(size: Size): string;
+/** Spread after flex min-size resets so authored fill bounds win. */
+export declare function mapFillBounds(size: Partial<SizeType>): CSS;
+/** Apply fill bounds to a layout-derived size before the browser measures it. */
+export declare function clampFillSize(value: number, size: Size): number;
 export declare function mapSpacing(spacing?: Spacing | null): string;
 export declare function mapColorInfo(info: ColorGradientInfo): string;
 export declare function mapColor(colorMode: ColorMode, scheme: ColorScheme | ColorGradientScheme | null | undefined): string;

package/dist/utils/base-utils.js

@@ -33,6 +33,30 @@ export function mapSize(size) {
         }
     }
 }
+function mapAxisFillBounds(size, axis) {
+    if (size.type !== "fill") {
+        return {};
+    }
+    return {
+        ...(size.min != null ? { [`min-${axis}`]: px(size.min) } : {}),
+        ...(size.max != null ? { [`max-${axis}`]: px(size.max) } : {}),
+    };
+}
+/** Spread after flex min-size resets so authored fill bounds win. */
+export function mapFillBounds(size) {
+    return {
+        ...(size.width ? mapAxisFillBounds(size.width, "width") : {}),
+        ...(size.height ? mapAxisFillBounds(size.height, "height") : {}),
+    };
+}
+/** Apply fill bounds to a layout-derived size before the browser measures it. */
+export function clampFillSize(value, size) {
+    if (size.type !== "fill") {
+        return value;
+    }
+    const maxClamped = size.max == null ? value : Math.min(value, size.max);
+    return size.min == null ? maxClamped : Math.max(maxClamped, size.min);
+}
 export function mapSpacing(spacing) {
     const { top = 0, bottom = 0, leading = 0, trailing = 0, } = spacing ?? DEFAULT_SPACING;
     return mapTuple(top, trailing, bottom, leading);

package/dist/utils/source-utils.d.ts

@@ -0,0 +1,16 @@
+import type { Overrides } from "../types/overrides";
+import { type ConditionContext } from "./style-utils";
+type LocalizedSourceFields<Source, LidKey extends string> = {
+    source?: Source;
+} & Partial<Record<LidKey, string | null>>;
+type LocalizedSourceProps<Source, LidKey extends string> = LocalizedSourceFields<Source, LidKey> & {
+    source: Source;
+    overrides?: Overrides<LocalizedSourceFields<Source, LidKey>>;
+};
+/**
+ * Resolves the media source to render for a component, preferring a matching
+ * override but defaulting to the component's source. At each level, a
+ * localized source referenced by `lidKey` wins over the inline `source`.
+ */
+export declare function resolveLocalizedSource<Source, LidKey extends string>(props: LocalizedSourceProps<Source, LidKey>, lidKey: LidKey, context: ConditionContext, getLocalizedSource: (id?: string) => NonNullable<Source> | undefined): Source;
+export {};

package/dist/utils/source-utils.js

@@ -0,0 +1,19 @@
+import { filterMatchingOverrides, } from "./style-utils";
+/**
+ * Resolves the media source to render for a component, preferring a matching
+ * override but defaulting to the component's source. At each level, a
+ * localized source referenced by `lidKey` wins over the inline `source`.
+ */
+export function resolveLocalizedSource(props, lidKey, context, getLocalizedSource) {
+    const resolve = (source, lid) => (lid ? (getLocalizedSource(lid) ?? source) : source);
+    let resolvedOverrideSource;
+    for (const override of filterMatchingOverrides(context, props.overrides)) {
+        const source = resolve(override.properties.source, override.properties[lidKey]);
+        if (source) {
+            resolvedOverrideSource = source;
+        }
+    }
+    return (resolvedOverrideSource ??
+        resolve(props.source, props[lidKey]) ??
+        props.source);
+}

package/dist/utils/style-utils.d.ts

@@ -35,7 +35,7 @@ export type ConditionContext = {
  * Returns the overrides (in array order) whose conditions all match (AND) the
  * given context, without merging their properties.
  */
-export declare const filterMatchingOverrides: <T extends Component>(context: ConditionContext, overrides?: Overrides<T>) => Overrides<T>;
+export declare const filterMatchingOverrides: <T>(context: ConditionContext, overrides?: Overrides<T>) => Overrides<T>;
 /**
  * Merges the properties of every override whose conditions all match (AND),
  * applying them in override-array order (later overrides overwrite earlier ones).

package/package.json

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

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

@@ -1,9 +0,0 @@
-import type { ImageProps } from "../../types/components/image";
-import type { ImageInfo } from "../../types/media";
-import { type ConditionContext } from "../../utils/style-utils";
-import type { GetLocalizedImage } from "../../stores/localization";
-/**
- * Resolves the ImageInfo to render for an image component, preferring
- * a matching override but defaulting to the image source.
- */
-export declare function resolveImageSource(props: ImageProps, context: ConditionContext, getLocalizedImage: GetLocalizedImage): ImageInfo;

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

@@ -1,20 +0,0 @@
-import { filterMatchingOverrides, } from "../../utils/style-utils";
-/**
- * Resolves the ImageInfo to render for an image component, preferring
- * a matching override but defaulting to the image source.
- */
-export function resolveImageSource(props, context, getLocalizedImage) {
-    const resolveLocalizedSource = (source, overrideSourceLid) => overrideSourceLid
-        ? (getLocalizedImage(overrideSourceLid) ?? source)
-        : source;
-    let resolvedOverrideImage;
-    for (const override of filterMatchingOverrides(context, props.overrides)) {
-        const image = resolveLocalizedSource(override.properties.source, override.properties.override_source_lid);
-        if (image) {
-            resolvedOverrideImage = image;
-        }
-    }
-    return (resolvedOverrideImage ??
-        resolveLocalizedSource(props.source, props.override_source_lid) ??
-        props.source);
-}