@shopware/cms-base-layer 2.0.0 → 3.0.0

package/README.md

@@ -5,14 +5,14 @@
 [![](https://img.shields.io/github/issues/shopware/frontends/cms-base?label=cms-base%20issues&logo=github)](https://github.com/shopware/frontends/issues?q=is%3Aopen+is%3Aissue+label%3Acms-base)
 [![](https://img.shields.io/github/license/shopware/frontends?color=blue)](#)
 
-Nuxt [layer](https://nuxt.com/docs/getting-started/layers) that provides an implementation of all CMS components in Shopware [based on utility-classes](https://frontends.shopware.com/framework/styling.html) using atomic css syntax (UnoCss / Tailwind).
+Nuxt [layer](https://nuxt.com/docs/getting-started/layers) that provides an implementation of all CMS components in Shopware [based on utility-classes](https://frontends.shopware.com/framework/styling.html).
 
-It is useful for projects that want to use the CMS components but design their own layout.
+It is useful for projects that want to use the CMS components while keeping CMS functionality separate from the styling system and design tokens.
 
 ## Features
 
 - Vue components for [Shopping Experiences](https://www.shopware.com/en/products/shopping-experiences/) CMS
-- CMS sections, blocks and elements styled using [Tailwind CSS](https://tailwindcss.com/) classes
+- CMS sections, blocks and elements implemented with utility-class-based markup
 - 🚀 Empowered by [@shopware/composables](https://www.npmjs.com/package/@shopware/composables)
 
 ## Setup
@@ -32,25 +32,30 @@ npm install -D @shopware/cms-base-layer
 yarn add -D @shopware/cms-base-layer
 
 # pnpm
-pnpm install -D @shopware/cms-base-layer
+pnpm add -D @shopware/cms-base-layer
 
 # bun
 bun install -D @shopware/cms-base-layer
 
 # deno
-deno install --dev @shopware/cms-base-layer
+deno install --dev npm:@shopware/cms-base-layer
 ```
 
 <!-- /automd -->
 
+If you also want the shared Shopware Frontends UnoCSS setup, install `@shopware/unocss-design-tokens-layer` in your app and extend it alongside `@shopware/cms-base-layer`.
+
 Then, register the Nuxt layer in `nuxt.config.ts` file:
 
 <!-- automd:file src="templates/vue-blank/nuxt.config.ts" code -->
 
 ```ts [nuxt.config.ts]
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
+const isStackBlitz = process.env.SHOPWARE_STACKBLITZ === "true";
+
 export default defineNuxtConfig({
   extends: ["@shopware/composables/nuxt-layer", "@shopware/cms-base-layer"],
+  ...(isStackBlitz ? { devtools: { enabled: false } } : {}),
   shopware: {
     endpoint: "https://demo-frontends.shopware.store/store-api/",
     accessToken: "SWSCBHFSNTVMAWNZDNFKSHLAYW",
@@ -83,15 +88,20 @@ Since all CMS components are registered in your Nuxt application, you can now st
 </template>
 ```
 
-> You can use default styling by installing/importing Tailwind CSS stylesheet in your project.
+> `@shopware/cms-base-layer` no longer owns the default UnoCSS theme. If you want the shared Shopware Frontends design tokens and UnoCSS defaults, extend `@shopware/unocss-design-tokens-layer` as shown above.
+
+See a [short guide](https://frontends.shopware.com/getting-started/cms/content-pages.html#use-the-cms-base-package) on how to use `cms-base-layer` in your Nuxt project.
 
-See a [short guide](https://frontends.shopware.com/getting-started/cms/content-pages.html#use-the-cms-base-package) how to use `cms-base` package in your project based on Nuxt v3.
+## Styling and Design Tokens
 
-## Default styling
+The components use utility classes, but the shared UnoCSS configuration, design tokens, and runtime handling for dynamic CMS classes are now provided by `@shopware/unocss-design-tokens-layer`.
 
-The components are styled using [Tailwind CSS](https://tailwindcss.com/) utility classes, so you can use them in your project without any additional configuration if your project uses Tailwind CSS. 
+This means you have two options:
 
-This layer provides a default Tailwind CSS configuration (see [uno.config.ts](./uno.config.ts) for details), which is used to style the components. If you want to customize the styling, you can do so by creating your own Tailwind CSS configuration file and extending the default one:
+- extend `@shopware/unocss-design-tokens-layer` to use the shared Shopware Frontends token palette and UnoCSS defaults
+- keep only `@shopware/cms-base-layer` and provide your own UnoCSS or Tailwind setup
+
+When you use the design-tokens layer, you can customize the generated config in your project's `uno.config.ts`:
 
 ```ts [nuxt.config.ts]
 // nuxt.config.ts
@@ -104,24 +114,14 @@ export default defineNuxtConfig({
 ```
 
 ```ts [uno.config.ts]
-// uno.config.ts
-import config from './.nuxt/uno.config.mjs'
-
-export default config
-```
-
-Thanks to this, you can **use the default configuration** provided by this layer, or **extend/overwrite** it with your own customizations in your end-project:
-
-```ts [uno.config.ts]
-// uno.config.ts
 import { mergeConfigs } from '@unocss/core'
-import config from './.nuxt/uno.config.mjs'
+import baseConfig from './.nuxt/uno.config.mjs'
 
-export default mergeConfigs([config, {
+export default mergeConfigs([baseConfig, {
   theme: {
     colors: {
-      primary: '#ff3e00',
-      secondary: '#1c1c1c',
+      'brand-primary': '#ff3e00',
+      'brand-secondary': '#1c1c1c',
     },
   },
 }])
@@ -304,6 +304,131 @@ const customPlaceholder = useImagePlaceholder("#FF0000");
 </template>
 ```
 
+## 🖼️ Background Image Optimization
+
+CMS sections and blocks can have background images set via the Shopware admin. This layer automatically optimizes those background image URLs by appending `format` and `quality` query parameters — bringing the same optimization applied to `<NuxtImg>` components to CSS background images.
+
+Both `CmsPage` (for section backgrounds) and `CmsGenericBlock` (for block backgrounds) read the configuration from `app.config.ts` and pass it to the `getBackgroundImageUrl` helper from `@shopware/helpers`.
+
+### Configuration
+
+Default values are set in `app.config.ts` and can be overridden in your project:
+
+```ts
+export default defineAppConfig({
+  backgroundImage: {
+    format: "webp", // Default: "webp" — output format ("webp" | "avif" | "jpg" | "png")
+    quality: 90, // Default: 90 — image quality (0-100)
+  },
+});
+```
+
+Setting `format` or `quality` to `undefined` (or omitting the key) will skip that parameter in the generated URL.
+
+### How It Works
+
+When a CMS section or block has a `backgroundMedia` set, the components call `getBackgroundImageUrl()` which:
+
+1. Extracts the raw image URL from the CSS `url()` value
+2. Appends `width` or `height` based on the image's original dimensions (capped at 1920px)
+3. Adds `fit=crop,smart` for intelligent cropping
+4. Appends `format` and `quality` from `app.config.ts` if provided
+
+**Example generated URL:**
+```
+url("https://cdn.shopware.store/.../image.jpg?width=1000&fit=crop,smart&format=webp&quality=85")
+```
+
+> **Note:** Like other dynamic image transformations, background image optimization requires remote thumbnail generation support. See the [Image Optimization](#%EF%B8%8F-image-optimization) section above for Shopware Cloud vs. self-hosted requirements.
+
+## LCP Image Preload
+
+This layer includes a `useLcpImagePreload` composable that automatically preloads the first image found in CMS page content. This targets the [Largest Contentful Paint (LCP)](https://web.dev/lcp/) element, which is often a hero background image or the first visible image element.
+
+### How it works
+
+The composable scans CMS sections in document order, checking:
+1. Section background images (`section.backgroundMedia`)
+2. Block background images (`block.backgroundMedia`)
+3. Image element media (`slot.data.media`)
+
+The first image found is injected as a `<link rel="preload" as="image" fetchpriority="high">` in the `<head>` during SSR. This allows the browser to start fetching the LCP image immediately, before parsing CSS or executing JavaScript. The `fetchpriority="high"` attribute ensures the preload is prioritized — this is especially useful for background images which don't natively support `fetchpriority`.
+
+### Usage
+
+The composable is already called in `CmsPage.vue`. If you override `CmsPage`, you can use it in your custom component:
+
+```vue
+<script setup>
+import { useLcpImagePreload } from "@shopware/cms-base-layer/composables/useLcpImagePreload";
+
+const props = defineProps<{ content: Schemas["CmsPage"] }>();
+
+useLcpImagePreload(props.content?.sections || []);
+</script>
+```
+
+The preload URL includes the optimized `format` and `quality` parameters from `app.config.ts` for both background images and element images.
+
+## Responsive CMS Images
+
+Images are optimized to prevent the browser from downloading images larger than their displayed dimensions — a common Lighthouse performance issue.
+
+### Product Card Images (`SwProductCardImage`)
+
+The `productCard` preset only defines URL modifiers (format/quality/fit). `width`/`height`/`densities`/`loading` stay on the component — NuxtImg presets don't propagate these reliably:
+
+```ts
+// nuxt.config.ts
+productCard: {
+  modifiers: { format: "webp", quality: 90, fit: "cover" },
+}
+```
+
+```vue
+<NuxtImg preset="productCard"
+  :src="coverSrcPath"
+  width="400" height="400"
+  densities="1x"
+  loading="lazy" />
+```
+
+- **Fixed `width`/`height`** (400px) — avoid hydration mismatches caused by dynamic DOM measurement
+- **`densities="1x"`** — prevents duplicate retina requests
+- **`loading="lazy"`** — defers off-viewport images
+
+> **⚠️ Avoid** adding `decoding` or `sizes` props on the component — they trigger Vue hydration attribute mismatches with NuxtImg, which cause duplicate image requests.
+
+### CMS Images (`CmsElementImage`)
+
+CMS image elements use `useElementSize()` to measure the rendered container and pass the size to `<NuxtImg>` via `width`/`height` props:
+
+- During SSR, no image is fetched (size is `undefined`)
+- After hydration, the container is measured and a single correctly-sized image is requested
+- The size is multiplied by 2 (for retina) and rounded up to the nearest 100px
+
+### Slider Components
+
+**Slider components** (`CmsElementProductSlider`, `CmsElementCrossSelling`) `inject` the slot count via `cms-block-slot-count` to scale their SSR breakpoints — ensuring media queries account for the container being a fraction of the viewport.
+
+### LCP Image Preloading
+
+**`useLcpImagePreload`** scans CMS sections for the first image and injects `<link rel="preload" as="image" fetchpriority="high">` during SSR.
+
+## 🔄 UnoCSS Runtime
+
+When you extend `@shopware/unocss-design-tokens-layer`, you also get a client-side [UnoCSS runtime](https://unocss.dev/integrations/runtime) plugin that resolves utility classes dynamically at runtime using a DOM MutationObserver. This is useful when CMS content from Shopware contains utility classes that aren't known at build time (for example inline utility classes configured in the admin panel).
+
+The runtime is **enabled by default**. To disable it, set `unocssRuntime` to `false` in your project's `app.config.ts`:
+
+```ts
+export default defineAppConfig({
+  unocssRuntime: false,
+});
+```
+
+> **When to disable**: If you don't use dynamic CMS utility classes, or if you experience performance issues caused by the MutationObserver in pages with frequent DOM mutations.
+
 ## 📘 Available components
 
 The list of available blocks and elements is [here](https://frontends.shopware.com/packages/cms-base-layer.html#available-components).
@@ -349,119 +474,36 @@ No additional packages needed to be installed.
 
 Full changelog for stable version is available [here](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/CHANGELOG.md)
 
-### Latest changes: 2.0.0
+### Latest changes: 3.0.0
 
 ### Major Changes
 
-- [#1944](https://github.com/shopware/frontends/pull/1944) [`c41a839`](https://github.com/shopware/frontends/commit/c41a8397538e5b18475134635cc44295c34dde2d) Thanks [@mkucmus](https://github.com/mkucmus)! - Updates the `@shopware/cms-base-layer` package with the following changes:
-  - Adds support for the new `SwQuantitySelect` component
-  - Updates the `SwProductAddToCart` component to use the new `SwQuantitySelect` component
-  - Fixes the `Status` component to use the new state classes
-  - Updates the `uno.config.ts` file to include default styling that can be used and extended in the end-project:
-
-  ## Nuxt UnoCSS Configuration Example
-
-  ```ts
-  // nuxt.config.ts in your end-project
-  {
-    unocss: {
-      nuxtLayers: true; // enable Nuxt layers support in order to merge UnoCSS configurations
-    }
-  }
-  ```
-
-  ## UnoCSS Configuration Example
-
-  ```ts
-  // uno.config.ts in your end-project
-  import { mergeConfigs } from "@unocss/core";
-  import baseConfig from "./.nuxt/uno.config.mjs";
-
-  export default mergeConfigs(baseConfig, {
-    // will be merged with the base config - all optional
-    theme: {
-      colors: {
-        "brand-primary": "#ff3e00",
-        "brand-secondary": "#ff6a00",
-      },
-    },
-    safelist: ["states-success"],
-    preflights: [
-      {
-        getCSS: () => `
-          body {
-              font-family: 'Inter', sans-serif;
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-          }
-          `,
-      },
-    ],
-  });
-  ```
+- [#2406](https://github.com/shopware/frontends/pull/2406) [`df93461`](https://github.com/shopware/frontends/commit/df93461434cb79ec9d722cdbd42a37a9af07fb03) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Remove bundled UnoCSS configuration and design tokens from the CMS layer. Consumers who relied on the previous default UnoCSS setup should extend `@shopware/unocss-design-tokens-layer` alongside this package. See the package README and framework docs for migration steps.
 
 ### Minor Changes
 
-- [#2030](https://github.com/shopware/frontends/pull/2030) [`22ff62e`](https://github.com/shopware/frontends/commit/22ff62e354f024599d64ea8096af57695248851c) Thanks [@mkucmus](https://github.com/mkucmus)! - Introduce new UI components, refine listing filters (structure and UX), add global collapse animations, and improve type safety.
-
-  ### Features
-  - New UI components:
-    - SwFilterChips – shows active filters as removable chips
-    - SwSortDropdown – sorting dropdown
-    - SwProductListingPagination – listing pagination
-    - Checkbox – reusable checkbox
-    - ChevronIcon – configurable chevron (up/down/left/right)
-    - RadioButton – reusable radio button
-    - SwitchButton – toggle switch
-
-  ### Refactors
-  - SwFilterProperties:
-    - Replace computed factory with `isChecked()` and `selectValue()` helpers for better performance and readability.
-  - Filter collapse animation:
-    - Unified expand/collapse animations for SwFilterProperties, SwFilterRating, SwFilterShippingFree, and SwFilterPrice using UnoCSS preflights.
-
-  ### TypeScript fixes
-  - SwProductListingFilters:
-    - Provide fallbacks (`?? []`, `?? ''`) when passing `getSortingOrders` and `getCurrentSortingOrder`.
-  - SwFilterChips:
-    - Relax prop types to accept union types compatible with both full Shopware schemas and simplified helper types.
-
-  ### Code quality improvements
-  - SwFilterPrice:
-    - Remove unnecessary optional chaining on `props.selectedFilters` to prevent masking undefined errors
-  - Checkbox component:
-    - Replace `outline-blue-500` with `outline-brand-primary` for brand consistency
-    - Make `label` prop optional to support checkbox-only pattern
-  - SwFilterShippingFree:
-    - Add i18n support using `useCmsTranslations` instead of hardcoded "free delivery" text
-  - SwFilterProperties:
-    - Remove unnecessary empty label prop from Checkbox usage
-
-  **Note:** Transition classes are globally available via UnoCSS preflights.
-
-- [#2139](https://github.com/shopware/frontends/pull/2139) [`20d1066`](https://github.com/shopware/frontends/commit/20d106638958170dd191ac3d95e3e536f3fcc787) Thanks [@mkucmus](https://github.com/mkucmus)! - Added a new `SwProductReviewsForm` component that allows logged-in customers to submit product reviews.
-
-- [#1959](https://github.com/shopware/frontends/pull/1959) [`c77daa6`](https://github.com/shopware/frontends/commit/c77daa6a11e96c7f3688b16f7da010b54c7f5e8b) Thanks [@patzick](https://github.com/patzick)! - Updated default types to Shopware 6.7
-
-- [#2176](https://github.com/shopware/frontends/pull/2176) [`c647baf`](https://github.com/shopware/frontends/commit/c647baf93e7174b849f5961ee5803add99d78602) Thanks [@mkucmus](https://github.com/mkucmus)! - - Extract product listing data early from CMS page responses to enable SSR rendering
-  - Remove ClientOnly wrappers from `SwProductListingFilters` and `SwFilterChips` components
-  - Resolve hydration mismatches on category pages with filters
+- [#2420](https://github.com/shopware/frontends/pull/2420) [`9e37ab6`](https://github.com/shopware/frontends/commit/9e37ab6897f501ed3d261fa619aee349e46342c2) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Add FrontendAccountCustomerGroupRegistrationPage component for customer group view
 
 ### Patch Changes
 
-- [#2174](https://github.com/shopware/frontends/pull/2174) [`e9f3d97`](https://github.com/shopware/frontends/commit/e9f3d972d7a126ec72f405a3595e53a61f6180f9) Thanks [@mkucmus](https://github.com/mkucmus)! - Added a new image placeholder.
+- [#2439](https://github.com/shopware/frontends/pull/2439) [`a992e39`](https://github.com/shopware/frontends/commit/a992e396ea6aa3b44783d183561fa8b0605b77f0) Thanks [@patzick](https://github.com/patzick)! - Use Nuxt route composables in CMS components to keep route query access available during SSR.
+
+- [#2389](https://github.com/shopware/frontends/pull/2389) [`05438c6`](https://github.com/shopware/frontends/commit/05438c636a6c99b48e87d8f2ff5b03bf313c4e67) Thanks [@mkucmus](https://github.com/mkucmus)! - Fix product card and CMS image sizing to prevent duplicate/oversized image requests. Move fixed dimensions and `densities="1x"` into the `productCard` preset, and use `useElementSize`-based `width`/`height` props for `CmsElementImage`.
+
+- [#2378](https://github.com/shopware/frontends/pull/2378) [`c36bc1f`](https://github.com/shopware/frontends/commit/c36bc1ff17e8e34c52fa91e6388ce210fffb7e8e) Thanks [@patzick](https://github.com/patzick)! - Add UnoCSS directive transformation for CMS block styles so layered Nuxt apps do not emit CSS minification warnings from raw `@apply` directives during production builds.
 
-- [#2162](https://github.com/shopware/frontends/pull/2162) [`e1fae3e`](https://github.com/shopware/frontends/commit/e1fae3eb6430e5c8e133456fbaf7f215f80c36f6) Thanks [@mkucmus](https://github.com/mkucmus)! - Replace hardcoded colors with theme tokens, add image placeholder composable, improve URL encoding for special characters in image paths, enhance CMS block layouts, and use useTemplateRef for better type safety
+- [#2369](https://github.com/shopware/frontends/pull/2369) [`3c16985`](https://github.com/shopware/frontends/commit/3c16985ddf3878bc207c514a5ab8e4a6409f809c) Thanks [@mkucmus](https://github.com/mkucmus)! - Fixed `xss` library loading issue in Vite dev server by adding it to `optimizeDeps.include`
 
-- [#2128](https://github.com/shopware/frontends/pull/2128) [`efe125e`](https://github.com/shopware/frontends/commit/efe125e7bea273bb904356114cf93adf68a416fb) Thanks [@mkucmus](https://github.com/mkucmus)! - Enhanced SwProductReviews component with reviewer names, shop feedback, and star ratings using direct SVG imports.
+- [#2371](https://github.com/shopware/frontends/pull/2371) [`33e0c69`](https://github.com/shopware/frontends/commit/33e0c69afc3de854733ab61f866ba65cce1489f6) Thanks [@patzick](https://github.com/patzick)! - Disable automatic CMS LCP image preload by default.
 
-- [#2008](https://github.com/shopware/frontends/pull/2008) [`3a1bca9`](https://github.com/shopware/frontends/commit/3a1bca983c4fc866c67b90897bd86d7488f8cac8) Thanks [@mkucmus](https://github.com/mkucmus)! - Added missing labels for `SwQuantitySelect` component.
+  The preload helper now only injects image preload tags when
+  `appConfig.lcpImagePreload` is explicitly enabled, which avoids noisy preload
+  warnings on storefront pages that do not immediately use the detected image.
 
-- [#1951](https://github.com/shopware/frontends/pull/1951) [`3f2379b`](https://github.com/shopware/frontends/commit/3f2379bdc428b481943cbcf3711a37cb91e2d298) Thanks [@mkucmus](https://github.com/mkucmus)! - Use proper paths for components configuration
+- [#2326](https://github.com/shopware/frontends/pull/2326) [`e7efff8`](https://github.com/shopware/frontends/commit/e7efff8c615ae8d0858572933285216cc533dd0b) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Gate wishlist button behind login when useLoginModal is provided via provide/inject. For guests, show login modal on wishlist click and add product to wishlist after successful login.
 
-- [#2154](https://github.com/shopware/frontends/pull/2154) [`168989e`](https://github.com/shopware/frontends/commit/168989e51e5c81c4cbb746c132d6561c019e046a) Thanks [@mkucmus](https://github.com/mkucmus)! - Implicitly set public components as global to expose them for templates that extend from the base one.
+- [#2346](https://github.com/shopware/frontends/pull/2346) [`a47143a`](https://github.com/shopware/frontends/commit/a47143a670f49deecc35dce4bb8b6bd12d9a3b47) Thanks [@joberthel](https://github.com/joberthel)! - Improve `SwMedia3D` model framing by fitting loaded 3D models into the viewport automatically. This fixes cases where very small 3D files appeared tiny and hard to inspect.
 
-- Updated dependencies [[`87771c3`](https://github.com/shopware/frontends/commit/87771c3b7a4521fcdba43cb4c967b61f5db01b3e), [`22ff62e`](https://github.com/shopware/frontends/commit/22ff62e354f024599d64ea8096af57695248851c), [`a44d871`](https://github.com/shopware/frontends/commit/a44d8712d9ae5ee196c03ac8b894f3d1392d0e68), [`e43d9b7`](https://github.com/shopware/frontends/commit/e43d9b7f559af21be8b66f2021cea2d14940e4aa), [`2cbda25`](https://github.com/shopware/frontends/commit/2cbda257a1056454e12f2fba9052f83eecb6d986), [`2cbda25`](https://github.com/shopware/frontends/commit/2cbda257a1056454e12f2fba9052f83eecb6d986), [`7fe2ef9`](https://github.com/shopware/frontends/commit/7fe2ef96a9d9d156683b85d31f0a660458c9fbfd), [`70dcf95`](https://github.com/shopware/frontends/commit/70dcf95d4370c63964d877a5cab113a53f93ca19), [`56cd178`](https://github.com/shopware/frontends/commit/56cd178e25fe2399b7170ccac3044e980621f041), [`c647baf`](https://github.com/shopware/frontends/commit/c647baf93e7174b849f5961ee5803add99d78602), [`e1fae3e`](https://github.com/shopware/frontends/commit/e1fae3eb6430e5c8e133456fbaf7f215f80c36f6), [`c647baf`](https://github.com/shopware/frontends/commit/c647baf93e7174b849f5961ee5803add99d78602), [`c77daa6`](https://github.com/shopware/frontends/commit/c77daa6a11e96c7f3688b16f7da010b54c7f5e8b)]:
-  - @shopware/composables@1.10.0
-  - @shopware/helpers@1.6.0
-  - @shopware/api-client@1.4.0
+- Updated dependencies [[`22fc8a7`](https://github.com/shopware/frontends/commit/22fc8a7301f6a7d2612d907ab73555978b651c00), [`bea7f58`](https://github.com/shopware/frontends/commit/bea7f5882cb58c6d47c84a82db5c8ecaf9bcf8ef), [`b8c0091`](https://github.com/shopware/frontends/commit/b8c00913c3afb5e1e63de9565105f8f8e3bf299f)]:
+  - @shopware/helpers@1.7.1
+  - @shopware/composables@1.11.1

package/app/app.config.ts

@@ -4,4 +4,16 @@ export default defineAppConfig({
   imagePlaceholder: {
     color: "#543B95",
   },
+  backgroundImage: {
+    format: "webp",
+    quality: 90,
+  },
+  lcpImagePreload: false,
+  imageSizes: {
+    1: "(max-width: 768px) 100vw, 100vw",
+    2: "(max-width: 768px) 100vw, 50vw",
+    3: "(max-width: 768px) 100vw, 33vw",
+    default: "(max-width: 768px) 50vw, 25vw",
+  },
+  unocssRuntime: true,
 });

package/app/components/SwCategoryNavigation.vue

@@ -2,21 +2,20 @@
 import { ref } from "vue";
 import type { Schemas } from "#shopware";
 
-const props = withDefaults(
-  defineProps<{
-    activeCategory: Schemas["Category"];
-    elements: Schemas["Category"][];
-    level: number;
-  }>(),
-  {
-    level: 0,
-  },
-);
+const {
+  activeCategory,
+  elements,
+  level = 0,
+} = defineProps<{
+  activeCategory: Schemas["Category"];
+  elements: Schemas["Category"][];
+  level: number;
+}>();
 
 const expandedItems = ref<Set<string>>(new Set());
 
 function isActive(navigationElement: Schemas["Category"]) {
-  return navigationElement.id === props.activeCategory?.id;
+  return navigationElement.id === activeCategory?.id;
 }
 
 function toggleExpanded(id: string) {
@@ -32,9 +31,12 @@ function isExpanded(id: string) {
 }
 </script>
 <template>
-  <div v-if="props.elements?.length" class="self-stretch flex flex-col justify-start items-start gap-4">
+  <div
+    v-if="elements?.length"
+    class="self-stretch flex flex-col justify-start items-start gap-4"
+  >
     <div
-      v-for="(navigationElement, index) in props.elements"
+      v-for="(navigationElement, index) in elements"
       :key="index"
       class="w-full"
     >
@@ -42,15 +44,18 @@ function isExpanded(id: string) {
         :navigation-element="navigationElement"
         :is-active="isActive(navigationElement)"
         :is-expanded="isExpanded(navigationElement.id)"
-        :level="props.level"
+        :level="level"
         @toggle="toggleExpanded(navigationElement.id)"
       />
       <transition name="filter-collapse">
-        <div v-if="navigationElement.children && isExpanded(navigationElement.id)" class="self-stretch flex flex-col justify-start items-start">
+        <div
+          v-if="navigationElement.children && isExpanded(navigationElement.id)"
+          class="self-stretch flex flex-col justify-start items-start"
+        >
           <SwCategoryNavigation
             :elements="navigationElement.children"
-            :active-category="props.activeCategory"
-            :level="props.level + 1"
+            :active-category="activeCategory"
+            :level="level + 1"
           />
         </div>
       </transition>
@@ -60,7 +65,9 @@ function isExpanded(id: string) {
 <style scoped>
 .filter-collapse-enter-active,
 .filter-collapse-leave-active {
-  transition: max-height 240ms ease, opacity 200ms ease;
+  transition:
+    max-height 240ms ease,
+    opacity 200ms ease;
   overflow: hidden;
 }
 .filter-collapse-enter-from,

package/app/components/SwFilterDropdown.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { onClickOutside } from "@vueuse/core";
+import { ref, useTemplateRef } from "vue";
+
+defineProps<{
+  label: string;
+  isActive?: boolean;
+}>();
+
+const isOpen = ref(false);
+const dropdownElement = useTemplateRef<HTMLDivElement>("dropdownElement");
+
+onClickOutside(dropdownElement, () => {
+  isOpen.value = false;
+});
+
+function toggle() {
+  isOpen.value = !isOpen.value;
+}
+</script>
+
+<template>
+  <div ref="dropdownElement" class="relative">
+    <!-- Pill button -->
+    <button
+      type="button"
+      class="bg-brand-tertiary rounded-full px-4 py-1.5 inline-flex items-center hover:bg-brand-tertiary-hover transition-colors"
+      :class="{ 'ring-2 ring-brand-primary': isActive }"
+      @click="toggle"
+      :aria-expanded="isOpen"
+      aria-haspopup="true"
+    >
+      <div class="py-1 inline-flex items-center gap-1">
+        <span class="text-brand-on-tertiary text-base font-normal leading-6">
+          {{ label }}
+        </span>
+        <SwChevronIcon
+          :direction="isOpen ? 'up' : 'down'"
+          :size="24"
+          class="text-brand-on-tertiary"
+        />
+      </div>
+    </button>
+
+    <!-- Dropdown panel -->
+    <div
+      v-if="isOpen"
+      class="absolute top-full left-0 mt-2 min-w-64 bg-surface-surface rounded-lg shadow-lg ring-1 ring-outline-outline-variant z-50 p-4"
+      role="menu"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/app/components/SwListingProductPrice.vue

@@ -35,7 +35,7 @@ const {
   unitPrice,
   displayFromVariants,
   displayFrom,
-  isListPrice,
+  hasListPrice,
   regulationPrice,
 } = useProductPrice(product);
 </script>
@@ -43,7 +43,7 @@ const {
 <template>
   <div :id="product.id" class="inline-flex justify-start items-center gap-2">
     <!-- Sale price display -->
-    <div v-if="isListPrice" class="flex items-center gap-2">
+    <div v-if="hasListPrice" class="flex items-center gap-2">
       <div class="text-base font-bold leading-normal">
         <SwSharedPrice :value="unitPrice">
           <template #beforePrice>

package/app/components/SwMedia3D.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { OrbitControls, useGLTF } from "@tresjs/cientos";
+import { Bounds, OrbitControls, useGLTF } from "@tresjs/cientos";
 import { TresCanvas } from "@tresjs/core";
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from "three";
+import { computed, shallowRef } from "vue";
 
 const props = defineProps<{
   src: string;
@@ -17,17 +18,25 @@ const gl = {
   windowSize: false,
 };
 
-const { scene: model } = await useGLTF(props.src);
+const { state } = await useGLTF(props.src);
+const model = computed(() => state.value?.scene);
+
+const boundsRef = shallowRef();
+
+function focusObject() {
+  boundsRef.value?.instance.lookAt(model.value);
+}
 </script>
 <template>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera
       :args="[75, 1, 0.1, 2000]"
       :position="[0, 0, 500]"
-      :look-at="[0, 0, 0]"
     />
-    <OrbitControls />
-    <primitive :object="model" />
+    <OrbitControls make-default />
+    <Bounds ref="boundsRef" clip use-mounted>
+      <primitive v-if="model" :object="model" @click="focusObject" />
+    </Bounds>
     <TresDirectionalLight :position="[3, 3, 3]" :intensity="1" />
     <TresAmbientLight :intensity="2" />
   </TresCanvas>