carousel

<!-- .sk-carousel — a scroll-snap carousel. The scrolling, the snapping, the
     keyboard and the touch gesture are all the scroll container's own.

     The list stays a list. Its items are the content; the previous/next
     buttons and the dots are generated by CSS in engines that support
     ::scroll-button() and ::scroll-marker, and are simply absent elsewhere —
     where the carousel is still complete, because scrolling a scroll container
     never depended on them.

     tabindex="0" is the one thing markup has to supply: a scroll container is
     only keyboard-scrollable if it can take focus, and no engine does that for
     an element whose children are not themselves focusable. -->
<div class="sk-carousel">
  <ul class="sk-carousel__track" tabindex="0" aria-label="Featured components">
    <li class="sk-carousel__slide">
      <article class="sk-carousel__card">
        <h3 class="sk-carousel__title">Popover</h3>
        <p class="sk-carousel__text">
          Light dismiss, Esc and focus return, from the popover attribute.
        </p>
      </article>
    </li>

    <li class="sk-carousel__slide">
      <article class="sk-carousel__card">
        <h3 class="sk-carousel__title">Dialog</h3>
        <p class="sk-carousel__text">
          Modality and focus containment, from the dialog element.
        </p>
      </article>
    </li>

    <li class="sk-carousel__slide">
      <article class="sk-carousel__card">
        <h3 class="sk-carousel__title">Tabs</h3>
        <p class="sk-carousel__text">
          One tab stop and arrow-key selection, from a radio group.
        </p>
      </article>
    </li>

    <li class="sk-carousel__slide">
      <article class="sk-carousel__card">
        <h3 class="sk-carousel__title">Accordion</h3>
        <p class="sk-carousel__text">
          Exclusive open state, from the name attribute on details.
        </p>
      </article>
    </li>

    <li class="sk-carousel__slide">
      <article class="sk-carousel__card">
        <h3 class="sk-carousel__title">Toast</h3>
        <p class="sk-carousel__text">
          Announced politely, then removed on a timer, with no script.
        </p>
      </article>
    </li>
  </ul>
</div>

/* .sk-carousel — a scroll-snap carousel, with generated controls where the
   engine has them.

   The base is a scroll container with scroll-snap, which is Baseline widely
   available: it swipes, it scrolls, it snaps, and it takes arrow keys once the
   container is focusable. That is a whole carousel, and it is what every engine
   gets.

   The enhancement is that CSS can now generate the controls: ::scroll-button()
   for previous/next and ::scroll-marker for the dots, with the browser owning
   their disabled state, their current-item state and their keyboard behaviour.
   Verified 2026-08-20 against the engines this kit tests: Chromium 151 has all
   of it, WebKit 26.5 and Firefox 153 have none of it. So the whole control
   layer sits inside @supports and its absence is the documented Tier B/C
   experience — no dots, no arrows, same content, same scrolling.

   Specs:
   - scroll-snap ............ https://drafts.csswg.org/css-scroll-snap-1/
   - ::scroll-button() ...... https://drafts.csswg.org/css-overflow-5/#scroll-buttons
   - ::scroll-marker ........ https://drafts.csswg.org/css-overflow-5/#scroll-markers
   - scroll-marker-group .... https://drafts.csswg.org/css-overflow-5/#scroll-marker-group-property
   - overscroll-behavior .... https://drafts.csswg.org/css-overscroll-1/ */

/* Public theme knobs (ADR 0011). Read, never declared, so the nearest
   declaration above the component wins. */
.sk-carousel {
  --_gap: var(--sk-carousel-gap, var(--sk-space-md));
  --_slide-inline-size: var(--sk-carousel-slide-inline-size, 18rem);
  --_card-bg: var(--sk-carousel-card-bg, var(--sk-color-surface));
  --_card-fg: var(--sk-carousel-card-fg, var(--sk-color-text));
  --_card-border: var(--sk-carousel-card-border-color, var(--sk-color-border));
  --_card-radius: var(--sk-carousel-card-radius, var(--sk-radius-lg));
  --_text-fg: var(--sk-carousel-text-fg, var(--sk-color-text-muted));
  --_button-bg: var(--sk-carousel-button-bg, var(--sk-color-surface-raised));
  --_button-fg: var(--sk-carousel-button-fg, var(--sk-color-text));
  --_button-border: var(--sk-carousel-button-border-color, var(--sk-color-border-strong));
  --_marker: var(--sk-carousel-marker-color, var(--sk-color-border-strong));
  --_marker-current: var(--sk-carousel-marker-color-current, var(--sk-color-accent));
  --_marker-size: var(--sk-carousel-marker-size, var(--sk-space-xs));

  /* Wide enough for the button itself, so the gutter is a gutter and not a
     44px control squeezed into 40px of space. */
  --_button-gutter: var(
    --sk-carousel-button-gutter,
    calc(var(--sk-size-tap-target) + var(--sk-space-2xs))
  );

  /* The generated buttons are positioned against this, not against the
     scroller — a box inside the scroller would scroll away with the slides. */
  position: relative;
}

.sk-carousel__track {
  display: flex;
  gap: var(--_gap);
  margin: 0;
  padding: 0;
  list-style: none;

  /* overflow-inline is the logical property and every engine this kit targets
     has it, but it is not Baseline widely available yet, so the physical
     fallback is stated first. In a horizontal writing mode the two are the
     same declaration; only a vertical mode tells them apart. */
  overflow-x: auto;
  scroll-snap-type: inline mandatory;

  /* A swipe that runs off the last slide should stop there rather than scroll
     the page behind it. */
  overscroll-behavior-inline: contain;
}

@supports (overflow-inline: auto) {
  .sk-carousel__track {
    overflow-inline: auto;
  }
}

.sk-carousel__slide {
  flex: 0 0 auto;
  inline-size: min(var(--_slide-inline-size), 100%);
  scroll-snap-align: center;
}

.sk-carousel__card {
  block-size: 100%;
  padding: var(--sk-space-md);
  border: var(--sk-border-width) solid var(--_card-border);
  border-radius: var(--_card-radius);
  background: var(--_card-bg);
  color: var(--_card-fg);
}

.sk-carousel__title {
  margin-block-end: var(--sk-space-2xs);
  font-size: var(--sk-text-md);
  letter-spacing: var(--sk-tracking-tight);
}

.sk-carousel__text {
  margin: 0;
  color: var(--_text-fg);
  font-size: var(--sk-text-sm);
}

/* Smooth scrolling is the only motion here, and it is what the generated
   buttons and dots use to move between slides. Under `reduce` the jump is
   instant, which is the same destination without the travel. */
@media (prefers-reduced-motion: no-preference) {
  .sk-carousel__track {
    scroll-behavior: smooth;
  }
}

/* ---------------------------------------------------------------------------
   Generated controls

   Everything below is enhancement. Without it there are no arrows and no dots,
   and the carousel still scrolls, snaps and takes the keyboard.

   The value of letting CSS generate these rather than writing markup for them
   is that the browser owns their state: a ::scroll-button() is disabled at the
   end of its axis on its own, and the ::scroll-marker for the visible slide
   matches :target-current without anything having to track it.
--------------------------------------------------------------------------- */

@supports selector(::scroll-button(inline-start)) {
  /* The gutter the arrows sit in, so they never cover a slide — an arrow laid
     over the text it is meant to reveal is a worse control than no arrow.
     Reserved here rather than on the base, because an engine with no arrows
     should not pay for the space they would have used. */
  .sk-carousel {
    padding-inline: var(--_button-gutter);
  }

  .sk-carousel__track::scroll-button(inline-start),
  .sk-carousel__track::scroll-button(inline-end) {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
    z-index: 1;
    inline-size: var(--sk-size-tap-target);
    block-size: var(--sk-size-tap-target);
    border: var(--sk-border-width) solid var(--_button-border);
    border-radius: var(--sk-radius-full);
    background: var(--_button-bg);
    color: var(--_button-fg);
    font-size: var(--sk-text-lg);
    line-height: 1;
    cursor: pointer;
  }

  /* The glyphs are content, and content has a direction — these are the
     logical keywords, so they swap themselves in a right-to-left document. */
  .sk-carousel__track::scroll-button(inline-start) {
    content: "‹" / "Previous";
    inset-inline-start: 0;
  }

  .sk-carousel__track::scroll-button(inline-end) {
    content: "›" / "Next";
    inset-inline-end: 0;
  }

  /* The engine disables the button at the end of its axis. Fading it rather
     than hiding it keeps the control from moving as you scroll. */
  .sk-carousel__track::scroll-button(inline-start):disabled,
  .sk-carousel__track::scroll-button(inline-end):disabled {
    opacity: 0.35;
    cursor: default;
  }
}

@supports (scroll-marker-group: after) and selector(::scroll-marker) {
  .sk-carousel__track {
    scroll-marker-group: after;

    /* The group is generated as a child of the scroller but is laid out
       outside the scrollport, so it needs the gap reserved here. */
    padding-block-end: var(--sk-space-sm);
  }

  .sk-carousel__track::scroll-marker-group {
    display: flex;
    justify-content: center;
    gap: var(--sk-space-2xs);
    padding-block-start: var(--sk-space-sm);
  }

  .sk-carousel__slide::scroll-marker {
    content: "";
    inline-size: var(--_marker-size);
    block-size: var(--_marker-size);
    border: var(--sk-border-width) solid var(--_marker);
    border-radius: var(--sk-radius-full);
    background: none;
    cursor: pointer;
  }

  /* :target-current is the marker for the slide currently in view. The browser
     decides which one that is; nothing here tracks scroll position. */
  .sk-carousel__slide::scroll-marker:target-current {
    border-color: var(--_marker-current);
    background: var(--_marker-current);
  }

  /* The marker group is laid out inside the scroller's box, so it counts
     toward the 50% the buttons centre on and would drag them below the
     slides. Take back half of what the dots occupy. Scoped to this block
     because it is only true when there are dots. */
  .sk-carousel__track::scroll-button(inline-start),
  .sk-carousel__track::scroll-button(inline-end) {
    inset-block-start: calc(50% - (var(--sk-space-sm) + var(--_marker-size)) / 2);
  }
}

/* Under forced colours the dots must not be an invisible ring on Canvas, and
   the current one has to stay distinguishable from the rest. */
@media (forced-colors: active) {
  @supports selector(::scroll-marker) {
    .sk-carousel__slide::scroll-marker {
      border-color: CanvasText;
    }

    .sk-carousel__slide::scroll-marker:target-current {
      background: Highlight;
      border-color: Highlight;
    }
  }
}