@visitscotland/component-library 4.27.0 → 4.28.1

package/dist/components/vs-component-library.mjs

@@ -5111,6 +5111,21 @@ const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$2n, [["render", _sfc_render$
   release: "0.1.0",
   components: {
     BCol
+  },
+  /**
+   * To reduce page weight we want to load images at an appropriate size based on their
+   * appearance on the screen, as well as the size of that screen. By providing this
+   * information about the grid layout of the page, any VsImg component within this Col in the
+   * page can estimate its maximum size. See the `imgSizesMixin` for more details.
+   */
+  provide() {
+    return {
+      cols: this.$attrs.cols,
+      sm: this.$attrs.sm,
+      md: this.$attrs.md,
+      lg: this.$attrs.lg,
+      xl: this.$attrs.xl
+    };
   }
 };
 function _sfc_render$29(e, n, t, a, r, o) {
@@ -5973,6 +5988,66 @@ const ButtonToggleGroup = /* @__PURE__ */ _export_sfc(_sfc_main$29, [["render",
       return this.src.includes("?") && (n = "&"), `${this.src}${n}size=${e}`;
     }
   }
+}, imgSizesMixin = {
+  /**
+   * Inject the grid information from the closest ancestor VsCol component. If multiple nested
+   * VsCols are present this will load from the closest one. With multiple nested VsCols an
+   * image may end up being loaded larger than it needs to be, as this system naively assumes
+   * that something 6 cols wide on a 12 column grid will always be 50% of the viewport width,
+   * but it will never be smaller than it needs to be.
+   *
+   * In cases where images are sized without the use of VsCol they will continue to default to
+   * assuming the image might need to be 100% of the viewport width.
+   */
+  inject: {
+    cols: {
+      default: 0
+    },
+    sm: {
+      default: 0
+    },
+    md: {
+      default: 0
+    },
+    lg: {
+      default: 0
+    },
+    xl: {
+      default: 0
+    }
+  },
+  computed: {
+    /**
+     * Generates a string of media queries for the image, which can be used in the `sizes`
+     * attribute. This string is parsed left to right searching for the first match, so we
+     * start with the largest viewport size and work down to the smallest, requesting an
+     * image at an appropriate percent of the viewport width.
+     */
+    computedSizes() {
+      const n = [
+        {
+          viewportSize: "xl",
+          minWidth: 1200
+        },
+        {
+          viewportSize: "lg",
+          minWidth: 992
+        },
+        {
+          viewportSize: "md",
+          minWidth: 769
+        },
+        {
+          viewportSize: "sm",
+          minWidth: 576
+        }
+      ].filter(({ viewportSize: t }) => this[t]).map(({ viewportSize: t, minWidth: a }) => {
+        const r = this[t] / 12 * 100;
+        return `(min-width: ${a}px) ${r}vw`;
+      });
+      return this.cols ? n.push(`${this.cols / 12 * 100}vw`) : n.push("100vw"), n.join(", ");
+    }
+  }
 }, _sfc_main$28 = {
   name: "VsImg",
   status: "prototype",
@@ -5982,7 +6057,8 @@ const ButtonToggleGroup = /* @__PURE__ */ _export_sfc(_sfc_main$29, [["render",
     VsIcon
   },
   mixins: [
-    srcSetMixin
+    srcSetMixin,
+    imgSizesMixin
   ],
   props: {
     /**
@@ -6065,7 +6141,7 @@ function _sfc_render$1Y(e, n, t, a, r, o) {
     class: ["vs-img low-res-img", t.useGenericLqip ? "generic-lqip" : ""],
     srcset: o.computedSrcSet,
     "low-res-image": o.isSvg ? "" : e.specificImgSize("xxs"),
-    sizes: "(min-width: 768px) 75vw, 100vw"
+    sizes: e.computedSizes
   }), {
     default: withCtx(() => [
       createVNode(l, {
@@ -6075,7 +6151,7 @@ function _sfc_render$1Y(e, n, t, a, r, o) {
       renderSlot(e.$slots, "default")
     ]),
     _: 3
-  }, 16, ["src", "alt", "fluid", "fluid-grow", "loading", "style", "class", "srcset", "low-res-image"]);
+  }, 16, ["src", "alt", "fluid", "fluid-grow", "loading", "style", "class", "srcset", "low-res-image", "sizes"]);
 }
 const VsImg = /* @__PURE__ */ _export_sfc(_sfc_main$28, [["render", _sfc_render$1Y]]);
 let currentURL = "";
@@ -22103,7 +22179,7 @@ var isCoreModule, hasRequiredIsCoreModule;
 function requireIsCoreModule() {
   if (hasRequiredIsCoreModule) return isCoreModule;
   hasRequiredIsCoreModule = 1;
-  var e = { node: "20.19.1", acorn: "8.14.0", ada: "2.9.2", ares: "1.34.5", brotli: "1.1.0", cjs_module_lexer: "1.4.1", cldr: "46.0", icu: "76.1", llhttp: "8.1.2", modules: "115", napi: "9", nghttp2: "1.61.0", nghttp3: "0.7.0", ngtcp2: "1.1.0", openssl: "3.0.15+quic", simdutf: "6.0.3", tz: "2025a", undici: "6.21.2", unicode: "16.0", uv: "1.46.0", uvwasi: "0.0.21", v8: "11.3.244.8-node.26", zlib: "1.3.0.1-motley-82a5fec" }, n = requireHasown();
+  var e = { node: "20.19.2", acorn: "8.14.0", ada: "2.9.2", ares: "1.34.5", brotli: "1.1.0", cjs_module_lexer: "1.4.1", cldr: "46.0", icu: "76.1", llhttp: "9.2.1", modules: "115", napi: "9", nghttp2: "1.61.0", nghttp3: "0.7.0", ngtcp2: "1.1.0", openssl: "3.0.15+quic", simdutf: "6.0.3", tz: "2025a", undici: "6.21.2", unicode: "16.0", uv: "1.46.0", uvwasi: "0.0.21", v8: "11.3.244.8-node.26", zlib: "1.3.0.1-motley-82a5fec" }, n = requireHasown();
   function t(l, c) {
     for (var d = l.split("."), p = c.split(" "), f = p.length > 1 ? p[0] : "=", m = (p.length > 1 ? p[1] : p[0]).split("."), _ = 0; _ < 3; ++_) {
       var v = parseInt(d[_] || 0, 10), k = parseInt(m[_] || 0, 10);