[WC-3506] Carousel - update features

[gjulivan]

continue on #2245

add:

• fix design preview
• update swiper dependencies

[github-actions]

AI Code Review

🔶 Changes requested — one or more medium-severity items must be addressed

---

What was reviewed

File	Change
packages/pluggableWidgets/carousel-web/src/Carousel.tsx	Added slidesPerView/slidesPerGroup props, extracted items into useMemo
packages/pluggableWidgets/carousel-web/src/components/Carousel.tsx	Wired new props into Swiper options, reordered spread
packages/pluggableWidgets/carousel-web/src/Carousel.editorPreview.tsx	Switched to CarouselPreview.scss, added no-datasource state
packages/pluggableWidgets/carousel-web/src/Carousel.xml	Added slidesPerView and slidesPerGroup properties
packages/pluggableWidgets/carousel-web/typings/CarouselProps.d.ts	New props in both container and preview interfaces
packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss	Added ul.swiper-wrapper padding reset
packages/pluggableWidgets/carousel-web/src/ui/CarouselPreview.scss	New file for editor-only styles
packages/pluggableWidgets/carousel-web/src/components/__tests__/Carousel.spec.tsx	Updated defaultCarouselProps with new fields
packages/pluggableWidgets/carousel-web/package.json	Upgraded swiper ^12.1.2 → ^14.2.0

Skipped (out of scope): pnpm-lock.yaml

---

Findings

🔶 Medium — useMemo missing content dependency causes stale slide content

File: packages/pluggableWidgets/carousel-web/src/Carousel.tsx line 34
Problem: content is read inside the useMemo callback but is absent from the dependency array. If content (a ListWidgetValue) changes while dataSource.items stays the same (e.g. when the widget template is reconfigured), the memoized value will return stale item content.
Fix:

const carouselItems = useMemo(
    () =>
        dataSource?.items?.map((item: ObjectItem) => ({
            id: item.id as GUID,
            content: content?.get(item)
        })) ?? [],
    [dataSource, content]  // add content
);

---

🔶 Medium — Missing CHANGELOG entry for new feature and major dependency upgrade

File: packages/pluggableWidgets/carousel-web/CHANGELOG.md
Problem: Two user-visible changes are not documented: (1) slidesPerView and slidesPerGroup are new configurable XML properties, and (2) swiper was upgraded from v12 to v14 (two major versions, potentially carrying breaking behavior changes). The [Unreleased] section is empty.
Fix: Run pnpm -w changelog or add manually:

## [Unreleased]

### Added

- Added **Slides per view** and **Slides per group** properties to control how many slides are visible and advanced at once.

### Changed

- Updated swiper dependency from v12 to v14.

---

🔶 Medium — No guard against animation (fade) + slidesPerView > 1 conflict

File: packages/pluggableWidgets/carousel-web/src/components/Carousel.tsx line 65–85
Problem: Swiper's EffectFade module requires slidesPerView: 1. When a user sets slidesPerView > 1 with animation: true, Swiper will log a console error and render incorrectly (slides overlap or disappear). There is nothing in the widget to prevent or warn about this combination.
Fix: Either clamp slidesPerView to 1 when animation is enabled, or disable animation when slidesPerView > 1:

const options: SwiperOptions = {
    slidesPerView: animation ? 1 : slidesPerView,
    slidesPerGroup: animation ? 1 : slidesPerGroup,
    // ...
    ...(animation && {
        effect: "fade",
        fadeEffect: { crossFade: true }
    }),

Alternatively, add a Studio Pro validation error in an editorConfig.ts to warn the user.

---

⚠️ Low — PR title does not follow conventional commits convention

Problem: Title Carousel/updatefeatures does not match the required format (feat:, fix:, [XX-000]:, etc.) enforced by conventional commits. This blocks the changelog tooling and release automation.
Fix: Rename to something like feat(carousel-web): add slidesPerView and slidesPerGroup options.

---

⚠️ Low — ul.swiper-wrapper override not scoped to widget class in Carousel.scss

File: packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss line 68–70
Problem: The new ul.swiper-wrapper { padding-inline-start: 0; } rule is added at file root scope, so it affects every Swiper instance on the page — not just this widget's carousel. The same rule in CarouselPreview.scss is correctly scoped under .widget-carousel-editor-preview.
Fix: Scope it consistently:

.widget-carousel {
    ul.swiper-wrapper {
        padding-inline-start: 0;
    }
}

---

Positives

• {...options} spread moved after named event props (onClick, onSwiper) — prevents the spread from accidentally overriding those handlers, a subtle correctness improvement.
• Separate CarouselPreview.scss introduced for editor-only styles keeps the production runtime bundle clean.
• XML property keys slidesPerView and slidesPerGroup are lowerCamelCase and align exactly with the TypeScript interface — no XML/TS mismatch.
• The no-datasource branch in the editor preview ([No datasource selected]) provides a clear feedback state to Studio Pro users instead of a silent empty render.
• typings/CarouselProps.d.ts updated to reflect both container (number) and preview (number | null) types correctly.