Carousel

import {
  Card,
  Carousel,
  PaginationMode,
  TextStyle,
  TextView,
} from '@wearables-ui-toolkit/mrbd';

export function ConditionsCarousel({ days }: { days: Forecast[] }) {
  return (
    <Carousel
      ariaLabel="Conditions"
      paginationMode={PaginationMode.DOTS}
      onItemCentered={index => reportVisibleDay(days[index])}
    >
      {days.map(day => (
        <Card key={day.id} ariaLabel={day.label}>
          <TextView textStyle={TextStyle.BODY2_EMPHASIZED}>{day.label}</TextView>
          <TextView textStyle={TextStyle.BODY2}>{day.summary}</TextView>
        </Card>
      ))}
    </Carousel>
  );
}

import { useRef } from 'react';
import { Button, Carousel } from '@wearables-ui-toolkit/mrbd';
import type { CarouselHandle } from '@wearables-ui-toolkit/mrbd';

export function CaptureStrip({ captures }: { captures: Capture[] }) {
  const carouselRef = useRef<CarouselHandle>(null);

  return (
    <>
      <Carousel ref={carouselRef} ariaLabel="Captures">
        {captures.map(capture => (
          <CaptureTile key={capture.id} capture={capture} />
        ))}
      </Carousel>
      <Button
        title="Latest"
        // Centers, focuses, and reports the item.
        onActivate={() => carouselRef.current?.scrollToPosition(captures.length - 1)}
      />
    </>
  );
}

import {
  Carousel,
  CarouselIndicatorPlacement,
  CarouselVerticalAlignment,
  PaginationMode,
} from '@wearables-ui-toolkit/mrbd';

<Carousel
  ariaLabel="Gallery"
  indicatorPlacement={CarouselIndicatorPlacement.BOTTOM_OVERLAY}
  paginationMode={PaginationMode.DOTS}
  verticalAlignment={CarouselVerticalAlignment.BOTTOM}
>
  {tiles}
</Carousel>;

import { Carousel } from '@wearables-ui-toolkit/foundation/components/Carousel';

• CENTER — centers items vertically within the strip
• BOTTOM — aligns items to the bottom of the strip

• UNDER — places the indicator below the strip and reserves space for it
• BOTTOM_OVERLAY — overlays the indicator on the bottom of the strip

• currentIndex: number — current dot or page, replacing the centered item index
• totalItems: number — dot or page count, replacing the item count
• isVisible: boolean — hides the indicator when false, even when it would otherwise appear

• scrollToPosition(index: number): void — centers, focuses, and reports the item at index. Out-of-range indices are ignored and do not produce a report.
• getRootElement(): HTMLDivElement | null — returns the root DOM element, or null before mount.

• The root has a region role and a carousel role description. Give it an accessible name through ariaLabel; otherwise, the component uses a generic fallback name.
• The strip has a list role, and each item slot has a listitem role labelled with its position in the sequence. Item content owns its accessible name and actions.
• The strip owns the tab stop, and arrow keys move among items. Keep tabIndex at its default unless the surrounding application explicitly manages tab order.
• The component marks fades aria-hidden so assistive technology does not announce decorative content.
• Carousel renders every item and does not virtualize the sequence, so every item remains available to assistive technology.

• Size items responsively and leave space for focus scaling at both horizontal edges.
• Let Carousel own scrolling, centering, and indicator state. Observe centered items through onItemCentered.
• Keep onItemCentered inexpensive and idempotent because one movement can report the same index more than once.
• Keep the indicator visually close to its items so its relationship remains clear.
• Use progressIndicatorCustomizationOverride when the indicator represents a grouping other than the raw item list, such as a paged set.

• Avoid a large empty area between the items and indicator because it weakens their visual relationship.
• Do not nest another horizontal scrolling region inside an item or put a carousel inside a horizontal ScrollView. One scroller must own each axis so directional navigation and scrolling remain predictable.
• Use scrollToPosition instead of managing the scroll position directly. This keeps position, focus, and centered-item reporting synchronized.
• Do not pass arbitrary DOM attributes expecting them on the root. The public prop set is closed.
• Avoid using a carousel for full-page destinations; Carousel is intended for items within a page.