Mixins / foldkit-mixins-ui

Carousel

namespace · packages/mixins-ui/src/carousel.ts:1

export * as Carousel from './carousel.js'

In the guides

Members

Carousel.CarouselSlots

const · packages/mixins-ui/src/carousel.ts:23

const CarouselSlots: Slots.Contract<{ readonly root: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly [Attr.AttrToken<"role">, Attr.AttrToken<"aria-label">], readonly Slot.RequirementName[], boolean>; readonly track: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly slide: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly [Attr.AttrToken<"role">, Attr.AttrToken<"aria-label">], readonly Slot.RequirementName[], boolean>; readonly controls: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly previous: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly [Event.EventToken<"click">], readonly [Attr.AttrToken<"aria-label">, Attr.AttrToken<"aria-disabled">], readonly Slot.RequirementName[], boolean>; readonly next: Slot.UnnamedSlot<C …;

A carousel, the APG's: a group with aria-roledescription="carousel" named by its label, each slide a group with aria-roledescription="slide" named "2 of 5", previous and next buttons, and a dot per slide. It never rotates by itself. The track is a CSS scroll-snap scroller, so a swipe or a trackpad moves it natively.

The current slide is the application's: the buttons and dots send onIndex, and update keeps the index and returns ShowSlide, which scrolls the track to it. The view does not hear a swipe: after one, index (the buttons, the current dot, the status) stays where the last Message left it. A polite status region says the slide shown once it changes, since nothing in the slides themselves changes for a screen reader to announce.

Carousel.CarouselView

interface · packages/mixins-ui/src/carousel.ts:73

interface CarouselView<Message> {
  readonly id: string
  readonly label: string
  readonly slides: ReadonlyArray<Html>
  readonly index: number
  readonly onIndex: (index: number) => NoInfer<Message>
  readonly loop?: boolean | undefined
  readonly picker?: boolean | undefined
  readonly slideLabel?: ((index: number, count: number) => string) | undefined
  readonly previousLabel?: string | undefined
  readonly nextLabel?: string | undefined
  readonly pickerLabel?: string | undefined
  readonly style?: NamedStyle<typeof CarouselSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

Carousel.Message

const · packages/mixins-ui/src/carousel.ts:47

const Message: MessageUnion<{ readonly CompletedShowSlide: {} }>

Carousel.ShowSlide

const · packages/mixins-ui/src/carousel.ts:59

const ShowSlide: Command.CommandDefinitionWithArgs<
  'Carousel.ShowSlide',
  { id: Schema.String; index: Schema.Number },
  Effect.Effect<{ readonly _tag: 'CompletedShowSlide' }, never, never>
>

Scrolls the carousel id's track to slide index, its start at the track's start, once the render that marked it current has committed. The scroll is smooth where the recipe says so, which it does only without reduced motion. A slide not drawn is left alone.

Carousel.slideId

function · packages/mixins-ui/src/carousel.ts:51

function slideId(id: string, index: number): string

The id of slide index of the carousel id, which ShowSlide looks up.

Carousel.view

function · packages/mixins-ui/src/carousel.ts:103

function view<Message>(
  options: CarouselView<Message>,
  h: HtmlBuilder<Message>,
): Html