Carousel

Bindable active index.

The color family the highlight active state paints in (`activeEmphasis="highlight"`), independent of `tone` — e.g. a primary current row in a neutral list. Ignored at other levels.

Surface background from the Panel scale (`surface.peak` → `surface.ground`, or `transparent`).

Border color at rest: `none`, `default`, `bold`, `muted`, or `accent`. The 1px line is always reserved when a border can appear, so changing it never shifts layout.

Border color while the surface is `active` — the explicit form of the ring `activeEmphasis` would otherwise pick. It holds through hover, so a `borderInteract` color can't steal it. `inherit` keeps whatever `activeEmphasis` chose; `none` clears it.

Border color on hover and press: `none`, `default`, `bold`, `muted`, or `accent`. Composes with `border`, e.g. a muted line at rest that turns bold on hover.

Frame the carousel in a Card. Off by default: without it the carousel renders its bare, overlay layout (prev/next floating over the slides, dots below). With a Card object the carousel renders inside its own Card and relocates its chrome: the prev/next buttons become separate header trailing entries (after the consumer's `trailing`), the dots become the footer leading (after the consumer's `footer.leading`), and the viewport is the card content (`content.padding` defaults to `"none"`; an inset `contentBackground` is allowed). The carousel has no title of its own — give the card a `heading`. A string heading also names the carousel region when `label` is unset. In card mode the Card paints the surface: the carousel's own Panel props (`background`, `border`, `radius`, `padding`, `shadow`, `as`…) only style the bare root. `false` is the same as leaving it unset.

Which surface ramp the panel paints with: `primary` is the filled tone accent (with contrast text), `secondary` the tone's own surface tint, `tertiary` the neutral ramp with tone-accent text. `background` then picks the step on that ramp.

What hover and press paint on an interactive surface: `surface` steps the resting surface ramp; `highlight` paints the tone's highlight (`neutral.highlight` on a neutral surface) and its next step while pressed. An active surface keeps its own hover steps.

Elevation shadow applied to the surface.

Scale for the gap between slides and the size of indicator dots. Cascades to items via CSS custom properties.

Color tone: a semantic tone (`neutral`, `primary`, `success`, `warning`, `danger`, `inherit`) or a color family such as `teal`. A family carries no status meaning.

Frosted glass: the chosen `background` step at /35 with a large backdrop blur, so content behind the panel shows through. A transparent background stays transparent.

Scroll-snap alignment applied to each slide.

Axis of scrolling. Horizontal flips the scroll-snap axis to x; vertical flips it to y and bounds the viewport height.

Inner padding from the spacing scale.

Corner radius from the radii scale (`full` for fully rounded). `inner` computes a concentric corner from the parent panel's radius minus its padding; `inherit` mirrors the parent's corner exactly, for a child that sits flush with its edge.

Corner radius for the bottom-left and bottom-right corners.

Corner radius for the top-left and bottom-left corners.

Corner radius for the top-right and bottom-right corners.

Corner radius for the top-left and top-right corners.

Keep (or drop) the always-1px transparent border the panel reserves so a border appearing or changing never shifts layout. Computed automatically — it's reserved when a resting `border` is visible, or when `interactive` / `borderInteract` / `active` can change the border at runtime. Set `false` only on a panel that must not occupy that 1px (e.g. a borderless housing frame that would otherwise add 2px around a set).

Opt this panel into the baseline rhythm: bakes `data-rhythm` on the root, so the whole subtree becomes a rhythm scope. The panel's padding turns into whole raster lines (minus its border) and text inside can quantise its own leading through the preset's `rhythm` pattern. A `<Grid rhythm>` (or any `[data-rhythm]`) ancestor makes the subtree rhythmic without this prop — the prop is how a panel opts ITSELF in, and how it takes the line-based padding.

Number of slides visible in the viewport. `"auto"` lets each slide size itself.

Mark this as the chosen one in a set (a current nav item, a checked option, a selected card). Where `interactive` says it *can* be clicked, `active` says it *is* the current choice. Use `activeEmphasis` to control how loud the state is. Combined with `interactive`, hover and press restart their stepping from the active baseline rather than falling back to the unchosen ramp. The four values differ only in what drives the state: `true` by the prop (via `data-panel-active`), `"checked"` by a wrapped native input (`:has(input:checked)` — zero JS, nothing to re-render), `"current"` by an existing `aria-current` on the panel, and `"current-within"` by an `aria-current` on a direct child (a split nav row whose link carries it).

How loud the `active` state is. Defaults to the panel's own `emphasis`, so the chosen state lands on the same ramp as the resting look — this prop is the override for when the active item should be louder (or quieter) than the panel itself. `"primary"` fills with the tone accent ramp and flips text to the contrast scale (~150 RGB units of separation — the option that reads at a glance in a dense list). `"secondary"` tints the tone surface ramp and `"tertiary"` the neutral ramp; both promote text to `bold` and lift the border to the default line, but move the surface only ~7–18 units.

HTML element to render. Curated to container-like tags so semantic intent stays clear (no html/script/style/etc).

Auto-advance interval in milliseconds. `false`/`0` disables autoplay. Pauses on hover, focus-within, tab-hidden, and prefers-reduced-motion: reduce.

Render circular Prev/Next buttons over the viewport.

Render a tablist of dots that reflect the active slide and jump to a slide when clicked.

Enable interactive (hover / focus / press) affordances and states.

Data-driven array of slides. Each item needs a unique `value`; optional `label` and `align` override the root defaults per item. Body content is provided via named slots (Astro) or named snippets (Svelte) keyed by `value`. Mutually exclusive with slot composition.

When true, next/prev wrap past the ends. Controls the button-disabled state and autoplay wrap behavior.

When true, slides scrolled off-screen are marked `aria-hidden` + `inert` so assistive tech and the tab order skip them (APG carousel pattern). Off by default because `inert` changes focus reachability.

Accessible label for the carousel region. Forwarded to `aria-label` on the viewport, and used to announce the active slide via a polite live region.

The slides — CarouselItem children (alternative to `items`).

Programmatic snippet map for items-array mode. Keys are item `value`s. Alternatively, declare inline snippets whose names match item values as children of <Carousel>.

Bindable reference to the carousel's root element — the Card root in card mode (`card` prop), the bare Panel root otherwise. Typed as `HTMLElement` because the root is a Panel and `as` can change its tag.

Per-slot style and HTML-attribute override bag for the carousel's slots.

Astro / vanilla: serialize the props into `data-carousel-config` so the client runtime hydrates this instance and `getPindoba(el, "carousel")` can `update()` it. Frameworks with their own reactivity don't need it.

Per-item snap alignment override for this slide.

Unique identifier for the slide, used to key named slots/snippets and to track the active slide.

Optional label for accessibility and dot indicators (e.g. "Slide 1").

Per-slot style and HTML-attribute override bag for the item slot.