` named by `aria-label`, whose slides are `role="group"` with `aria-roledescription="slide"` and a name such as "2 of 3". Only the current slide is shown; the others are `hidden`, so their content is neither seen nor focusable. Native buttons step back and forward, wrapping, and a row of small keys picks a slide. The slides' container is a polite live region, so a new slide is announced. For content the user must see together, use a [List](https://underglass.dev/docs/strata/components/list) or cards; Strata has no auto-rotating form (WCAG 2.2.2). ## 2. Object **A stage with keys under it**: the slides are captured content in their own frame, and the controls are keys. | Part | Shape | Height at 50% | Moves | | --- | --- | --- | --- | | Slides | A rounded frame, `radius.control`, as tall as the shown slide | Flat (captured) | The new slide fades in over `motion.normal` | | Previous, Next | IconButtons with a chevron | `elevation.raised` | As IconButton | | Picker key | A 24 px round key per slide | `elevation.raised` | The current slide's key stays down | ## 3. Faces and materials | Part | Colour role | Material role | | --- | --- | --- | | Slides frame | `secondary` | — | | Picker key | `secondary`; the current one `accent` | `control` | The current slide's key is held down and filled; the slide also says "2 of 3" to assistive technology. ## 4. Elevation per state | State | Relief | Objects | CSS | | --- | --- | --- | --- | | Previous, Next | As IconButton | Keys | As IconButton | | Picker key, current (`aria-current="true"`) | Held at `state.pressHeight`, filled | Key held down | Filled | ## 5. Relief primitives One `raised` primitive per control: Previous, Next and each picker key (keys at the Objects level, the current picker key held down). The slides are captured content. ## 6. Tokens it reads `colour.secondary`, `colour.accent`, `elevation.raised`, `radius.control`, `space.2`, `space.3`, `target.min`, `state.*`, `focus.*`, `motion.normal`. ## 7. DOM structure and overlay needs ```html

First

``` - An empty icon gets a chevron from CSS; the bindings accept their own icons. - React takes `slides` (an array), Vue its default slot's elements (one per slide), and Astro `count` with named slots `slide-1`, `slide-2` and so on. All take `index` or `defaultIndex` (from 0) and report changes (`onIndexChange`, Vue `v-model:index`); the labels are props (`previousLabel`, `nextLabel`, `pickerLabel`, `slideLabel(n, count)`, `keyLabel(n)`). In plain HTML and Astro, `attachStrata` runs the buttons and reports `strata-slide` (`detail.index`) from the carousel. - No overlay. ## 8. Keyboard and screen reader | Key | Action | | --- | --- | | Tab | Moves to Previous, each picker key and Next, and into the current slide's content | | Enter, Space | Press the focused button | - Announced as "Featured, carousel"; each slide as "2 of 3, slide". A new slide is announced politely. The picker keys say "Slide 2", and the current one "current". ## 9. CSS presentation The slides frame is a `secondary` rounded box; the controls are a centred row under it with `space.2` gaps. A shown slide fades in with `@starting-style` (at once under reduced motion). Under `forced-colors` the frame has a `CanvasText` border, picker keys a `ButtonBorder` one, and the current key is `Highlight`. ## 10. Tests - **Bindings:** matches this markup; Next and Previous step and wrap, a picker key jumps, only the current slide is shown, the current key carries `aria-current`, and the index is reported. - **GPU:** the controls are keys (the current picker key held down) and the slides captured; a real click on Next shows the next slide with fresh pixels, and GPU stays on.