diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md index 056db9061..18196263d 100644 --- a/docs/docs/resources/changelog.md +++ b/docs/docs/resources/changelog.md @@ -14,15 +14,17 @@ During the alpha period, things might break! We take breaking changes very serio ## Next -- Fixed form controls to behave like their native counterparts for value and defaultValue properties / attributes respectively. [#157] -- Fixed a bug in `` around value attributes and properties to behave like native ``. [#157] +- Added SSR support to all components [#157] - Added `scroll-margin-top` to children of `wa-page` [#157] - Added `--scroll-margin-top` css variable `wa-page` [#157] -- Added SSR support to all components [#157] +- Fixed form controls to behave like their native counterparts for value and defaultValue properties / attributes respectively. [#157] +- Fixed a bug in `` around value attributes and properties to behave like native ``. [#157] +- Fixed a bug in `` that made the suffix slot collide with the clear button [#2145] - Fixed a bug in `` where unchecking and then checking would "clear" its value. [#157] - Fixed a bug where `` would announce the full time instead of the relative time in screen readers [#22](https://github.com/shoelace-style/webawesome-alpha/issues/22) - Fixed a bug in `` in Firefox where the overflow container would keep focus. [#14](https://github.com/shoelace-style/webawesome-alpha/issues/14) - Fixed a bug in `` where `minlength` and `maxlength` were not being properly validated. [#35](https://github.com/shoelace-style/webawesome-alpha/issues/35) +0 Fixed a bug in `` that made pagination work incorrectly [#2155] ## 1.0.0-alpha.1 diff --git a/src/components/carousel/carousel.ts b/src/components/carousel/carousel.ts index 5e1bdbe81..cf6ac21e6 100644 --- a/src/components/carousel/carousel.ts +++ b/src/components/carousel/carousel.ts @@ -462,12 +462,22 @@ export default class WaCarousel extends WebAwesomeElement { } // Sets the next index without taking into account clones, if any. - const newActiveSlide = loop ? (index + slides.length) % slides.length : clamp(index, 0, slides.length - 1); + const newActiveSlide = loop + ? (index + slides.length) % slides.length + : clamp(index, 0, slides.length - slidesPerPage); this.activeSlide = newActiveSlide; + const isRtl = this.matches(':dir(rtl)'); + // Get the index of the next slide. For looping carousel it adds `slidesPerPage` // to normalize the starting index in order to ignore the first nth clones. - const nextSlideIndex = clamp(index + (loop ? slidesPerPage : 0), 0, slidesWithClones.length - 1); + // For RTL it needs to scroll to the last slide of the page. + const nextSlideIndex = clamp( + index + (loop ? slidesPerPage : 0) + (isRtl ? slidesPerPage - 1 : 0), + 0, + slidesWithClones.length - 1 + ); + const nextSlide = slidesWithClones[nextSlideIndex]; this.scrollToSlide(nextSlide, prefersReducedMotion() ? 'auto' : behavior);