@deriv-web-design/ui 0.1.19 → 0.1.20

package/components.manifest.json

@@ -1826,6 +1826,16 @@
               "required": true,
               "description": "Visible label on the link, e.g. \"Learn more\""
             },
+            "mediaSizes": {
+              "type": "string",
+              "required": false,
+              "description": "Browser layout contract for `mediaSrcSet`. Defaults to the column this template actually lays out (`(min-width: 992px) 50vw, 100vw`), so a consumer supplying only `mediaSrcSet` still gets a correct pick."
+            },
+            "mediaSrcSet": {
+              "type": "string",
+              "required": false,
+              "description": "Responsive candidates for `mediaUrl`, as a standard `srcset` string. Render-time only — a CMS stores one master URL and the renderer derives these. Without them the same file is sent to every device: the desktop media column is ~560 CSS px (1120 at DPR 2, so a 1200w rendition), while a phone paints the same slot at ~382 CSS px and needs 800w. Measured on one asset: 64,736 B against 40,120 B for the width that actually paints. Ignored for `\"lottie\"` items — an animation is played, not resized."
+            },
             "mediaType": {
               "type": "\"image\" | \"lottie\"",
               "required": false,
@@ -1836,6 +1846,16 @@
               "required": true,
               "description": "URL to the .lottie file or any image asset (png, jpg, svg, webp…)"
             },
+            "posterSizes": {
+              "type": "string",
+              "required": false,
+              "description": "Layout contract for `posterSrcSet`. Same default as `mediaSizes`."
+            },
+            "posterSrcSet": {
+              "type": "string",
+              "required": false,
+              "description": "Responsive candidates for `posterUrl`. Same contract as `mediaSrcSet`."
+            },
             "posterUrl": {
               "type": "string",
               "required": false,

package/dist/index.d.mts

@@ -750,6 +750,24 @@ interface FeatureScrollItem {
     mediaType?: "lottie" | "image";
     /** URL to the .lottie file or any image asset (png, jpg, svg, webp…) */
     mediaUrl: string;
+    /**
+     * Responsive candidates for `mediaUrl`, as a standard `srcset` string.
+     *
+     * Render-time only — a CMS stores one master URL and the renderer derives
+     * these. Without them the same file is sent to every device: the desktop
+     * media column is ~560 CSS px (1120 at DPR 2, so a 1200w rendition), while a
+     * phone paints the same slot at ~382 CSS px and needs 800w. Measured on one
+     * asset: 64,736 B against 40,120 B for the width that actually paints.
+     *
+     * Ignored for `"lottie"` items — an animation is played, not resized.
+     */
+    mediaSrcSet?: string;
+    /**
+     * Browser layout contract for `mediaSrcSet`. Defaults to the column this
+     * template actually lays out (`(min-width: 992px) 50vw, 100vw`), so a
+     * consumer supplying only `mediaSrcSet` still gets a correct pick.
+     */
+    mediaSizes?: string;
     /**
      * Still frame painted while an animation's player and engine are loading.
      *
@@ -760,6 +778,10 @@ interface FeatureScrollItem {
      * a hole in the layout. Ignored once the animation is playing.
      */
     posterUrl?: string;
+    /** Responsive candidates for `posterUrl`. Same contract as `mediaSrcSet`. */
+    posterSrcSet?: string;
+    /** Layout contract for `posterSrcSet`. Same default as `mediaSizes`. */
+    posterSizes?: string;
 }
 interface FeatureScrollProps extends HTMLAttributes<HTMLElement> {
     /** Section heading rendered as an H2 */

package/dist/index.d.ts

@@ -750,6 +750,24 @@ interface FeatureScrollItem {
     mediaType?: "lottie" | "image";
     /** URL to the .lottie file or any image asset (png, jpg, svg, webp…) */
     mediaUrl: string;
+    /**
+     * Responsive candidates for `mediaUrl`, as a standard `srcset` string.
+     *
+     * Render-time only — a CMS stores one master URL and the renderer derives
+     * these. Without them the same file is sent to every device: the desktop
+     * media column is ~560 CSS px (1120 at DPR 2, so a 1200w rendition), while a
+     * phone paints the same slot at ~382 CSS px and needs 800w. Measured on one
+     * asset: 64,736 B against 40,120 B for the width that actually paints.
+     *
+     * Ignored for `"lottie"` items — an animation is played, not resized.
+     */
+    mediaSrcSet?: string;
+    /**
+     * Browser layout contract for `mediaSrcSet`. Defaults to the column this
+     * template actually lays out (`(min-width: 992px) 50vw, 100vw`), so a
+     * consumer supplying only `mediaSrcSet` still gets a correct pick.
+     */
+    mediaSizes?: string;
     /**
      * Still frame painted while an animation's player and engine are loading.
      *
@@ -760,6 +778,10 @@ interface FeatureScrollItem {
      * a hole in the layout. Ignored once the animation is playing.
      */
     posterUrl?: string;
+    /** Responsive candidates for `posterUrl`. Same contract as `mediaSrcSet`. */
+    posterSrcSet?: string;
+    /** Layout contract for `posterSrcSet`. Same default as `mediaSizes`. */
+    posterSizes?: string;
 }
 interface FeatureScrollProps extends HTMLAttributes<HTMLElement> {
     /** Section heading rendered as an H2 */

package/dist/index.js

@@ -2804,6 +2804,7 @@ var ChevronRight2 = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     )
   }
 );
+var DEFAULT_MEDIA_SIZES = "(min-width: 992px) 50vw, 100vw";
 function mediaSrc(item) {
   return typeof item.mediaUrl === "string" && item.mediaUrl !== "" ? item.mediaUrl : null;
 }
@@ -2827,6 +2828,10 @@ var MediaRenderer = ({ item, active, rootMargin, threshold }) => {
           "img",
           {
             src: item.posterUrl,
+            ...item.posterSrcSet ? {
+              srcSet: item.posterSrcSet,
+              sizes: item.posterSizes ?? DEFAULT_MEDIA_SIZES
+            } : {},
             alt: "",
             "aria-hidden": "true",
             loading: "lazy",
@@ -2840,6 +2845,7 @@ var MediaRenderer = ({ item, active, rootMargin, threshold }) => {
     "img",
     {
       src,
+      ...item.mediaSrcSet ? { srcSet: item.mediaSrcSet, sizes: item.mediaSizes ?? DEFAULT_MEDIA_SIZES } : {},
       alt: item.title,
       loading: "lazy",
       decoding: "async"