@shopware/cms-base-layer 2.1.0 → 3.0.1

package/app/components/SwProductCard.vue

@@ -12,6 +12,7 @@ import {
 import { getCmsTranslate } from "@shopware/helpers";
 import { defu } from "defu";
 import { computed, ref, toRef } from "vue";
+
 import {
   useAddToCart,
   useCartErrorParamsResolver,
@@ -50,6 +51,8 @@ type Translations = {
     badges: {
       topseller: string;
     };
+    addToWishlist: string;
+    removeFromWishlist: string;
   };
   errors: {
     [key: string]: string;
@@ -68,6 +71,8 @@ let translations: Translations = {
     badges: {
       topseller: "Tip",
     },
+    addToWishlist: "Add to wishlist",
+    removeFromWishlist: "Remove from wishlist",
   },
   errors: {
     "product-stock-reached":

package/app/components/SwProductCardDetails.vue

@@ -2,6 +2,7 @@
 import type { BoxLayout } from "@shopware/composables";
 import type { UrlRouteOutput } from "@shopware/helpers";
 import { computed } from "vue";
+
 import type { Schemas } from "#shopware";
 
 type Translations = {
@@ -28,18 +29,24 @@ const props = defineProps<{
 const isMinimalLayout = computed(() => props.layoutType === "minimal");
 </script>
 <template>
-  <div class="self-stretch p-2 flex flex-col justify-between items-start gap-4 flex-1">
+  <div
+    class="self-stretch p-2 flex flex-col justify-between items-start gap-4 flex-1"
+  >
     <div class="self-stretch flex flex-col justify-start items-start gap-4">
       <div class="self-stretch flex flex-col justify-start items-start gap-2">
         <div class="self-stretch flex flex-col justify-start items-start gap-1">
-          <div v-if="productManufacturer"
-            class="self-stretch text-surface-on-surface text-sm font-bold leading-tight">
+          <div
+            v-if="productManufacturer"
+            class="self-stretch text-surface-on-surface text-sm font-bold leading-tight"
+          >
             {{ productManufacturer }}
           </div>
 
-          <RouterLink :to="productLink"
+          <RouterLink
+            :to="productLink"
             class="self-stretch text-surface-on-surface text-2xl font-normal font-serif leading-9 overflow-hidden line-clamp-2 break-words min-h-[4.5rem]"
-            data-testid="product-box-product-name-link">
+            data-testid="product-box-product-name-link"
+          >
             {{ productName }}
           </RouterLink>
         </div>
@@ -54,13 +61,24 @@ const isMinimalLayout = computed(() => props.layoutType === "minimal");
       />
 
       <!-- Price for standard layout -->
-      <SwListingProductPrice v-else :product="product" data-testid="product-box-product-price" />
+      <SwListingProductPrice
+        v-else
+        :product="product"
+        data-testid="product-box-product-price"
+      />
     </div>
 
     <!-- CTA buttons only for non-minimal layout -->
     <template v-if="!isMinimalLayout">
-      <SwBaseButton variant="primary" v-if="!fromPrice" size="medium" :disabled="!product?.available" block
-        data-testid="add-to-cart-button" @click="addToCartProxy">
+      <SwBaseButton
+        variant="primary"
+        v-if="!fromPrice"
+        size="medium"
+        :disabled="!product?.available"
+        block
+        data-testid="add-to-cart-button"
+        @click="addToCartProxy"
+      >
         {{ translations.product.addToCart }}
       </SwBaseButton>
 
@@ -71,4 +89,4 @@ const isMinimalLayout = computed(() => props.layoutType === "minimal");
       </RouterLink>
     </template>
   </div>
-</template>
+</template>

package/app/components/SwProductCardImage.vue

@@ -5,9 +5,9 @@ import {
   isProductOnSale,
   isProductTopSeller,
 } from "@shopware/helpers";
-import { useElementSize } from "@vueuse/core";
-import { computed, useTemplateRef } from "vue";
-import { useImagePlaceholder } from "#imports";
+import { computed, inject } from "vue";
+
+import { useUser } from "#imports";
 import type { Schemas } from "#shopware";
 
 type Translations = {
@@ -15,6 +15,8 @@ type Translations = {
     badges: {
       topseller: string;
     };
+    addToWishlist: string;
+    removeFromWishlist: string;
   };
 };
 
@@ -27,32 +29,13 @@ const props = defineProps<{
   productLink: UrlRouteOutput;
 }>();
 
-const containerElement = useTemplateRef<HTMLDivElement>("containerElement");
-const { width, height } = useElementSize(containerElement);
-
-const DEFAULT_THUMBNAIL_SIZE = 10;
-function roundUp(num: number) {
-  return num ? Math.ceil(num / 100) * 100 : DEFAULT_THUMBNAIL_SIZE;
-}
-
 const coverSrcPath = computed(() => {
   return (
-    getSmallestThumbnailUrl(props.product?.cover?.media) ||
-    props.product?.cover?.media?.url
+    props.product?.cover?.media?.url ||
+    getSmallestThumbnailUrl(props.product?.cover?.media)
   );
 });
 
-const imageModifiers = computed(() => {
-  // Use the larger dimension and apply 2x for high-DPI displays
-  // For square containers, width and height should be the same
-  const containerSize = Math.max(width.value || 0, height.value || 0);
-  const size = roundUp(containerSize * 2);
-  return {
-    width: size,
-    height: size,
-  };
-});
-
 const coverAlt = computed(() => {
   return props.product?.cover?.media?.alt || props.product?.translated?.name;
 });
@@ -60,31 +43,65 @@ const coverAlt = computed(() => {
 const isOnSale = computed(() => isProductOnSale(props.product));
 const isTopseller = computed(() => isProductTopSeller(props.product));
 
-const placeholderSvg = useImagePlaceholder();
+const { isLoggedIn } = useUser();
+const loginModal = inject<{
+  open: (options?: { onSuccess?: () => void | Promise<void> }) => void;
+} | null>("loginModal", null);
+
+function handleWishlistClick() {
+  if (isLoggedIn.value || !loginModal) {
+    props.toggleWishlist();
+    return;
+  }
+  loginModal.open({ onSuccess: props.toggleWishlist });
+}
 </script>
 
 <template>
-  <div ref="containerElement" class="self-stretch min-h-[350px] relative flex flex-col justify-start items-start overflow-hidden aspect-square">
-    <RouterLink :to="productLink" class="self-stretch h-full relative overflow-hidden">
-      <NuxtImg preset="productCard"
+  <div
+    class="self-stretch min-h-[350px] relative flex flex-col justify-start items-start overflow-hidden aspect-square"
+  >
+    <RouterLink
+      :to="productLink"
+      class="self-stretch h-full relative overflow-hidden"
+    >
+      <NuxtImg
+        preset="productCard"
         class="w-full h-full absolute top-0 left-0 object-cover"
-        :placeholder="placeholderSvg"
-        :src="coverSrcPath" :alt="coverAlt" :modifiers="imageModifiers" data-testid="product-box-img" />
+        :src="coverSrcPath"
+        :alt="coverAlt"
+        width="400"
+        height="400"
+        densities="1x"
+        loading="lazy"
+        data-testid="product-box-img"
+      />
     </RouterLink>
 
-    <div v-if="isTopseller || isOnSale"
-      class="px-1.5 py-1 left-2 bottom-2 absolute bg-other-sale rounded inline-flex justify-center items-center">
+    <div
+      v-if="isTopseller || isOnSale"
+      class="px-1.5 py-1 left-2 bottom-2 absolute bg-other-sale rounded inline-flex justify-center items-center"
+    >
       <div class="text-states-on-error text-xs font-bold leading-none">
         {{ translations.product.badges.topseller }}
       </div>
     </div>
 
     <client-only>
-      <SwIconButton type="secondary" aria-label="Toggle wishlist" :disabled="isLoading"
+      <SwIconButton
+        type="secondary"
+        :aria-label="
+          isInWishlist
+            ? translations.product.removeFromWishlist
+            : translations.product.addToWishlist
+        "
+        :disabled="isLoading"
         class="w-10 h-10 right-4 top-4 absolute bg-brand-secondary rounded-full flex items-center justify-center"
-        data-testid="product-box-toggle-wishlist-button" @click="toggleWishlist">
+        data-testid="product-box-toggle-wishlist-button"
+        @click="handleWishlistClick"
+      >
         <SwWishlistIcon :filled="isInWishlist" />
       </SwIconButton>
     </client-only>
   </div>
-</template>
+</template>

package/app/components/SwProductCardSkeleton.vue

@@ -1,33 +1,56 @@
 <template>
-  <div class="inline-flex flex-col items-start justify-start self-stretch overflow-hidden p-px w-full"
-    aria-hidden="true">
+  <div
+    class="inline-flex flex-col items-start justify-start self-stretch overflow-hidden p-px w-full"
+    aria-hidden="true"
+  >
     <!-- image skeleton -->
-    <div class="relative flex h-80 flex-col items-start justify-start self-stretch overflow-hidden">
-      <div class="relative h-80 w-full bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+    <div
+      class="relative flex h-80 flex-col items-start justify-start self-stretch overflow-hidden"
+    >
+      <div
+        class="relative h-80 w-full bg-gray-200 dark:bg-gray-700 animate-pulse"
+      ></div>
 
       <div
-        class="absolute top-[281px] left-2 inline-flex items-center justify-center rounded bg-gray-300 dark:bg-gray-600 px-3 py-1 animate-pulse">
-        <span class="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded block"></span>
+        class="absolute top-[281px] left-2 inline-flex items-center justify-center rounded bg-gray-300 dark:bg-gray-600 px-3 py-1 animate-pulse"
+      >
+        <span
+          class="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded block"
+        ></span>
       </div>
 
-      <div class="absolute top-4 right-4 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-600 animate-pulse"></div>
+      <div
+        class="absolute top-4 right-4 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-600 animate-pulse"
+      ></div>
     </div>
 
     <!-- details skeleton -->
     <div class="flex flex-col items-start justify-start gap-4 self-stretch p-2">
-      <div class="h-4 w-32 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+      <div
+        class="h-4 w-32 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+      ></div>
 
       <div class="w-full">
-        <div class="h-7 w-3/4 rounded bg-gray-200 dark:bg-gray-700 mb-2 animate-pulse"></div>
-        <div class="h-7 w-1/2 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+        <div
+          class="h-7 w-3/4 rounded bg-gray-200 dark:bg-gray-700 mb-2 animate-pulse"
+        ></div>
+        <div
+          class="h-7 w-1/2 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+        ></div>
       </div>
 
-      <div class="h-6 w-24 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+      <div
+        class="h-6 w-24 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+      ></div>
 
       <div class="flex w-full gap-3">
-        <div class="flex-1 h-10 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
-        <div class="w-24 h-10 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+        <div
+          class="flex-1 h-10 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+        ></div>
+        <div
+          class="w-24 h-10 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+        ></div>
       </div>
     </div>
   </div>
-</template>
+</template>

package/app/components/SwProductGallery.vue

@@ -4,6 +4,7 @@ import type {
   SliderElementConfig,
 } from "@shopware/composables";
 import { ref, watch } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const { product, config = {} } = defineProps<{

package/app/components/SwProductListingFilter.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="ListingFilter extends { code: string }">
 import { computed } from "vue";
 import type { Component } from "vue";
+
 import SwFilterPriceVue from "./listing-filters/SwFilterPrice.vue";
 import SwFilterPropertiesVue from "./listing-filters/SwFilterProperties.vue";
 import SwFilterRatingVue from "./listing-filters/SwFilterRating.vue";
@@ -58,7 +59,10 @@ const filterComponent = computed<Component | undefined>(() => {
 const handleSelectValue = ({
   code,
   value,
-}: { code: string; value: string | number | boolean }) => {
+}: {
+  code: string;
+  value: string | number | boolean;
+}) => {
   emit("filter-change", { code, value });
 };
 </script>

package/app/components/SwProductListingFilters.vue

@@ -7,8 +7,9 @@ import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
 import { computed, reactive } from "vue";
 import type { ComputedRef, UnwrapNestedRefs } from "vue";
-import { type LocationQueryRaw, useRoute, useRouter } from "vue-router";
-import { useCategoryListing } from "#imports";
+import type { LocationQueryRaw } from "vue-router";
+
+import { useCategoryListing, useRoute, useRouter } from "#imports";
 import type { Schemas, operations } from "#shopware";
 
 const props = defineProps<{
@@ -268,8 +269,11 @@ const handleRemoveFilterChip = async (chip: {
     <!-- Filters Header -->
     <div class="self-stretch flex flex-col justify-start items-start gap-4">
       <div
-        class="flex flex-row items-center justify-between w-full mb-4 py-3 border-b border-outline-outline-variant">
-        <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal">
+        class="flex flex-row items-center justify-between w-full mb-4 py-3 border-b border-outline-outline-variant"
+      >
+        <div
+          class="flex-1 text-surface-on-surface text-base font-bold leading-normal"
+        >
           {{ translations.listing.filters }}
         </div>
         <SwSortDropdown
@@ -283,7 +287,9 @@ const handleRemoveFilterChip = async (chip: {
 
     <!-- Filters List -->
     <div class="self-stretch flex flex-col justify-start items-start gap-4">
-      <SwProductListingFilter v-for="filter in getInitialFilters" :key="filter.id"
+      <SwProductListingFilter
+        v-for="filter in getInitialFilters"
+        :key="filter.id"
         :filter="filter"
         :selected-manufacturer="sidebarSelectedFilters.manufacturer"
         :selected-properties="sidebarSelectedFilters.properties"
@@ -292,11 +298,20 @@ const handleRemoveFilterChip = async (chip: {
         :selected-rating="sidebarSelectedFilters.rating"
         :selected-shipping-free="sidebarSelectedFilters['shipping-free']"
         @filter-change="handleFilterChange"
-        class="w-full" />
+        class="w-full"
+      />
       <div v-if="showResetFiltersButton" class="w-full">
-        <SwBaseButton variant="primary" size="medium" block @click="invokeCleanFilters" type="button">
+        <SwBaseButton
+          variant="primary"
+          size="medium"
+          block
+          @click="invokeCleanFilters"
+          type="button"
+        >
           {{ translations.listing.resetFilters }}
-          <span class="w-6 h-6 i-carbon-close-filled inline-block align-middle ml-2"></span>
+          <span
+            class="w-6 h-6 i-carbon-close-filled inline-block align-middle ml-2"
+          ></span>
         </SwBaseButton>
       </div>
     </div>

package/app/components/SwProductListingFiltersHorizontal.vue

@@ -7,8 +7,9 @@ import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
 import { computed, reactive } from "vue";
 import type { ComputedRef, UnwrapNestedRefs } from "vue";
-import { type LocationQueryRaw, useRoute, useRouter } from "vue-router";
-import { useCategoryListing } from "#imports";
+import type { LocationQueryRaw } from "vue-router";
+
+import { useCategoryListing, useRoute, useRouter } from "#imports";
 import type { Schemas, operations } from "#shopware";
 
 const props = defineProps<{
@@ -299,7 +300,9 @@ const hasActiveFilter = (filter: { code: string }) => {
         type="button"
       >
         {{ translations.listing.resetFilters }}
-        <span class="w-5 h-5 i-carbon-close inline-block align-middle ml-1"></span>
+        <span
+          class="w-5 h-5 i-carbon-close inline-block align-middle ml-1"
+        ></span>
       </SwBaseButton>
     </div>
   </div>

package/app/components/SwProductPrice.vue

@@ -2,6 +2,7 @@
 import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
 import { toRefs } from "vue";
+
 import { usePrice, useProductPrice } from "#imports";
 import type { Schemas } from "#shopware";
 

package/app/components/SwProductReviews.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { defu } from "defu";
 import { computed, onMounted, ref, toRefs } from "vue";
+
 import {
   useCmsTranslations,
   useProductReviews,
@@ -77,7 +78,10 @@ const formatDate = (date: string) => {
       v-for="(review, index) in reviewsList"
       :key="review.id"
       class="pb-6"
-      :class="{ 'border-b border-surface-surface-container-highest': index < reviewsList.length - 1 }"
+      :class="{
+        'border-b border-surface-surface-container-highest':
+          index < reviewsList.length - 1,
+      }"
     >
       <div
         v-if="review.createdAt"
@@ -87,19 +91,23 @@ const formatDate = (date: string) => {
         <span>{{ formatDate(review.createdAt) }}</span>
       </div>
       <div
-          v-if="!review.status"
-          class="mt-2 text-3 p-2 bg-states-info-container text-states-on-info-container flex gap-2 items-center"
-        >
+        v-if="!review.status"
+        class="mt-2 text-3 p-2 bg-states-info-container text-states-on-info-container flex gap-2 items-center"
+      >
         <div class="w-6 h-6 i-carbon-warning" />
         {{ translations.product.reviewNotAccepted }}
       </div>
-      <div class="cms-block-product-description-reviews__reviews-rating inline-flex items-center mt-2">
+      <div
+        class="cms-block-product-description-reviews__reviews-rating inline-flex items-center mt-2"
+      >
         <SwProductRating
           :rating="review.points ?? 0"
           :star-size="20"
           :show-count="false"
         />
-        <div class="cms-block-product-description-reviews__reviews-title font-semibold ml-2">
+        <div
+          class="cms-block-product-description-reviews__reviews-title font-semibold ml-2"
+        >
           <p>{{ review.title }}</p>
         </div>
       </div>

package/app/components/SwProductReviewsForm.vue

@@ -7,6 +7,7 @@ import type { ValidationRuleWithoutParams } from "@vuelidate/core";
 import { minLength, required } from "@vuelidate/validators";
 import { defu } from "defu";
 import { computed, reactive, ref } from "vue";
+
 import { useShopwareContext } from "#imports";
 
 const props = defineProps<{
@@ -154,7 +155,10 @@ const invokeRating = (value: number) => {
 </script>
 
 <template>
-  <form class="flex flex-col gap-4 md:gap-5 relative" @submit.prevent="invokeSend">
+  <form
+    class="flex flex-col gap-4 md:gap-5 relative"
+    @submit.prevent="invokeSend"
+  >
     <div
       v-if="isLoading"
       class="absolute inset-0 flex items-center justify-center z-10 bg-surface-surface/80 rounded-md"
@@ -171,7 +175,11 @@ const invokeRating = (value: number) => {
         <span class="text-sm text-surface-on-surface-variant">{{
           translations.product.reviewsForm.rating
         }}</span>
-        <div class="flex flex-row gap-2" role="group" :aria-label="translations.product.reviewsForm.rating">
+        <div
+          class="flex flex-row gap-2"
+          role="group"
+          :aria-label="translations.product.reviewsForm.rating"
+        >
           <SwStarIcon
             v-for="index in state.rating || 0"
             :key="`filled-${index}`"
@@ -217,7 +225,11 @@ const invokeRating = (value: number) => {
         <SwExclamationIcon :size="20" />
       </div>
       <div class="flex-1">
-        <p v-for="(error, index) in errorMessages" :key="index" class="text-sm text-states-error">
+        <p
+          v-for="(error, index) in errorMessages"
+          :key="index"
+          class="text-sm text-states-error"
+        >
           {{ error.detail }}
         </p>
       </div>

package/app/components/SwProductUnits.vue

@@ -2,6 +2,7 @@
 import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
 import { computed } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const { product, showContent = true } = defineProps<{

package/app/components/SwQuantitySelect.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { defu } from "defu";
 import { computed, useId } from "vue";
+
 import { useCmsTranslations } from "#imports";
 
 type Translations = {
@@ -63,7 +64,9 @@ const sizeClasses = {
 };
 </script>
 <template>
-  <div class="rounded outline outline-1 outline-offset-[-1px] outline-outline-outline inline-flex">
+  <div
+    class="rounded outline outline-1 outline-offset-[-1px] outline-outline-outline inline-flex"
+  >
     <button
       type="button"
       :class="sizeClasses[size]"
@@ -73,9 +76,13 @@ const sizeClasses = {
     >
       -
     </button>
-    <div class="bg-white border-l border-r border-outline-outline inline-flex flex-col justify-center items-center">
+    <div
+      class="bg-white border-l border-r border-outline-outline inline-flex flex-col justify-center items-center"
+    >
       <!-- visually hidden label for screen readers -->
-      <label :for="inputId" class="sr-only">{{ translations.form.quantitySelect.label }}</label>
+      <label :for="inputId" class="sr-only">{{
+        translations.form.quantitySelect.label
+      }}</label>
 
       <input
         :id="inputId"

package/app/components/SwSharedPrice.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
+
 import { usePrice } from "#imports";
 
 const { getFormattedPrice } = usePrice();

package/app/components/SwSlider.vue

@@ -11,6 +11,7 @@ import {
   watch,
 } from "vue";
 import type { CSSProperties, VNode, VNodeArrayChildren } from "vue";
+
 import { useCmsElementConfig, useHead, useId } from "#imports";
 import type { Schemas } from "#shopware";
 

package/app/components/SwStockInfo.vue

@@ -31,14 +31,20 @@ translations = defu(useCmsTranslations(), translations) as Translations;
 </script>
 <template>
   <div class="inline-flex justify-start items-center gap-2">
-    <div class="w-2 h-2 bg-states-success rounded-full" v-if="availableStock > 0"></div>
+    <div
+      class="w-2 h-2 bg-states-success rounded-full"
+      v-if="availableStock > 0"
+    ></div>
     <div class="w-2 h-2 bg-states-error rounded-full" v-else></div>
-    <span v-if="availableStock >= minPurchase && deliveryTime">{{ translations.product.deliveryTime }} {{
-      deliveryTime?.name }}
+    <span v-if="availableStock >= minPurchase && deliveryTime"
+      >{{ translations.product.deliveryTime }} {{ deliveryTime?.name }}
     </span>
-    <span v-else-if="availableStock < minPurchase && deliveryTime && restockTime">
+    <span
+      v-else-if="availableStock < minPurchase && deliveryTime && restockTime"
+    >
       {{ translations.product.deliveryTime }} {{ restockTime }}
-      {{ translations.product.days }} {{ deliveryTime?.name }}</span>
+      {{ translations.product.days }} {{ deliveryTime?.name }}</span
+    >
     <span v-else>{{ translations.product.noAvailable }}</span>
   </div>
-</template>
+</template>

package/app/components/SwVariantConfigurator.vue

@@ -4,8 +4,8 @@ import { buildUrlPrefix, getProductRoute } from "@shopware/helpers";
 import { defu } from "defu";
 import { computed, ref, unref } from "vue";
 import type { ComputedRef } from "vue";
-import { useRouter } from "vue-router";
-import { useProductConfigurator, useUrlResolver } from "#imports";
+
+import { useProductConfigurator, useRouter, useUrlResolver } from "#imports";
 import type { Schemas } from "#shopware";
 
 const { getUrlPrefix } = useUrlResolver();
@@ -85,7 +85,9 @@ const onHandleChange = async () => {
       :key="optionGroup.id"
       class="mt-6"
     >
-      <div class="text-sm text-gray-900 font-medium">{{ optionGroup.name }}</div>
+      <div class="text-sm text-gray-900 font-medium">
+        {{ optionGroup.name }}
+      </div>
       <fieldset class="mt-4 flex-1">
         <legend class="sr-only">
           {{ translations.product.chooseA }} {{ optionGroup.name }}