Carousels

[ffoodd]

Closes #550, closes #551

To-do

• Check if we can set an animation for "in progress" state, probably using an inline custom property for both animation-duration and animation-play-state (on :hover).
  • use a prefix for --carousel-interval, and probably extend this to all boosted-only custom props — using a variable prefix?
• Carousel controls
• Disable prev/next controls when not going to wrap
• Get things done by adding pause button? (Carousel improvements #366)
• Dark variant → dropped
• JS tests (!)
  • .paused should be added on mouseenter, removed on mouseleave
  • .done should be added when last slide and data-bs-wrap="false"
  • --o-carousel-interval should be set on indicator when data-bs-interval is provided
• What should be documented?
  • Pagination dots added in Design Guidelines, at least
  • Document the behaviour using custom property (with custom prefix?) and new .paused / .done classes?
  • New target-size() mixin Somewhere?
  • All of those in the migration guide issue (v5 — migration guide #383)
• Should the animated progress indicator be a variant?
• Test in RTL (!) → JS seems good, CSS animation is wrong so far
• Add more JS tests (!)
• static carousel uses data-bs-interval="false"? Bootstrap #32640 comment
• improve target-size():
  • dissociate width and height
  • use 44px equivalent as default size
  • set minimum width and height matching parent's, or try min-content and other keywords?
• cross-browser testing

---

Preview: https://deploy-preview-573--boosted.netlify.app/docs/5.0/components/carousel/ ("with indicators", "Individual .carousel-item interval", "Prevent cycling", "Static carousel")

[ffoodd]

Maybe something to improve progress indicator's animation: https://twitter.com/anatudor/status/1340051011323486209

[ffoodd]

Finally cannot be backported to v4 since we rely on mask-image and advanced animations.