@revenuecat/purchases-ui-js 4.12.2 → 4.12.4

package/dist/components/carousel/Carousel.stories.svelte

@@ -360,6 +360,16 @@
 
   const lastPage = pages.length - 1;
 
+  const pagesWithShadow: CarouselProps["pages"] = pages.map((page) => ({
+    ...page,
+    shadow: {
+      x: 0,
+      y: 4,
+      radius: 14,
+      color: { light: { type: "hex", value: "#00000040" } },
+    },
+  }));
+
   const { Story } = defineMeta({
     title: "Components/Carousel",
     component: Carousel,
@@ -1085,3 +1095,45 @@
     },
   }}
 />
+
+<Story
+  name="Page shadows"
+  args={{
+    padding: { top: 16, bottom: 16, leading: 0, trailing: 0 },
+    page_alignment: "top",
+    page_control: null,
+    auto_advance: null,
+    pages: pagesWithShadow,
+  }}
+/>
+
+<Story
+  name="Rounded gradient border with page shadows"
+  args={{
+    padding: { top: 16, bottom: 16, leading: 16, trailing: 16 },
+    shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 24,
+        top_trailing: 24,
+        bottom_leading: 24,
+        bottom_trailing: 24,
+      },
+    },
+    border: {
+      width: 4,
+      color: {
+        light: {
+          type: "linear",
+          degrees: 90,
+          points: [
+            { color: "#000000", percent: 0 },
+            { color: "#FF0000", percent: 100 },
+          ],
+        },
+      },
+    },
+    auto_advance: null,
+    pages: pagesWithShadow,
+  }}
+/>

package/dist/components/carousel/Carousel.svelte

@@ -72,7 +72,6 @@
   const carouselStyle = $derived(
     css({
       margin: mapSpacing(margin),
-      padding: mapSpacing(padding),
       ...videoBackgroundHostStyles({
         hasVideoBg,
         positionRelative: true,
@@ -85,6 +84,9 @@
     }),
   );
 
+  // Padding lives inside the clip so page shadows can paint into it.
+  const clipStyle = $derived(css({ padding: mapSpacing(padding) }));
+
   const sliderStyle = $derived(
     css({
       gap: px(page_spacing),
@@ -321,7 +323,7 @@
       />
     </div>
   {/if}
-  <div class="carousel-clip">
+  <div class="carousel-clip" style={clipStyle}>
     <div
       bind:this={slider}
       bind:clientWidth={carouselWidth}

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

@@ -57,7 +57,10 @@
       ...(margin
         ? {
             ...margin,
-            bottom: Math.max(margin.bottom, minDistanceBetweenPurchaseButtons),
+            bottom: Math.max(
+              margin.bottom ?? 0,
+              minDistanceBetweenPurchaseButtons,
+            ),
           }
         : {
             ...DEFAULT_SPACING,

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

@@ -5,6 +5,7 @@
   import { localizations } from "../../stories/fixtures";
   import { localizationDecorator } from "../../stories/localization-decorator";
   import type { StackProps } from "../../types/components/stack";
+  import type { Spacing } from "../../types";
   import type { Component } from "../../types/component";
   import { STORY_BACKGROUND_VIDEO_FILL } from "../../stories/video-background-story-fixture";
   import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
@@ -107,6 +108,62 @@
     },
   ];
 
+  function marginBox(
+    id: string,
+    labelLid: string,
+    margin: Spacing,
+  ): StackProps {
+    return {
+      type: "stack",
+      id,
+      name: id,
+      components: [
+        {
+          type: "text",
+          id: `${id}-label`,
+          name: "Label",
+          text_lid: labelLid,
+          color: { light: { type: "hex", value: "#ffffff" } },
+          font_name: null,
+          font_size: "body_m",
+          font_weight: "bold",
+          horizontal_alignment: "leading",
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+        },
+        {
+          type: "text",
+          id: `${id}-expected`,
+          name: "Expected",
+          text_lid: "margin_expected",
+          color: { light: { type: "hex", value: "#ffffff" } },
+          font_name: null,
+          font_size: "body_s",
+          font_weight: "regular",
+          horizontal_alignment: "leading",
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+        },
+      ] as unknown as TextNodeProps[],
+      size: { width: { type: "fill" }, height: { type: "fit" } },
+      dimension: {
+        type: "vertical",
+        alignment: "leading",
+        distribution: "start",
+      },
+      spacing: 4,
+      margin,
+      padding: { top: 12, trailing: 12, bottom: 12, leading: 12 },
+      background_color: {
+        light: { type: "hex", value: "#47aab1" },
+        dark: { type: "hex", value: "#47aab1" },
+      },
+      background: null,
+      border: null,
+      shape: null,
+      shadow: null,
+      badge: null,
+    };
+  }
+
   const { Story } = defineMeta({
     title: "Components/Stack",
     component: Stack,
@@ -483,6 +540,44 @@
   }}
 />
 
+<Story
+  name="Nested stack — partial margin"
+  parameters={{
+    docs: {
+      description: {
+        story:
+          "The first inner stack only sets `margin.top`; the second sets all four sides explicitly. Missing sides render as 0, matching iOS and Android, so both boxes should look identical: 48px below whatever is above them and flush with both horizontal edges.",
+      },
+    },
+  }}
+  args={{
+    size: {
+      width: { type: "fixed", value: 300 },
+      height: { type: "fit" },
+    },
+    dimension: {
+      type: "vertical",
+      alignment: "leading",
+      distribution: "start",
+    },
+    spacing: 0,
+    padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    background_color: {
+      light: { type: "hex", value: "#F0F0F0" },
+      dark: { type: "hex", value: "#F0F0F0" },
+    },
+    components: [
+      marginBox("partial", "partial_margin", { top: 48 }),
+      marginBox("explicit", "explicit_margin", {
+        top: 48,
+        trailing: 0,
+        bottom: 0,
+        leading: 0,
+      }),
+    ],
+  }}
+/>
+
 <Story
   name="Complex - pill"
   args={{

package/dist/components/timeline/TimelineItem.svelte

@@ -3,7 +3,7 @@
   import { getColorModeContext } from "../../stores/color-mode";
   import { useConditionContext } from "../../stores/condition-context.svelte";
   import type { TimelineItemProps } from "../../types/components/timeline";
-  import { css, mapColor } from "../../utils/base-utils";
+  import { css, mapColor, mapSpacing } from "../../utils/base-utils";
   import { resolveOverrideProperties } from "../../utils/style-utils";
   import Icon from "../icon/Icon.svelte";
   import TextNode from "../text/TextNode.svelte";
@@ -56,8 +56,7 @@
       "z-index": "1",
       width: `${connector.width}px`,
       height: `100%`, // Extend beyond icon
-      "padding-top": `${connector.margin.top}px`,
-      "padding-bottom": `${connector.margin.bottom}px`,
+      padding: mapSpacing(connector.margin),
     });
   });
 

package/dist/stories/fixtures.d.ts

@@ -18,6 +18,9 @@ export declare const localizations: {
         id2: string;
         id3: string;
         badge: string;
+        partial_margin: string;
+        explicit_margin: string;
+        margin_expected: string;
         countdown: string;
         ended: string;
         days: string;

package/dist/stories/fixtures.js

@@ -17317,6 +17317,9 @@ export const localizations = {
         id2: "Item 2",
         id3: "Item 3",
         badge: "Badge Text",
+        partial_margin: "margin: { top: 48 }",
+        explicit_margin: "margin: { top: 48, trailing: 0, bottom: 0, leading: 0 }",
+        margin_expected: "48px gap above, edge to edge horizontally",
         countdown: "{{ count_days_with_zero }} : {{ count_hours_with_zero }} : {{ count_minutes_with_zero }} : {{ count_seconds_with_zero }}",
         ended: "Time's up!",
         days: "{{ count_days_without_zero }} days",

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

@@ -20,8 +20,8 @@ export interface TimelineProps extends BaseComponent {
 export interface TimelineConnectorProps {
     width: number;
     margin: {
-        top: number;
-        bottom: number;
+        top?: number;
+        bottom?: number;
     };
     color: ColorGradientScheme | null;
 }

package/dist/types.d.ts

@@ -87,10 +87,10 @@ export type BorderType = {
     width: number;
 };
 export type Spacing = {
-    top: number;
-    bottom: number;
-    leading: number;
-    trailing: number;
+    top?: number;
+    bottom?: number;
+    leading?: number;
+    trailing?: number;
 };
 export type CornerRadiusType = {
     bottom_leading: number;

package/dist/utils/base-utils.js

@@ -34,7 +34,7 @@ export function mapSize(size) {
     }
 }
 export function mapSpacing(spacing) {
-    const { top, bottom, leading, trailing } = spacing ?? DEFAULT_SPACING;
+    const { top = 0, bottom = 0, leading = 0, trailing = 0, } = spacing ?? DEFAULT_SPACING;
     return mapTuple(top, trailing, bottom, leading);
 }
 export function mapColorInfo(info) {

package/dist/utils/style-utils.js

@@ -162,8 +162,9 @@ const conditionMatches = (condition, context) => {
     if (condition.type === "error")
         return !!context.error;
     if (condition.type === "multiple_intro_offers") {
-        // No web data source for this; never matches.
-        return false;
+        // A Web Billing multiphase offer has a free trial followed by an
+        // introductory price.
+        return (!!context.packageInfo?.hasTrial && !!context.packageInfo?.hasIntroOffer);
     }
     if (condition.type === "intro_offer" ||
         condition.type === "intro_offer_condition") {

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