@revenuecat/purchases-ui-js 4.12.3 → 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/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.3",
+  "version": "4.12.4",
   "author": {
     "name": "RevenueCat, Inc."
   },