diff --git a/packages/pluggableWidgets/carousel-web/CHANGELOG.md b/packages/pluggableWidgets/carousel-web/CHANGELOG.md index 446cd0d329..ff8d1c56e2 100644 --- a/packages/pluggableWidgets/carousel-web/CHANGELOG.md +++ b/packages/pluggableWidgets/carousel-web/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Fixed + +- Added focus indicator and background to navigation buttons of carousel, removed autoplay by default + ## [2.3.0] - 2025-08-19 ### Changed diff --git a/packages/pluggableWidgets/carousel-web/package.json b/packages/pluggableWidgets/carousel-web/package.json index d33019f96f..e5c24c49e0 100644 --- a/packages/pluggableWidgets/carousel-web/package.json +++ b/packages/pluggableWidgets/carousel-web/package.json @@ -1,7 +1,7 @@ { "name": "@mendix/carousel-web", "widgetName": "Carousel", - "version": "2.3.0", + "version": "2.3.1", "description": "Displays images in a carousel", "copyright": "© Mendix Technology BV 2025. All rights reserved.", "license": "Apache-2.0", diff --git a/packages/pluggableWidgets/carousel-web/src/Carousel.xml b/packages/pluggableWidgets/carousel-web/src/Carousel.xml index 53ee13cd3c..2db73936e0 100644 --- a/packages/pluggableWidgets/carousel-web/src/Carousel.xml +++ b/packages/pluggableWidgets/carousel-web/src/Carousel.xml @@ -25,7 +25,7 @@ Navigation controls - + Auto play diff --git a/packages/pluggableWidgets/carousel-web/src/package.xml b/packages/pluggableWidgets/carousel-web/src/package.xml index 124bce9c6f..916c59d476 100644 --- a/packages/pluggableWidgets/carousel-web/src/package.xml +++ b/packages/pluggableWidgets/carousel-web/src/package.xml @@ -1,6 +1,6 @@ - + diff --git a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss index 0a2cc4c54e..b9ae8b301e 100644 --- a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss +++ b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss @@ -1,3 +1,9 @@ +// Atlas UI compatible variable naming for data widgets +$gray-200: #e3e3e5 !default; +$spacing-large: 24px !default; +$focus-outline: 2px solid #264ae5 !default; +$focus-outline-offset: 2px !default; + .swiper { width: 100%; height: 100%; @@ -23,6 +29,20 @@ align-items: center; } +.swiper-button-next, +.swiper-button-prev { + --swiper-navigation-size: 24px; + border-radius: 50%; + background-color: var(--gray-200, $gray-200); + padding: var(--spacing-large, $spacing-large); +} + +.swiper-button-next:focus, +.swiper-button-prev:focus { + outline: var(--focus-outline, $focus-outline); + outline-offset: var(--focus-outline-offset, $focus-outline-offset); +} + .swiper-slide img { display: block; width: 100%;