DSCatalyst design system
TenantRexall
Design system/Components/Carousel controls
molecule ยท source observed

Carousel controls

Tabs, dots, arrows, pause/play, keyboard state, and active-slide state.

2consumers0evidence8tokens
Rendered primitiveCarousel controls variants and statesdeterministic source context state extraction
Brand 0 carousel tab controlButton-like carousel tabs belong to Carousel controls, not the Button atom. Selected tab and playing state are observed from the cached Slick DOM.
source observed
Playing + selected tab
carousel.carousel-controls-4.playingsource observed
Selected tab
carousel.carousel-controls-4.selectedsource observed
Paused
carousel.carousel-controls-4.pausedrequired derived
Keyboard focus
carousel.carousel-controls-4.focusrequired derived

Semantic token resolution

Tab textvar(--wl-muted)mutedcolorFocus ringvar(--wl-accent)Carousel controlsmolecule API

Used by

Campaign carouselCampaign gallery tab rail and carousel controls.directWeekly flyer location toolbarFlyer page/thumbnail navigation.inferred

Proposed contract

itemsactiveIndexorientationautoRotatereducedMotiononSelect

Token contract

Tab textvar(--wl-muted)Active textvar(--wl-primary-strong)Active indicatorvar(--wl-primary)Tab surfacevar(--wl-surface)Active surfacevar(--wl-primary-soft)Control iconvar(--wl-primary-strong)Focus ringvar(--wl-accent)Radiusvar(--wl-control-radius)
  • This is where the agent finalizer must wire function, accessibility, and animation instead of visual-only output.