Carousel

/**
 * Carousel fixture. `defaultIndex` pins the mid-track state the
 * five-framework render proof compares (slide 2 of 3 showing, both arrows
 * enabled, the middle dot current). `slides` is plain copy — each adapter
 * turns it into that framework's own children/snippet/template list, which
 * is the one place Carousel's five APIs genuinely differ.
 */
const carouselFixture = {
  id: "carousel",
  label: "Platform metrics",
  defaultIndex: 1,
  loop: false,
  slides: ["−42% p95 latency", "99.98% uptime held", "5× scale absorbed"],
} satisfies {
  id: string;
  label: string;
  defaultIndex: number;
  loop: boolean;
  slides: readonly string[];
};
 
import { Carousel } from "@grassroot/ui-react";
 
export default function CarouselDemo() {
  return (
    <div>
      <Carousel
        label={carouselFixture.label}
        defaultIndex={carouselFixture.defaultIndex}
        loop={carouselFixture.loop}
      >
        {carouselFixture.slides.map((slide) => (
          <div key={slide}>{slide}</div>
        ))}
      </Carousel>
    </div>
  );
}

<script setup lang="ts">
/**
 * Carousel fixture. `defaultIndex` pins the mid-track state the
 * five-framework render proof compares (slide 2 of 3 showing, both arrows
 * enabled, the middle dot current). `slides` is plain copy — each adapter
 * turns it into that framework's own children/snippet/template list, which
 * is the one place Carousel's five APIs genuinely differ.
 */
const carouselFixture = {
  id: "carousel",
  label: "Platform metrics",
  defaultIndex: 1,
  loop: false,
  slides: ["−42% p95 latency", "99.98% uptime held", "5× scale absorbed"],
} satisfies {
  id: string;
  label: string;
  defaultIndex: number;
  loop: boolean;
  slides: readonly string[];
};
 
import { Carousel } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Carousel
      :label="carouselFixture.label"
      :default-index="carouselFixture.defaultIndex"
      :loop="carouselFixture.loop"
    >
      <div v-for="slide in carouselFixture.slides" :key="slide">{{ slide }}</div>
    </Carousel>
  </div>
</template>

import { Component } from "@angular/core";
/**
 * Carousel fixture. `defaultIndex` pins the mid-track state the
 * five-framework render proof compares (slide 2 of 3 showing, both arrows
 * enabled, the middle dot current). `slides` is plain copy — each adapter
 * turns it into that framework's own children/snippet/template list, which
 * is the one place Carousel's five APIs genuinely differ.
 */
const carouselFixture = {
  id: "carousel",
  label: "Platform metrics",
  defaultIndex: 1,
  loop: false,
  slides: ["−42% p95 latency", "99.98% uptime held", "5× scale absorbed"],
} satisfies {
  id: string;
  label: string;
  defaultIndex: number;
  loop: boolean;
  slides: readonly string[];
};
 
import { GrassrootCarousel, GrassrootCarouselSlide } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-carousel-demo",
  standalone: true,
  imports: [GrassrootCarousel, GrassrootCarouselSlide],
  template: `
    <div>
      <grassroot-carousel
        [label]="fixture.label"
        [defaultIndex]="fixture.defaultIndex"
        [loop]="fixture.loop"
      >
        @for (slide of fixture.slides; track slide) {
          <ng-template grassrootCarouselSlide
            ><div>{{ slide }}</div></ng-template
          >
        }
      </grassroot-carousel>
    </div>
  `,
})
export class CarouselDemoComponent {
  protected readonly fixture = carouselFixture;
}
 
export default CarouselDemoComponent;

<script lang="ts">
  import type { Snippet } from "svelte";
  import { Carousel } from "@grassroot/ui-svelte";
  /**
   * Carousel fixture. `defaultIndex` pins the mid-track state the
   * five-framework render proof compares (slide 2 of 3 showing, both arrows
   * enabled, the middle dot current). `slides` is plain copy — each adapter
   * turns it into that framework's own children/snippet/template list, which
   * is the one place Carousel's five APIs genuinely differ.
   */
  const carouselFixture = {
    id: "carousel",
    label: "Platform metrics",
    defaultIndex: 1,
    loop: false,
    slides: ["−42% p95 latency", "99.98% uptime held", "5× scale absorbed"],
  } satisfies {
    id: string;
    label: string;
    defaultIndex: number;
    loop: boolean;
    slides: readonly string[];
  };
 
  </script>
 
{#snippet slideOne()}<div>{carouselFixture.slides[0]}</div>{/snippet}
{#snippet slideTwo()}<div>{carouselFixture.slides[1]}</div>{/snippet}
{#snippet slideThree()}<div>{carouselFixture.slides[2]}</div>{/snippet}
<div>
  <Carousel
    label={carouselFixture.label}
    defaultIndex={carouselFixture.defaultIndex}
    loop={carouselFixture.loop}
    children={[slideOne, slideTwo, slideThree] as Snippet[]}
  />
</div>

/** @jsxImportSource solid-js */
import { Carousel } from "@grassroot/ui-solid";
/**
 * Carousel fixture. `defaultIndex` pins the mid-track state the
 * five-framework render proof compares (slide 2 of 3 showing, both arrows
 * enabled, the middle dot current). `slides` is plain copy — each adapter
 * turns it into that framework's own children/snippet/template list, which
 * is the one place Carousel's five APIs genuinely differ.
 */
const carouselFixture = {
  id: "carousel",
  label: "Platform metrics",
  defaultIndex: 1,
  loop: false,
  slides: ["−42% p95 latency", "99.98% uptime held", "5× scale absorbed"],
} satisfies {
  id: string;
  label: string;
  defaultIndex: number;
  loop: boolean;
  slides: readonly string[];
};
 
export default function CarouselDemo() {
  return (
    <div>
      <Carousel
        label={carouselFixture.label}
        defaultIndex={carouselFixture.defaultIndex}
        loop={carouselFixture.loop}
      >
        {carouselFixture.slides.map((slide) => (
          <div>{slide}</div>
        ))}
      </Carousel>
    </div>
  );
}